A (Not So) Brief Guide to Image Optimisation

Optimising images for SEO

Most marketers are well aware of the importance of images from an aesthetic point of view, but how many are au fait with what the perfect picture can do for search engine ranking?

With competition for attention hotter than ever online, brands are desperately seeking nuanced ways in which they can steal a march on their competitors. Without wanting to sound all Tesco, every little really can help when it comes to search engine optimisation, and getting technical with your images might just prove to be the difference.

Now, we know that Google image search only gets half a percent of Google’s overall traffic. But it´s widely believed that images account for far more than they are given credit for, with blended search results said to be masking its true value.

Consider that, for instance, up until a few years ago, images didn’t actually appear on the search listings page. How times have changed – now, we´re quite willing to allow a picture to tell the whole story, and Google has acknowledged this shift in mindset accordingly.

For many, though, image optimisation might be fairly new territory. We’ve picked our SEO team´s brains to bring you some of the most effective practices and methods, which will hopefully have people landing on your website via Google Images in no time.

Image optimisation is not as quick to master as you might think, but if you follow these guidelines, you should be well on your way to making it part and parcel of your routine.

Before you upload your image

There is so much to do before you even think about uploading your image file. In fact, it´s arguably where all the hard graft is. These preliminary tasks make a monumental difference to your image optimisation, so heed our advice, these are not steps to be skipped!

More for less – downsize your file size

save-configuration-dpi-kbV show Silicon Valley will tell you, there is great value in being able to compress a file without losing any of the quality that goes with it. Speed is of the essence these days and mega-megabyte images can slow down loading times significantly – something Google is not always best pleased about.

The key, then, is to shrink your images – we´re not talking height x width here – while maintaining the visual aesthetic. This is only going to become ever more important as mobile acquires more clout, with Google appearing to make alterations to its algorithms which align with this shift towards on-the go browsing. Longer loading times on mobile cost both time and money, of course, so it is little surprise big, data-sapping images are being frowned upon.

Start sizing down your images with the use of tools such as JPEGmini, whose tagline is rather neatly “Your Photos on a Diet”. Yahoo’s Smush.it, which uses optimisation techniques specific to image format to remove unnecessary bytes from image files, could prove handy too.

Our SEO team’s personal favourite is Paint.NET. For one, it´s free; secondly, it´s really easy to use, plus you can set dots per inch (DPI) and reduce the image quality whilst watching the kilobytes reduce so you can get the best for less.

So, what’s our advice?

  • Aim for an image size of less than 100kb (but preferably around the 70kb mark)
  • Reduce the DPI of your image to 72dpi (where you really can´t get away with it, run with 96dpi instead)

Strip out unnecessary data (in tech talk, lossless compression)lossless-compression-info

Who’d have thought it, but all those extra bits of property information add bytes to your image, whether it´s the date or camera model information. Removing this information makes absolutely no difference to the quality of the image (hence lossless!) so it´s a complete no-brainer.

You can strip out this information straight from your desktop. Just click “remove propoerties and personal information” and select which bits of info you wish to remove. Photoshop is good at this too: you just have to select “Save for Web and Devices”. For serious (free!) productivity, you can bulk upload to kraken.io and select lossless compression. Regardless of whether your images are JPG or PNG, it´ll do them all for you. If you want to tailor your file size separately using image software later, you can select to skip any loss compression too.

Embrace the unique – master naming your files

As children we’re told that being unique is something to be proud of, and that message continues to resonate as we go about adulthood. Marketers are all too aware of the importance of carving a distinctive voice when it comes to content – and that emphasis on the unique translates to image names, too.

As you can imagine, there´s going to be a fair few “david-beckham.jpg” file names out there. Therefore, if you want to be in prime position when the swathes of people seek out images for one of the world´s most photographed men, you´re going to have to be a bit more descriptive.

As Shopify stresses, creating imaginative, keyword-rich file names is absolutely vital for image optimisation. Embrace the niche in which your image exists, thus setting it apart from the rest. For some steer on how to do this, take a look at your website analytics and see what phrasing patterns your customers use to perform searches. Whatever you do, just don’t keep the random file name your camera has kindly generated for you.

Don´t go overboard, mind – keep your file name succinct and to the point.

Our technical checklist:

  • Use letters a – z
  • Stick to numbers 0 – 9
  • Use hyphens instead of underscores
  • No capital letters either

A winning file name

david-beckham-sexy-new-haircut.jpg

A complete disaster zone

AGH687950_cam_45_ppz.jpg

Save as…?

choosing-image-file-type

Yes, it matters, and really depends on the application of your imagery. Chucking in a GIF at the top of the page can be suicidal. And yet, on social media they can prove a real winner. What´s that all about? There’s a time and place for most image types, but implement the wrong one, at the wrong moment and you could be in a spot of bother.

For images such as photographs

Best choice here would be JPG. You will guarantee the best image quality of the file types and an absolute must for photographs. JPEG images are able to be compressed significantly, which results in that winning combination we spoke about earlier: quality images with small file sizes.

Google also recommends saving as a progressive JPG instead of a baseline. Difference being, progressive starts out fuzzy and gets sharper as it loads whilst a baseline is where it staggers down from the top edge.

Opinion is mixed on which to pick; some argue progressive is slower on mobile… The choice is yours.

For logos and icons

PNGs are perfect for icons and logos, particularly if you want transparency. They boast more colours and less susceptibility to degrading over time with re-saves. That said, the file sizes can still be much larger for PNG than its alternatives, prompting some caution about overuse.

To be avoided (unless they’re animated and you just can’t help yourself…)

Veggie market train station

GIFs – small in size, and terrible quality. Something of a genetically inferior cousin to the JPEG: not as attractive and often a little chunkier in size. However, without wishing to discredit GIFs altogether, they can prove a winner when more plain and simple images are required. Whilst sounding something of a backhanded compliment, you need only look at Reddit to see how effective it can prove to be.

Scale to size

Much to everyone’s disappointment, when you scale an image within your content management system it doesn’t truly change its size. It´s merely using Cascading Style Sheets (CSS to scale it down. If you want proof, you can check for yourselves by disabling all stylesheets and watching your pretty thumbnail explode into full size before your own eyes. It is probably one of the biggest eye openers you’ll ever have when you try it out. The web developer toolbar for chrome or firefox lets you disable all styles easily.

The best thing to do here is scale your images before you upload them to your media library. You probably have a size you use for featured images, banners, thumbnails, etc. So make a note of those sizes and scale proportionately using your image manipulation software in advance next time.

Lift off! Time to upload

We got there in the end, and all that hard work in the preliminary stages will put you in prime position for optimising your visuals once they´re in your media library.
adding-alt-attribute

Prime your alt attributes

This brings us nicely on to alt attributes, or tags, which is the text that will be visible to the visitor when, for whatever reason, they cannot view the image – for instance, they have disabled images in their web browser, because their ISP is on a go-slow day. Search Engine Watch points out that the recommended maximum length of alt text is 125 characters, but we’d suggest streamlining them as best as possible.

Usually four to six words will do the trick – “David Beckham sports new hair style” -but sometimes the image will call for something a little lengthier – “David Beckham shaves head in protest against paparazzi”.

Now, it´s not often that you´d hear us say this, but keywords aren’t essential here. That´s not say that there shouldn’t be a smattering of them in there, but don’t overload it to the point where people are shrivelling their eyes to imagine what on earth the image comprises. Short and to the point is the overriding takeaway here, then – just what the new generation of web users have come to expect.

Use image sitemaps

Things now take a further turn for the technical, with Google Sitemaps. As the search engine giants points out: “Sitemaps are a helpful tool that can improve the crawling of your site”; especially if your site is a large and complex beast which demands quite a lot from Googlebot.

In fact, as far as images are concerned, web crawlers cannot make sense of them altogether if they are not called out in the webpage source code. So, if you want Google to be able to distinguish that images even exist on your website, you may choose to list their location in an image site map.

We won’t present you with a step-by-step guide to Google Sitemaps, as YouTube is your friend if you want to take the challenge on yourself. What we will say, however, is that whilst not guaranteeing that your images will get indexed by Google, sitemaps will without fail increase the optimisation of your website.

Without wishing to tell you how to suck eggs, give your website a thorough testing. It might sound the most obvious piece of advice, but how many websites do you find yourself coming across where the images load out of sync with text? If that image happens to be your product, you might find potential customers, who are tired of waiting, hit the cross before they are persuaded to click “Buy”.

Finally, double check you haven’t blocked all your images from search in your robots.txt file. Yes, it happens.

Related Articles

Content Marketing Mistakes that Could Ruin your ROI

Four Facts About Modern SEO

Mastering Video Content Marketing

Additional Resources

Shopify

Search Engine Watch

Search Engine Journal

By |2015-03-03T09:35:01+00:003rd, March 2015|SEO, Uncategorized|