Ensure optimal performance of your website

If you want your website to be efficient, fast and high up in Google results – you have no choice but to take proper care of image optimisation.

Image optimisation – what is that?

Optimisation, in a nutshell, is nothing more than getting images or graphics to weigh as little as possible while maintaining the best possible quality. It is also crucial to choose the right file format and size, as well as naming, which proves to be especially important when it comes to SEO.

Smaller (lighter) graphics mean faster page load times, and therefore more efficient reaching of users. According to Google’s research, a longer loading time of 5s instead of 1s for example, means that a viewer is 90% more likely to leave a page before it is even displayed. Not only users, but Google itself does not support pages with unoptimised images – a page will be further down the search list if the images or graphics on it are of significant weight.

However, the problem is that the smaller the file (weight) the lower the quality. This is why the ability to optimise is so important – we are looking for the so-called “sweet spot”, i.e. the golden mean between weight and quality.

How do you optimise your photos effectively? Find out below.

Step 1

DETERMINATION OF DIMENSION

A generally accepted rule is to prepare images in dimensions that will actually be displayed on the website. If we know that images have a resolution of e.g. 800x800px, it makes no sense to place images in FullHD resolution. They will be cropped by the website anyway, but the weight of the image in its original resolution will significantly slow down the loading process.
Images that are too small are a huge visual drawback – when scaled to the desired size on the page, images will simply be blurry and unattractive, while images that are too large will negatively impact loading and indexing.

Step 2

FORMAT SELECTION

Three file formats are most commonly used – .jpg, .png and .gif. Each has its advantages and disadvantages, and each will perform slightly better or worse depending on what the graphic represents.

• PNG (Portable Network Graphics)
  It has lossless compression, which means that the original look of the file can be retained without compromising quality. It is a good choice if you want high quality and sharp graphics. It is especially recommended for illustrations, infographics or charts, and also for elements without backgrounds, because PNG is the format that supports transparency.
• JPEG (Joint Photographic Experts Group)
  This is the most commonly used file extension, using lossy compression. Files in this format can be compressed in any way to obtain satisfactory quality and at the same time low file weight. Recommended for all kinds of photos, including the most complicated ones.
• GIF  (Graphics Interchange Format)
  A lossless compression format, most commonly used for animations and simple images using only a few colours, due to the fact that this format only uses 256 colours and when saving graphics with more colours, it will simplify them considerably.

• WEBP
  This is a relatively new format that offers both lossy and lossless compression. It uses transparency, supports animation and has a good quality to compression ratio. It is widely used by Google, whose aspiration is for it to become the standard. Unfortunately many programs do not offer saving to webp as a standard.

Step 3

COMPRESSION – WEIGHT

Image compression is the reduction of the weight of a photo/graphic while reducing the quality. This reduction in quality can be greater or lesser depending on how much you want to reduce the weight of the photo. Of course, the best compression format is JPEG – we can freely reduce the weight of the photos in this format, but the stronger the compression, the better the quality of the photos. Artefacts, grain and blurring may appear, that’s why the rule of thumb is 80% compression.
The weight of the entire website should not exceed 1-2MB, so images should be as light as possible so as not to overload the page

Step 4

FILE NAME

Having already perfect graphics in terms of weight, size and format, you cannot forget about proper naming, which is especially important when it comes to Google image search. You should avoid names not related in any way to its content, e.g. dates or random names from the camera roll such as DSC12345.jpg or 2021_09_30.jpg. The name should contain key phrases and the whole should be as concise as possible, e.g. modern-house-project-01.jpg We should remember to separate words with a hyphen, so that Google robots and the users themselves (if they reach the name of the photo on the page) will be able to classify it correctly. Do not use local characters, spaces or underscores, as these characters do not work as a word separation for Google bots.

In addition to the file name itself, the alternative text or “alt” also helps Google to index the image. This is a description which helps to identify the image content more accurately. It should also contain key phrases and be as short as possible. If there are problems loading an image on a page, it will be replaced by what was previously set under the “alt” attribute.