4 Easy Image Optimisation Tips + Advanced Techniques (2020 Update)

Categories
SEO Website Development

I break down website image optimisation so even people without coding knowledge can improve their on-page SEO.  If that’s you, keep reading.

In an ideal world, you, a small business owner, could dedicate your time to running your business and increasing your profit margin.

You wouldn’t have to worry about pulling complex legal manoeuvres, securing project approvals, managing social media or solving marketing problems.  You’d have the money to simply outsource everything to skilled, reliable contractors.

Unfortunately, we don’t live in an ideal world, and familiarising yourself with law, accounting, marketing and PR is simply part-and-parcel of being a small business owner.  You’re the jack of all trades, living off a shoestring budget, and most of the time it’s a lot cheaper to do something yourself.

Website maintenance is one of those DIY aspects.  Even if you’ve hired a developer or a marketing firm to build you a shiny new website that looks great and works even better, you probably can’t justify shelling out monthly retainers for the occasional price change or altered line of text.

If your website has been built using a CMS (content management system) like Weebly, WordPress, Shopify or Squarespace, it’s incredibly easy for you to make small changes to your website’s content and layout.

Something you’re probably going to alter?  Photos.

Whether it’s a new product, updated team pics, or fresh new header backgrounds, you will, at some point, want to give your images a makeover.

Even though uploading images via CMSs is fairly simple (often just a drag-and-drop file upload from your PC), it’s critical that you also consider SEO (search engine optimisation).

SEO is one of those terms you’re going to have to learn about very quickly if you want to survive in an increasingly-digital world; in short, it’s tactics and strategies for making your website appear at the top of search engine results, like those produced by Google and Bing.

Image optimisation is a relatively minor aspect of SEO, but it’s certainly not one you should overlook.  In this article, I’ll be listing four easy methods which you, a small business owner with no coding skills, can use to optimise your website’s images.

Make sure the photos are sized properly

Obviously, you don’t want your website cluttered with grainy, poor-quality images, but, at the same time, you don’t want pictures that are unnecessarily large.  The larger an image’s file size is, the slower it will load, which increases your page’s loading time.

Since website speed is a fairly major SEO factor, it’s important that your images aren’t too big.  If you know the dimensions of how your image is going to displayed, you can export it from Adobe Photoshop as those dimensions.

For example, if you know your image has a max-width of 300px, then you could export it by entering ‘300’ under ‘Image Size’ in the ‘Export’ window (the height will adjust automatically).

​An even easier way is to use Photoshop to automatically optimise the image.  To do so, click File > Export > Save for Web (Legacy).

Then choose Preset (JPEG High), tick ‘Optimized’ and save it.

Using one of our social media templates (featured) as an example, a standard 1500px x 1500px graphic clocks in at 982 KB; the optimised image, saved using the above method, is just 163 KB.  There’s also no noticeable decrease in quality.

If you don’t have Photoshop, there’s plenty of online size optimisation services available.

For more advanced techniques, check out this article from Web FX which details other ways of optimising images.  Although you’ll probably never need these (they’re complex, time-consuming and the savings are relatively minor), they could be useful in circumstances where the smallest possible file size is required.

Some CMSs also have ways to further reduce file size upon upload.  WordPress, for example, has a huge range of plugins dedicated to image size reduction.  At Chevron Editing, we use Smush by WPMU Dev, but there are a number of free and paid options available.

Save your images as JPEGs.

Although other image formats like PNG and GIF are used by professionals, chances are that you won’t need these for your run-of-the-mill images.  JPEG images are universally-supported and have a relatively small file size, so make sure your images are saved as .jpg.

Next-generation image formats like JPEG 2000, JPEG XR and WebP are available, but, at the moment, they’re not universally supported.  This means that some browsers won’t show images saved in these formats, requiring you to also provide backup JPEG images – this is fairly complex, and not easy to do with the standard CMS image tools.

Make sure your file name includes your target keyword.

If you don’t know what keywords are, it’s time to go and do some more reading.  If you didn’t already know, each page or blog post on your website should have a target keyword that you’re trying to get that page to rank for.

When you save your images prior to upload (or even once you’ve uploaded them), change the file name to a relevant keyword.  For example, if you’re a hardware store selling a wrench, don’t save it as IMG0001.jpg, or productimage.jpg.

Try something like Small-Brand-Name-Wrench.jpg – this incorporates the manufacturer’s name, the actual product, and the product variant (in this case, size).  This makes it easier for search engines to understand what the image is about.

Include alt tags.

An alt tag (alternate text tag) is a HTML attribute available for images.  If that whole sentence just confused you, don’t worry.

Most CMSs make it very easy to add alt tags to images – this is normally done when you add them to a page.  You’ll see a field somewhere asking you for ‘Alt text’; in Shopify, for example, hovering over a Product image in the Product editor will pull up four icons – Edit Image, Preview, Edit Alt Text and Delete. In WordPress, inserting an image via the ‘Add Media’ button will produce a popup like this.

wordpress image alt text mockup
Enter your alt text here.

Your alt text serves two purposes: one, it helps search engines understand what the image is, and, two, it helps customers using reading technology.  Your alt tag should be a short phrase that describes what’s in the image.  It should be specific, rather than generic – “Small Brand Name ratchet wrench” versus “a close-up of a wrench”.  Avoid keyword stuffing (that is, make sure the alt text is actually relevant to the image), keep it relatively short, and avoid unnecessary words/phrases like ‘a’, ‘picture of’, ‘the’, etc.

 

Advanced Techniques for Image Optimisation

The following techniques aren’t easily implementable.  You’ll need some knowledge of coding if you want to attempt these yourself; alternatively, hire a developer to quickly implement them across your site.

Lazy-load images

Lazy loading images is a relatively simple concept.  I’ll walk you through it.

When you click on a web page and your browser starts to load that page, the browser has to load all of the resources required for that page.  This includes external CSS files, external scripts, images and so on.  The HTML code for an image looks something like this:

<img src="/media/2020/my-website-logo.png" alt="My Company Logo">

There might be other attributes present within the <img> tag, like class, title and so on, but the important one here is the src attribute (source).  The URL indicates the source location of the image – basically, this is telling the browser where it can find the image to display it.

As soon as your browser starts to load the page, it retrieves the image from that URL and displays it.  This is done via a HTTP request.  The main reason we compress images is to increase the speed of the requests and make the page display faster.

What lazy loading does is load the image when you need to see it, rather than when the page first loads.  It is used for below-the-fold images (images you won’t see until you scroll down a bit).  The idea is that, rather than loading all the images on the page at once, they only load when you scroll down to them.  This can be accomplished by using Javascript’s Intersection Observer API.  Alternatively, you can use a plugin to do it for you.  Generally, I wouldn’t bother lazy loading images unless you have a lot on one page, as downloading an additional script can be slower than just loading the images.

Interestingly, the Google Chrome team are working on adding native lazy loading for Chrome 75, which will support a loading attribute with three values: lazy, eager and auto.  Although this won’t be universally supported, it will definitely be a better solution than JS, and (hopefully) will become prevalent in the near future.

Use CSS filters rather than different images

I came across this image optimisation suggestion in a recent Moz blog post, and it’s definitely worth considering.  The idea is that if you have different versions of the same image (different colours, brightnesses, and so on) that you use CSS filters to manipulate the displayed image, rather than having two different images fetched and downloaded.  This will reduce the number of requests to the server, and is a much more elegant solution.  For example, our Home page logo displays as white, rather than black, because we added a CSS filter that inverts the colours on that specific page.

By Duncan Croker

Duncan is a copywriter with a background in editing and storytelling. He loves collaborating with brands big and small, and thrives on the challenges of hard marketing.

Leave a Reply

Your email address will not be published. Required fields are marked *