From GIF to WebP: image formats and SEO

25/02/2021
  • Did you know that choosing the right format for your images has a direct impact on the SEO of your site? Let´s see these formats, including the latest: Google's WebP.

  • When you perform on page SEO optimizations, one of the basic issues when it comes to WPO or page performance is the size and weight of the images.

    It is not an issue that should be overlooked, because it directly influences ranking factors such as loading speed and, ultimately, user experience.

    Throughout this post we will unravel the main image formats that are commonly used, when it is best to use each of them and the new formats -capable of offering compression without losing quality- emerged with the need to improve SEO performance, such as WebP or JPG2000.
  • Web image formats

  • Actually, anyone with a basic knowledge of the Internet is used to dealing with .jpg or .gif files, for example. But... Do you know what their differences are? When is it convenient to use one or the other?

    Let's look at them one by one.
  • #1 – GIF

  • One of the veterans when it comes to digital imaging. Its name comes from the acronym Graphic Interchange Format and is characterized by:

    • Using a limited palette of between 2 and 256 colors.
    • It offers the possibility of using a transparent background.
    • It is a format that allows basic animations.

    Its main virtues can be, at the same time, its disadvantages. The limited palette means that images representing reality (such as a product, a portrait, a landscape...) do not offer the minimum quality required.

    Animations, which are still commonly used in social media or in the creation of banners for display campaigns, are quite clumsy for web, and there are other more interesting alternatives to the use of animated GIFS.

    Even so, without being optimal for SEO, it still has its use in details such as logos (or similar elements with few colors) that "float" over other images.
  • #2 - PNG

  • This format, which stands for Portable Network Graphics, shares many characteristics with GIF with certain nuances, but also has some that make it unique:

    • Limited color palette but with specific formats for 8-bit and 24-bit.
    • Transparencies on sharper backgrounds.
    • Lossless compression algorithm.

    We should use PNG when we want to incorporate to the page small simple graphics or illustrations with a limited amount of colors and that require transparency (logos, buttons...).

    It is not the right format for photographs because, as in the case of GIF, it will not give the visual result with a minimum quality, and it will also have an excessive weight penalizing the loading speed and, by extension, the SEO of our eCommerce.
  • #3 - JPG or JPEG

  • Actually, it is spelled both ways and its name comes from Joint Photographic Experts Group.
    It can be considered as the standard among digital image formats because, as you can imagine, it is specially designed for the representation of images with photographic quality.

    • It has an algorithm that compresses the information.
    • It allows to choose the compression level.
    • Wide 24 bit color palette.

    Unlike GIF and PNG, it is an ideal format for detailed photographs of any eCommerce. Although the compression usually affects quality, we have tools that optimize the photographs without affecting their quality.
  • This is a relatively old format, like all the others mentioned above. Aware of the need to update to the reality of new websites and the different media, they launched a version called JPG 2000 really optimized. A new format that differs from the previous one in aspects such as:

    • Ability to generate lossy and lossless compressed image in the same file stream.
    • High quality even in lossy compression compared to standard JPG.

    Basically, what it gives us is a higher quality ratio with a contained weight, which is ideal both from the prism of SEO and design and user experience.
  • #4 – WebP

  • If JPG 2000 is the evolution, we can say that WebP is the bet for an image format for web especially focused on SEO. In fact, its name already gives us a clue, but any doubt is immediately dispelled when I tell you that Google is its brand new owner.

    • Like JPEG2000, it allows to create images with and without compression in the same file.
    • It is very fast in both compression and decompression in the browser.
    • It supports transitions and animations.

    If you want to tinker with WebP and do your own tests, you have several online converters that you can use for free like this one that, as an additional advantage, allows you to save the settings to convert different photos with the same parameters.
  • Seen this way it seems the best option, doesn't it? Surely it will be in the short term, but right now it has some drawbacks, such as not being 100% compatible with some browsers like Safari (although the iOS 14 update already provides support for this new format).

    Another problem you will find is that you cannot edit them with PhotoShop directly, they need a plugin to do so.
  • Do you have any doubts about which image format to use to improve the SEO of your eCommerce? Ask us, we are here to help you!

  • Images | Unsplash, linked tool.

Jordi Ordóñez


Jordi Ordóñez is an eCommerce and SEO consultant with more than 16 years of experience in online projects. He has advised clients such as Castañer, Textura, Acumbamail, Kartox or Casa Ametller. Write in the official blog of Prestashop, BrainSINS, Marketing4ecommerce, Photography eCommerce, Socialancer, eCommerce-news.es and SEMRush among others. He is an editor on the Oleoshop blog.

search posts

Last posts

This website stores data as cookies to enable the necessary functionality of the site, including analytics and personalization. You can change your settings at any time or accept the default settings.

cookies policy

Essentials

Necessary cookies help make a web page usable by activating basic functions such as page navigation and access to secure areas of the web page. The website cannot function properly without these cookies.


Personalization

Personalization cookies allow the website to remember information that changes the way the page behaves or the way it looks, such as your preferred language or the region in which you are located.


Analysis

Statistical cookies help web page owners understand how visitors interact with web pages by collecting and providing information anonymously.


Marketing

Marketing cookies are used to track visitors on web pages. The intention is to show ads relevant and attractive to the individual user, and therefore more valuable to publishers and third-party advertisers.