The best image format for SEO depends on the content of your infographic. In this article, you will know which one to choose and why! To improve the SEO of your article and considerably enrich your content, it is highly recommended to use visuals on your pages
But why? Well, the contents of “images and illustrations” can be a solution to highlight your page in order to captivate the user, illustrate and in some cases, sublimate your content. In most cases, articles contain a highlighted image. It is necessary to represent your entire article, in a single visual.
Images can be exported and integrated on your website in different ways.In addition,an image has a format, specifically the file format of your image. In the world of SEO, you can’t use just any image format to display it on your page. Indeed, optimizations will be required to have the most effective format possible.
The benefits of images in SEO
For search engines, images can be considered as an additional source of content. The fact that an image is on a web page makes no doubt that its SEO will rely on it. If your page does not have any images, then the internal optimization of your page will not be maximal. It is therefore advisable to use visuals very frequently. If you want to know more about the benefits of visuals on your site, especially from a SEO perspective, we invite you to read tips for the referencing of your images !
For a more pleasant user experience
In the world of SEO, there are many factors to take into account to rank on Google. Between bounce rate, click rate, and content depth, several elements are to be taken into account but one is fundamental The user experience. Indeed, an image must be representative of the article, it must be interesting, and it must not spoil the experience of your visitor
For a better experience, we invite you to focus on the quality of your infographicss, but also not to “overdo it”. If your image can offer you a diverse content, it can’t offer you a richer and more interesting content than a text. Google cannot read your images
On the other hand, Google takes into account the past experiences of visitors to your pageand thus draws conclusions. For example, did your previous visitor stop at your image to read the infographic? Or did your user suddenly leave the page after an image appeared? As you can see, images are essential but above all dedicated to your visitorsand not only for the indexing robots.
To display structured data that makes you want to
On Google search results, which could be called SERP : Structured data are used to display information from a pageand this, in a rather particular way. Thanks to this enriched information, you can give more the desire to Internet users to click !
The display of data is very graphic. There are several types, such as recipes or search bars. The structured data format containing an image is probably the most used on the web. Images are the easiest type of structured data to set up, especially on WordPress!
Formats to use on your site
You’ve created your beautiful infographic, or taken a real photo and you’d like to integrate it into your website. However, you don’t know what type of image to choose. Don’t panic, here we give you the best advice and an explanation of the main and most recommended formats
To understand how an image works, we will use two technical terms, well known to computer graphics designers: Vector file formats, and raster file formats
A vector format simply includes your illustration as a vectorwhile a raster format includes pixels. A pixelated image takes much longer to compute for a computer, than a raster image. But again… it depends on its content!
- The weight of a pixelated image is calculated on the dimension of the latterand more precisely on the number of pixels that it integrates
- For vector images, it is depending on the number of vectorsand the number of anchor points information on your illustration that is taken into account.
PNG format
The PNG format is one of the best known formats on the web. With this image file format, you can integrate an object or a silouhette without necessarily integrating the background of it This is specific to the use of a clipping tool: It serves you to cut out a part of a photoand export it on a transparent background
However, images in .PNG format can be very heavy, and therefore very long to load by the client browser. We therefore recommend that you check the weight of each PNG image on your website. To optimize the weight of your PNG file, don’t hesitate to use PhotoShop to export the file, by adjusting the size of your visual
Finally, if your image has a background but is currently in PNG format, we invite you to choose the following format from this list.
JPG format
The JPG format is the best known format on the web. It is a raster format, so it is totally pixelated. The larger the size, the more pixels, and therefore the better the quality! On the other hand, it can also be very heavy in some cases, especially when the size of your image is too large, or the JPG format is not compressed
Bad luck for web pages, this last scenario can considerably slow down your site. This is what I see on most websites: JPG images not optimized … So you will have to focus on the quality/weight ratio of your image, by reducing its size for example. By reducing considerably the latter, you will gain in weightsince fewer pixels will be present on your image. On the other hand, note that the quality of the image deteriorates as you go along
It is still important to keep an optimal image quality for the user experience of your page. You don’t want to read an article of great quality and come across an image that brings no value… So make sure that your JPG image is the optimal size for your web page, in order tooptimize the speed of your page.
SVG format
The SVG format is a vector format, simply including an HTML code and allowing todisplay a vector illustration on a website. You can for example create your illustration on the software Adobe Illustratorsoftware, and export this file in .SVG format in order to integrate it in your lines of code. Very practical, it allows you to easily integrate a logo, an icon or any type of vector illustration. The quality of your image will be optimized to the maximum thanks to the SVG format
Moreover, if you have CSS skills, you will be able to create any animation on your image in SVG! However, if your illustration includes a lot of vectors, the lines of code integrating your SVG file will be numerous, so it is not always optimal. This is to be checked according to each illustration and it’s up to you to make the difference. By default, the WordPress CMS does not support SVG files, you will have to use an extension, we recommend SVG support for its simplicity.
WEBP format
The WEBP format is comparable to the JPG format. However, the compression of WebP files is impressive. It allows you to recover a maximum of data on your image, by optimizing its internal code, and this, to establish a reduction of the weight of your image. The only problem with the WEBP format is that it is not readable and understandable by some important browsers
We mention in priority Safari on iOS. In this case, you can integrate the two formats, and make the user download the WebP if his browser allows it, or a .JPG if it is the only solution. On WordPress, you can use the Imagify plugin, allowing you to convert a JPG file into a WebP file automatically! You just have to install it, and upload your images as usual, the plugin takes care of everything!
GIF format
And finally, the GIF format, entirely adapted to animation. If you want to create a nice animation, you can use Photoshop for example, and create a timeline with your different layers. The only problem is that GIF formats are heavy and very often of poor quality
If you have skills in CSS/SVG/JS, we advise you to use the SVG format and to include your animation independently of your file. The GIF format is in some way several PNG files in a row. Due to the new technologies of the last few years, the .GIF format is very much frowned upon by most professionals, however, some still use it. This is probably due to its ease of creating animations
Contextual images or background images?
On an article, or more particularly on a web page (navigational, informational or commercial), you will inevitably have images to illustrate your content, but also images of scenery !
These two types of images should not be coded in the same way. For Google, a contextual image is much more important and aims to be referenced on the internet. To distinguish the two, we will use two methods. Here they are
- Contextual image: We will simply code your image in HTMLto define the content of the image. Here is the line of code to add to your web page:
- Background image: This time, out of the question to use HTML. We must turn to cSS to define the style of your page. The background-image attribute is dedicated to this type of use. Here is an example: background-image:url(my-image.jpg)
Conclusion
The best image format is probably the WEBP format for photographs, and the .SVG for simple logos with few vectors. The compression method is tedious on WEBP files and the quality of the image remains very optimal
However, some browsers do not allow it, so you will have to use an image conditioning method in HTML. To compress these images in JPG, we advise you to use Photoshop or an image compression software that is easy to use and above all very complete
Finally, don’t take this article as a generalization, everything can depend on what your image is made of and the way it is loaded on your site. Finally, and this… with a good advice, do not hesitate to use the image caching functions
Also, it may be appropriate to use a lazy load “to load your image at the right time! The goal here is to show your visitor a captivating image, without destroying their user experience. More precisely, avoid at all costs a slowdown of your page loading !
