Managing a website can be a daunting task, and one of the trickiest elements is images – what they are, how to place them, and how to make sure they look good on all devices. This blog post will explain a little bit about what images are and how to make them show up correctly on any device.
Based on the idea that you have a basic knowledge of your OneEach website, including creating, editing, and adding images to pages.
If you aren't quite familiar with those steps, before proceeding with this article, work through our 'getting started' video on the OneEach support site.
You will find specific instructions for working with images at the 2:00-minute mark and at the 7:25-minute mark.
Image File Formats – Alphabet Soup
The first step is to understand and recognize what is and is not an image. A PDF file, for example, is not an image file; it is a document file. There are four image file types that web pages support and can be integrated with text on a web page. They are denoted by their 'file extensions', which are the last three letters of their file names: GIF, JPG, PNG, and SVG.
- GIF – 'GIF' stands for 'Graphics Interchange Format'. The file type was created by CompuServe, a pre-internet online service, as a means by which its members could encode and exchange images. Its popularity grew outside of the service because it used an, at the time, advanced form of data compression and so images that were previously very large could be made smaller with little or no loss of resolution. GIF files are often used for logos, and for animated short video clips, but they fall down in terms of providing high resolution for photographs. For that, you have JPG and PNG files.
- JPG stands for 'Joint Photographic Experts Group,' which was the group of technical experts that created the file format. The JPG format was designed specifically for photographs; it supports very high-resolution images, but it also allows for very small files. It does this by using a more advanced form of file compression than GIF files, and the amount of that compression is adjustable. This allows for selecting a tradeoff when creating a JPG image, between file size and image quality. (Though JPG files can typically be compressed at a 10:1 ratio with almost no loss of image quality.) This type of file – where you can make it very small, but it does lose some resolution, is called a 'lossy' format. The JPG standard was created at almost the same time the internet became public. JPG files are far and away the most used image file format on the web. They are the file type you will encounter the most.
- PNG stands for 'Portable Network Graphics'. It's a 'lossless' file format, meaning that it's image compression technique loses no image information. PNG is a newer standard and is seeing wider use on the web, especially by graphic designers, because in addition to not losing any image resolution, you can make portions of a PNG image transparent, which is not possible in JPG files. Your OneEach site employs PNG files in various parts of its design for just this reason.
- SVG stands for 'scalable vector graphics'. It is not intended for use with images, but rather with shapes, fill colors, and text. It is ideal for logos or line drawings. An SVG file can be enlarged or reduced ('scaled') to any size without losing resolution.
Why is the Image Skewed?
Long ago, in the days before smartphones and tablets, websites only had to render correctly on a computer screen – one screen, for many years with almost square dimensions like a television, and more recently widescreens. But they were standard sizes and a given website always showed up the same way on them. Then all the handheld devices came along and things got complex, fast. A phone or a tablet, when used as it usually is, is narrow and tall, and thus the screen is narrow. So, a web page on a desktop computer that looked like this:
On a phone then looked like this:
The images were a fixed width and height and the web browsers on phones tried to show the entire image in the browser window – and that meant skewing the image.
What Does 'Responsive' Mean?
So websites had to change. They, and the images in them, had to know what device they were on, so they could respond by presenting themselves in the correct way to be viewed on the device. Hence the word 'responsive'.
How do you make images on your site responsive? Basically, by setting the image to have a fixed width, but letting the height auto adjust.
If you followed the video above, you know the standard procedure for inserting an image into a page:
- Edit the page.
- Place cursor in the body text, where you want the image to appear.
- Click the image icon body text editor toolbar. You will see the image properties dialog box.
- Click 'Browse', and then select an image, and insert it into the page.
- You should see something like this:
To make your image responsive, do the following:
- Click on the blue lock icon directly to the height and width fields in the upper-left corner, 'un-locking' it. This means that in this dialog box, the width and height are not 'locked together' anymore and you can change one without the other changing.
- Click on the height field, and delete the number there.
- Click 'OK'.
Now you'll see something like this:
Yes, now the image here in the editor looks skewed, but it will look fine on the page. So now click 'OK', and save the page. On a phone, the image will now be correct, like this:
And that's how you make images responsive in your web pages.