In this post you will learn:
In the previous article, we discussed the basics of how images and their optimization affect the SEO of your website. You should already know how to create proper alt and title attributes for the images and what are the most popular commonly used graphic formats. In this post, we will discuss further issues related to optimizing graphics for SEO.
Usage, format and compression
Each graphic format has its own specific characteristics that make it suitable for a specific application. Let’s discuss the most important applications and consider proper image compression. If you choose the right formats and optimize the images correctly, you will improve, firstly, page loading time, and secondly, user experience – which are both vital. This will make visitors more likely to stay longer on your site. This is important information about site for the search engines as it tells them the site contains high-quality content.
JPG/WebP
These formats are suitable for large pictures for illustrative purposes. These are the ones that you will probably buy on image stock platforms or order from a photographer. These formats have the best quality/size rate and, of course, WebP is the preferred format. Always try, whenever it’s technically possible to use WebP, as it will become the standard in the near future.
Both formats use lossy compression, i.e. the image quality decreases with the file size. How you choose the compression parameter is always an individual matter and is a matter of subjective assessment. In general, I recommend using high resolution and high compression images rather than low compression, small size images. High resolution may help compensate for the loss of quality.
PNG
This format should be used with care. PNG files are uncompressed bitmaps and are not suitable for large illustrations. Their most important feature is that they support transparency. Only use them when you really need a transparent background, for example if you are using a number of images where there are overlapping items.
The PNG format is often used for icons and small graphics. For such elements, such as single-coloir icons, you can take advantage of this format. The main advantage, in this case, is that you can use much higher compression using an indexed colour palette and reducing so-called colour depth. Basically, the colour depth is either the number of bits used to indicate the color of a single pixel or the number of bits used for each colour component of a single pixel.
In short, it means that the file contains information about the colours that are actually used in it (in opposite to e.g. True Color standard). In this way, you can limit the file size and limit the number of colours that are actually encoded and used in the file. In some cases, just a few, e.g. 10 colours, is enough to make an icon or graphic element seem fully legible, clear and sharp to our eye.
Just look at the examples below. Can you see a significant difference? Well, that’s the point.
You can read more about indexed colour here.
GIF
We haven’t mentioned this format yet. GIF is quite old format, similar to PNG, but has the advantage that it supports animation. Animated GIF – you’ve definitely heard about these if you have a smart phone. We send millions of funny GIFs every day, e.g. via popular instant messaging.
In the case of a website, an animated GIF can be useful when you need small animated objects, e.g. animated icons or buttons. In many cases, it is possible to get the animation using CSS or JavaScript, but sometimes GIF will be the best choice. Simple animations of several frames, with proper compression, give a sufficient impression of fluidity and can be really useful in some cases.
Scalable Vector Graphics
SVG is a vector format, as we already mentioned. This means that it contains a mathematical description of the visual elements it contains and is essentially an .xml file. It is very similar to other vector formats such as ai. or .eps, but has the advantage that it is currently supported by virtually all web browsers. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) in 1999.
Basically, SVG is a file containing a bunch of code. For example, the description of a sample object looks like this:
<path fill="red" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
It is great for illustrations such as logos and symbols, and sometimes even full-size illustrations when designed in a vector format, such as using Adobe Illustrator. All this allows for radical .svg file size compression, with the possibility of lossless scaling of illustrations to any size. Popular vector graphic apps, like Illustrator or freeware Inkscape, allow a lot of control over the optimization of .svg files. Thanks to this, it is sometimes possible to compress illustrations to ridiculous values, e.g. a few kilobytes.
One more feature of .svg files can be mentioned here. Due to the fact that they are .xml files, you can refer to their elements as any elements, e.g. HTML markers. This gives the possibility of dynamic changes directly in the graphic file and opens the field for complex animations, e.g. using JavaScript.
Icon fonts
In the case of icons and simple graphic symbols, an alternative to PNG and .svg files is icon fonts. These are special sets of symbols packed as a font, e.g in woff2 Webfont format, with all their pros and cons. In short, Icon Fonts are font files that, instead of letters and numbers are filled with icons, symbols and graphs.
There are many popular and widely used symbol packages of this type. We may mention, for example, Fontawesome or Material Symbols from Google. Most of them are free and, in a way, they are a kind of standard for creating websites. You will most likely encounter them, for example, in most WordPress page builders. In this case, their use is really very simple, intuitive and automated.
Pros? Performance. The font file is very small and you need just one server request to load it. Secondly, fonts are vectors, so you can freely scale them and they look well even in high pixel-density displays. Moreover, you can apply any CSS effect to it, since it’s just text, including animations and other simple yet effective stuff.
What’s next?
Enough for now? I hope you found this article useful in your daily fight against bloodthirsty search engines and their relentless algorithms. In the next section, we will discuss the more general aspects of User Experience and good practices related to using pictures on a website.
- How to Optimize Images for SEO? Part 2 - August 11, 2022
- How to Optimize Images for SEO? Part 1 - April 26, 2022
- What is SEO, and Why It’s Important for You? - March 5, 2022