Cookies disclaimer

I agree Our site saves small pieces of text information (cookies) on your device in order to deliver better content and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device.

Images

Image Optimisation

Contents:

Image Optimisation

Images are a great way to punctuate long content and enhance the site in addition to being intrinsic components of the look and feel of the site. Used in headers, menus, boarders, footers, hero images and many many more locations, images like everything else need to be optimised.

If you are selling products on an eCommerce site, images play a vital role in both attracting users and selling the product (which means improved conversion rates and revenue).

However, images can also increase page load times, slowing down your website for users. Image optimisation is therefore important to both mitigate the risks of reducing website speed and increasing overall performance in terms of UX (User Experience), SEO, and conversion rates.

ALT Attributes

Alt tags or alt attributes are text alternatives to images, they are used if an image is unable to be loaded or rendered by the browser. Hovering over an image on a page with the mouse should bring up a text box showing the contents of the alt tag.

Alt tags enable Google to determine what an image is of, being unable to do so otherwise, this is a very important component and all images should have an alt attribute.

The keyword that the page targets should also be used in images on that page where relevant. What that means is; use keywords in the Hero image or content breaking / punctuating images but do not rename the header image alt tag to target a keyword on each page.

Additionally, a title image can be applied to a video (as is shown in the example below) this should mirror or reinforce the keyword targeting. The code below is an example of how an alt tag and title tag can be used to effectively target the keyword that is relevant to an image.

<img alt="image optimization" src="http://example.com.au/image.jpeg" title="video optimization">

As always, avoid keyword stuffing and overuse of keywords within alt tags, rather use descriptive language that is relevant to the image. Well-optimised images, especially on ecommerce sites, are one of the only ways to get your products to appear in Google image searches.

Linking

If an image is used as a link to another page, the Alt Tag will be used in place of anchor text for delivering relevance to the target page. This won’t deliver as much relevance as a text link but will provide no relevance at all if the alt attribute isn’t optimised for the target page’s target keyword. For more information on internal linking, please follow the link.

In summary:

    • Use descriptive language
    • Do not keyword stuff
    • Use keywords where relevant
    • Do not include use alt tags on template images (such as sidebar, header, etc)
    • Include relevant information such as product name, model number, serial number, etc if the image is of a product
    • Optimise Alt tags for keywords of the target page if being used as a link

CSS Images

Check to see if non-template related images have utilised <img> tags to insert images, rather than with CSS. CSS inserted images have no opportunity for adding keyword rich ALT attributes.

Images Disabling

Ensure that the page is still readable with images turned off or disabled.

Don’t Steal

Unique content is important whether you are writing or drawing it! Stealing other website’s images could result in legal action being taken against you or your business. All content should be unique or at least your own intellectual property. You can also buy images or use images with a link to the source depending on the license associated with them.

There are a lot of sites out there from which you can buy images if you do not have access to your own images, such as:

Best free stock image sites

Best paid stock image sites

Image licensing

Royalty Free: By far the most common of the license types, royalty free (RF) images can be used multiple times without paying a royalty. Although great for those on a budget, these images are available to anyone and hence will not be unique to your website. These are the most lenient in terms of usage for either commercial or personal websites.

Rights Managed: This kind of license provides exclusive rights to an image for a period of time.  There are quite a few limitations on when and where and how these images can be used once they have been purchased.

Extended / Enhanced Licenses: These licenses allow you to extend the licensing agreement of the previously mentioned license types.
Remember to check the license of any image to ensure that you can legally use It and that you are using it in a legal way.

File Names

Often images come with random file names that use alphanumerical character strings; it is easy to overlook this when uploading images. File names should be descriptive of the contents of the image and relevant to the page.

Use the target keywords within image file names to improve the page’s overall relevance those target keywords. For example; in a product image use the product name, make, model, etc.

Avoid keyword stuffing though, for example if you sell the proverbial ‘widgets’ and you have a load of shots of a particular widget, you could use the following file names:

    • Big-red-widgets
    • Large-widgets-red
    • Bright-red-widgets-large

Avoid using the following keyword stuffing variants of this:

    • Buy-cheap-big-red-widgets
    • Buy-large-widgets-red-online
    • Compare-and-buy-bright-red-widgets-large-online

Overuse of keywords in filenames may be seen as spammy by Google and could lead to negative impacts on your rankings. As a rule of thumb ensure that no more than 60% of images contain a target keyword.

Summary

    • Keep file names to a few words (1-4 ideally)
    • Use hyphens to separate words (in the same way that we do with URL’s)
    • Avoid unnecessary words such as ‘a’, ‘to’, ‘of’ – you are not writing a story just naming a file!
    • Use keywords but avoid being spammy and stuffing keywords into image file names
    • Use descriptive language
    • Include relevant information such as product name, model number, serial number, etc if the image is of a product

Image Sitemap

Also mentioned in the sitemaps article in the Knowledge Base; creating an XML sitemap for your images is also an important step (if you want your images to be found in the SERPs), for more information on this please refer to the other article.

OG (Open Graph) Tags

Setting up Open Graph tags means that when a page is shared socially the correct image is shared with it. So ensuring that you have a relevant image for each page is important if your content is shared socially.

More information can be found on this in another article regarding open graph tags.

Image Loading Optimisation

As previously stated, images can reduce website performance, hampering speed and increasing page load times. There are a number of ways to improve website speed just by optimising your images, we cover website speed in another article which you can see by following the link.

We cover a large range of components to consider when optimising for speed, as there can be a trade-off of quality.

Image Formats

Below are the three main types of image formats used on the web:

.JPEG or .JPG (Joint Photographic Experts Group)

    • Lossy compression file format
    • Does not support transparency
    • Mainly used for photographs and large images for high quality
    • This format comes in two flavours: baseline & progressive (see below for descriptions)
    • This is the most common format for images

.GIF (Graphic Interchange Format)

    • Has a Lossless file format and is limited to 256 colours making this lower quality
    • Supports transparency
    • Can be used for small animations by flicking through multiple frames (images).
    • Only use this for very small things like flags or icons

PNG (Portable network Graphics)

    • Lossless data compression
    • Supports transparency
    • Great for small images such as menu images, flags, icons etc
    • Usually not recommended for big photographs (due to larger file size)

Progressive JPG: This format incrementally improves quality from a low-resolution versions, this is what you see in Google Images when the image begins fuzzy but then comes into focus. Google recommends this format as part of their page speed recommendations. But this is not the only way to intelligently load images to improve performance; we cover other methods later in this article.

Baseline: Renders image directly, no intelligent loading or compression.

File Size and Compression

Dimensions: The physical size (dimensions) of an image affects the file size (KB/MB) of the image. Consequently there is typically a direct relationship between image dimensions and file size. Resizing images to be smaller can improve load times but this can compromise the look and feel of the page.

Resizing images: A common mistake we often see is where a large image has been given new dimensions by defining its size in the HTML. Web admins often do this when making a thumbnail version of an image but using the same large size version of the image.

This means that the full image file size still needs to be downloaded and this creates both inefficiency and larger load times. Thumbnails and smaller images should be physically reduced in size, keeping the original image to be loaded if needed.

Compression: Compressing an image reduces the file size but also reduces image quality; hence there becomes a point after which the image quality is impacted too much. Aiming for 60%-70% JPEG quality strikes the ideal balance between quality and size.

Responsive Design

Responsive website design technology now allows for images to be resized intelligently delivering images that can be viewed on a range of screen sizes. There are several ways of doing this with CSS & BootStrap. Within each tool, there are a plethora of ways of specifying when and what images are to be used, check out w3schools for more information on this.

This is a complex and tricky topic with multiple routes to achieving the desired outcome, all of which aim to reduce load times by serving the most efficient image size based on the user’s device screen size.

Lazy Loading Images

Images that are ‘Lazy Loaded’ are loaded onto the page when needed, what this means is that typically any images below the fold are not loaded until the user scrolls down the page to where the image is. This prevents a page from loading and rendering every image on the page at the same time, thus reducing page load times.

However, this has a negative impact on SEO, because Google is unlikely to scroll down to the bottom of a page in order to load those images. Google confirmed this in a video, which you can see here. This will prevent images from being appearing within the SERPs. There is a solution to this issue, that Qnimate detail on their site called Qazy, you can read this here.

Wikipedia have a great article on Lazy Loading Images that details implementation options.

Other Speed Optimisations

For more information on how to improve website speed, please see our article on this topic.

Sign Up For Early Access
& Earn a Chance to Win 1 Years Free Subscription!

What You Get...

There's no obligation to become a full member after your trial, but we think that once you've seen what's available, you'll want to join us.

We are in the process of building our software and are ramping up to launch the Technical Auditing component in early 2018, soon to be followed by a suite of other components such as keyword ranking and backlink analysis.

Sign up today for 1 months free access and get a further 10% off of any package price when we launch for the first year as a reward for being an early subscriber.

Also, you will be entered into a lottery, where we will be giving away five 1-year subscriptions for free!

Sign up for early access today!