Optimization Basics of Online Images

We all know that humans are visual creatures. Our attention is much more easily drawn (and held) by an image than by a block of text. Good writers can certainly hold a reader’s interest, but until the reader starts the textual journey, the text is powerless. At first glance, any page is nothing but a batch of lorem ipsum, hopefully surrounded by sufficient visual stimuli to warrant further investigation.

When copywriters set out to write a particular piece of content, we normally get ideas for an image or two that illustrate the mental image we have that somehow fits the content. But often, the problem is that we’re tailoring our selection after our existing idea of the piece. Of course, we wrote it, so we already know what it’s about. So while the image may fit our idea of what supports our points, it may mean nothing to a reader that hasn’t yet read the page.

That’s where we missed the boat.

Image content

The first thing to consider is the content of the image… what does it contribute to the page? Does it spark interest, provide valuable information, stir an emotional response? Most writers try to select images that are relevant to the rest of the content on the page, but many tend to select them with an eye only toward how they relate to the content. How the images relate to the reader is often an afterthought.

Sure, images can contribute to the story we’re trying to tell, they can make a message clearer and more easily understood. But they need to also entice the reader to dig into the text. They need to promise something that the reader is interested in.

If we go to the trouble to research what the reader wants to gain from reading our content, why would we not also try to take advantage of using an image or two that will convince them to actually look at that content? Our meta descriptions entice them to click through to a page from the SERPs… our images can convince them to stay on the page long enough to sample our writing. Then all we have to do is deliver on their expectations.

There are many ways to use an image to accomplish that. We can play on their sense of humor, emotions, curiosity, sympathy… even self-interest. As eloquent as our copy may be, if the readers aren’t moved to consume it, we’ve missed the boat.

Image “resolution”

First, let’s get one important thing straight. Image resolution is undoubtedly one of the most misused terms around, as a digital image actually has no “resolution”. Images simply contain a given number of pixels. The resolution really applies only to the display (or print) capability. For the sake of helping people relate to what they’re used to hearing, though, I’ll be calling it “quality” here. Just understand the difference. What is often referred to as the resolution of an image is the ppi (pixels per inch) displayed or dpi (dots per inch) printed.

With that out of the way, it should be easy to understand that even the perfect image for the task will be less effective if it’s so blurred that it’s a chore to absorb it. Images make the fastest impressions on our brain, so it stands to reason that if we have to think about what the image depicts, trying to discern what it means, that impression will be slower. And every second that a visitor is on the page counts… the longer they have to wait to understand what the page is about, the less receptive they become to suggestion. Remember… they still haven’t seen how brilliantly your copy is written.

Higher quality images, of course, take longer to load, and that can become a major problem. So we need to find a happy medium… the image should be of decent quality to display clearly on the visitor’s device, but should load quickly. At that point, we also need to consider what image format we should be using.

Image type

There are several image formats we can use, each with their pros and cons. Many of us remember the .bmp images of yesteryear… highly pixelated and prohibitively large file sizes… there are rare instances, if any, in which you’d want to consider using a .bmp file online.

Most often, you’ll probably be using a GIF, PNG or JPEG file, all of which are raster images. The problem can be that when you zoom in on a raster image, the individual pixels become larger, too, creating a jagged, blurry effect. That’s why you can’t expect a nice 250px X 250px image to display as clearly when enlarged to 500px X 500px.

 

100 x 100 pixels 100x100 px image format

Magnified 4X image magnified 4X

In a raster image, the data of each pixel is individually plotted on a rectangular graph. That means that when an image is displayed on a higher resolution device, the resources needed to display that image increase dramatically.

Of all the raster image formats listed above, only JPEG is “lossy”. Basically, that means that when an image is digitized in JPEG format, some data is discarded as unnecessary for an acceptable image. This is basically the only reason for using JPEG over other formats… a much smaller file size is made possible.

Occasionally, you may use an SVG file, which is a vector format. In contrast to raster images, vector images are independent of the display resolution, so they can be increased in physical size with no loss of quality. But vectors aren’t well suited to complex images like photographs, because such images require so many different vectors to be called out. Geometric patterns, such as logos, are the more suited sort of image for this format.

There are other image formats, too, but for online uses, these are the most common. Some newer formats, such as JPEG-XR and WebP, can be both lossy and lossless. JPEG-XR compares very well to JPEG, with a higher compression ratio, without sacrificing image quality. WebP has similar advantages over JPEG, with the added benefit of being able to sustain image quality in converted PNGs, while reducing the file size by around 45%. Neither of these are yet in widespread use, but their compatibility is increasing, so it’s worth being aware of them.

Helpful hint: Each time a JPEG is saved, its lossy nature allows the image quality to degrade. So if you need to edit, crop or resize, do as much as possible in a PNG format, and save only your final work as a JPEG.

Okay, we’ve talked about the importance of treating the content of an image with the same care as your textual content and discussed various aspects of optimizing your online images, in order to help you select the best file format and image quality possible to maintain display quality and an acceptable page-load time and bandwidth usage. Now let’s look at some other aspects you should always address:

File size

As previously mentioned, large files increase page-load time, which can be frustrating, even driving visitors away. Large images also inflate your bandwidth usage, which can impact your hosting costs. As the percentage of users on mobile devices increases every day, this is especially important, as large image files load more slowly. Having a mobile-ready website is more than simply having a responsive layout.

Equally important as choosing the best file format for your images, you should save image files at the lowest possible pixel dimensions that will still render a clear image on most displays. This will vary depending upon your needs, but for most sites, 72 ppi (pixels per inch) will render a satisfactory image. If your site is featuring macro photographs, you will probably want to up that to 300 ppi. Only very special circumstance are likely to warrant higher than that.

Keeping the pixels per inch as low as is practical will help hold down the file size, regardless of what viewport it’s being displayed on.

But we’re not done yet… there’s still more we can do about file size. Compression of the file, such as with GZIP, will reduce the file size. The amount of reduction possible can vary greatly, however, depending upon the file type, number of colors, etc.

Display size

If you use the same image more than once on a page, such as a large, a medium size and a thumbnail size, you’re normally going to be better off uploading just the largest sized version that will display on that page and modifying the display size for the smaller version. Then the image is only called once. This is a common approach when you want to offer your users an option like click to enlarge. If you upload 2 different sized versions for the same page, they’ll both have to download from the server independently when the page is loading.

Helpful hint: If your site is on the WordPress platform, thumbnails can be handled very easily, displaying a small version of the image, which can be clicked to view the larger version. You can also modify the display dimensions in the HTML code to display at a particular size.

Only displaying an image a second time on the same page, smaller than its originally downloaded size doesn’t affect download time, but smaller images will render faster than larger versions.

If you’re displaying a smaller version of an image which is being displayed larger on a different page on your site, you can still use the original image, simply re-dimensioning it in the HTML. But in that instance, the page-load speed could be reduced by uploading a smaller version of the image, just for that page.

Set up files to prevent repetitive calls for domain lookups. If you use a lot of images on your pages, being called from several different domains, each DNS lookup can add to the initial page-load time. By hosting as many externally stored images as possible on a common domain, you can reduce the impact.

Layout

Place your images with your visitors in mind. You want to draw their attention, but not distract them. When an image pertains to a particular section of textual content, it obviously should be located adjacent to that text. Avoid clustering several images together and referencing them from other spots on the page; this just makes users scroll up and down, and is sure to annoy them. If it’s absolutely necessary, you can make it as easy as possible for them by linking within the page between the image and the text, as is explained here.

Break up your page a little to make it easier on your visitors’ eyes. For instance, justify one image left, and the next right, staggering them down the page. You can see a couple of different ways of text-wrapping images to accomplish that here.

Optimizing your images for SEO

It’s a good idea to ensure that your images have titles and alt attributes. While there’s disagreement about whether the alt text is a direct ranking factor, it almost certainly influences image search. Besides, for accessibility purposes, it’s a must for users that may be using screen readers.

Helpful hint: Avoid using text in images as much as possible, unless using an SVG (vector) image. Even then, you’re better off using web fonts, as they’ll render better. If using a raster image, text will deteriorate rapidly.

 

More information:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

 

Facebooktwittergoogle_pluslinkedin