Optimizing images for a better user experience

Image optimization is the colorful sprinkle on your website. Without it the ice-cream is still good, but it is not as appealing and does not have the wonderful contrasting crunch. To be perfectly honest, Google’s life revolves around the fact that we use it.

In itself image optimization is not going to create a boosting ranking effect, nor will it revolutionize your organic traffic world single-handedly, but it is a crucial aspect in creating a context for Google. A well curated image provides text, context, and consequently actions an expanded meaning and results in a holistic optimization.

The holistic image optimisation approach

Why then is this holistic optimization approach important? Correct, Google sees the context. Relevant images along with relevant texts are attractive to Google's algorithms just as they are attractive to the human algorithm while scrolling on an aesthetically pleasing web page.

Image optimization is part of on-page SEO and is largely technical. There are two main aspects to image optimization:

• On the one hand we have the optimization for Google, i.e. we want Google to find our image in a search.
• On the other hand we have the user’s experience, where the goal is to present an image that contributes to a pleasant UX.

For an image to work contextually for Google, an alt text is needed to help Google understand what the image really represents. Google's eyes and cognitive ability work just like ours - past-experiences make us understand the world around us through sensory impressions. This is exactly what alt text does, it is a fundamental sensory impression. For example, how can you be sure that the image you are seeing is precisely your mother's apple pie from childhood if you cannot inhale that specific smell? You cannot, you need the sense of smell. You also need sight and taste, otherwise it's just a pie, if even that.

The alt text describes in words what the image represents, if the word used happens to be one of your gold-plated keywords wonderful, but if it does not fit into that particular context, it is okay (cinnamon is an excellent spice in apple pie, cumin is not, therefore, if a keyword tastes like cumin it is in the wrong pie). You have to remember that throwing in keywords without relevance and no thought-through, becomes keyword stuffing.

Image optimization - placement and image choice

Continuing with mom’s apple pie we also want it at the right time, after the meal with coffee, as a delightful sugar kick, and in a food bowl on the dining table. Although, apple pie is great before the meal as well, it is not conventionally OK. In this sense, we want the image to be in the right place in the text, because it is relevant for both: Google and the reader.

Firstly, for Google's impression, so that Google can interpret the importance of how the elements are placed on the page, and secondly, that it is contextual for the user to see the right image in the right text. As mentioned, we cannot obviate that the apple pie is still as good, but if it is set in the right place and time at the family dinner it is even better.

Another important part when optimizing the user-experience is the choice of image. Sticking to unique pictures is always the best option, because downloading stock photos from free sites is neither hot for Google nor for the reader (you probably remember a day when there was no time to make apple pie, and you were presented with a freeze store version, those that have a factory-made palate no matter what is written on the description).

Therefore, if the opportunity to create your own, unique images is not possible or viable, search for a serious site, and contact the copyright holder. Another option is to buy an image from a professional image creator. So, your first choice is always to bake your own pie, if there is no time or lack of ingredients, do not buy the freeze version in the nearest store, go the extra mile and buy it from a bakery. An imperative to take always into account, is to not steal someone else's pie while it is cooling down in their kitchen window.

Image optimization - a broken down to-do list

Image optimization can be easily broken down into a concrete list of things to think about, e.g. it should not only be a relevant and appropriate image to the text. Functions such as size, format, and the like are fundamental to a well-designed website. In this case the end goal is not taking up too much space on the page, because it leads to slower page load and as a consequence generates a lesser experience for the reader.

Image optimization considerations:

• File name: The file name, like the alt tag, should be a simple description of what the image consists of. Therefore, if the file name is formed with a long skein like DM3568.jpg, change it to soft ice-cream.jpg (if the image represents a soft ice-cream).

• Captions: Not all images need a caption, but it can be fruitful if an image has it as they are usually read first. A caption is easily recognized, it is a slightly smaller text below the image that describes the image, or in some way complements the article.

• Alt-text: As loosely mentioned above it is a descriptive text for Google to understand what the image represents. Remember to keep it short and factual. The difference between the file name and the alt text, is that alt-text should explain exactly what the image represents. Remember also that, adding keywords when possible is a plus, but forcing them is not good practice, in such cases it is better to leave them out.

• Image type: Use the right image type, as we mentioned, stock photos are out of the question. Preferably use your own image, original is always best. If it is not possible to create your own image, use the option of buying an image from a professional photographer or artist. Do not use copyrighted material without the permission of the author, unless you want to enter boring conflicts or illegal paths.

• Placing: Images have to be correctly placed within the text, thus, a matching image to a matching text. It should also pass an aesthetically pleasing test.

• Size: Firstly, you have to distinguish between file size and image size, if you have high-resolution images with large dimensions, it is recommended to reduce the file size because it will decrease the amount of space it takes on the website, avoiding a slow website load. The size varies depending on the image, type of post, and website. The important thing is to find a size that does not compromise the quality, and does not take up too much space. If you have an image that only takes up 250x150 pixels on the page, it is unnecessary for the image to be 2500x1500 pixels. The rule of thumb is, as small an image as possible without destroying the quality.

• Format: There are different formats to choose from, and these should be chosen depending on the type of image, the most common are JPEG, PNG and SVG. The formats have slightly different advantages and disadvantages, in that they take up different amounts of space at the expense of quality. A simpler image does not have as great a need for high quality and therefore does not use as much space. Images that are used for, e.g. heroes and banners, are usually very large and thus, can be difficult to compress and maintain quality. A tip is to save them as progressive JPGs, this will load the image progressively for the visitor.

  • PNG – Produce high-quality images and therefore the file size becomes larger. This format is usually used for images with a transparent background.
  • JPEG – Give more freedom when reducing the size without spoiling the quality. They are often more SEO-friendly as the files are not as heavy as PNG.
  • SVG - It is the best option for high-resolution graphic images such as logos.
  • GIF – The best choice for animated images but can also be use for imagery that isn't too big.

Suggestions of some really cool image optimisation tools!

Finally, some tools to play around with, in the search for the perfect image with the perfect format and the perfect size. To find what works best for your particular image on a specific page, the best tip to follow is to test around with size and format. What works, what does not work?

Do not be afraid to try, the worst case scenario is that you have to do a "redo, do right".

The suggested tools are:

• https://squoosh.app/, Easy-to-use free program where you can set the quality and how many Kb the image should be compressed to.
• https://imageoptim.com/mac, A free program that allows you to compress JPEG, PNG and GIF. Here, too, there are a variety of different settings to gain control of the quality.
• https://affinity.serif.com/en-gb/photo/, A slightly more advanced paid-program that offers a freemium option during a 90 days trial. However, it can be worth the money if your image workload is high and requires different sizes for different types of content pages.