Using WebP Format in Safari Browsers

Adem Mert Kocakaya - 04 September 2022

Senior SEO/ASO Manager

SEO (Search Engine Optimization)

Along with the importance of search engine optimization and user experience day by day, many technical regulations for websites have also become important to consider. Many metrics such as the experience of the user visiting the website, interacting with the site, and re-visiting the website on another day and time have gained importance. Here, the visual and media content used on the website is one of the important SEO metrics.

The biggest disagreement between websites and Google is the use of WebP image format in images added to the website. As it is known, Google supports the use of low-size, structured image formats for the web such as WebP, JPEG2000, and SVG for successful speed on the website. Especially in page speed analysis, it recommends the use of WebP on websites with "publish images in new formats" warnings. However, unfortunately, not all browsers support the WebP format suggested by Google, and it causes results that will negatively affect the user experience when trying to load sites quickly. One of them is that WebP format images do not appear in Safari browsers, which is among the most popular browsers. Here in this article, we talk about how you can generate solutions to WebP formats in Safari browsers.

What is WebP Format?

With the increase in content production with Web 2.0, the user experience on the pages has also become one of the priority factors. When users visit a website, all DOM elements (images, CSS, JS, etc.) on the page should load quickly, the page should not affect speed metrics such as FCP, LCP, and CLS, and should not slow down pages. However, this positive page speed is not always possible. Especially in e-commerce sites, the use of high-resolution product images causes the pages to load slowly and negatively affects the user experience and data consumption.

One of the image formats used as a solution to this situation is the WebP format. Webp is an image format developed by Google that allows the creation of lower-sized images without losing resolution compared to image formats such as PNG and JPG. WebP format (WebPage) are image format mostly customized for web pages. It is a compressed image extension that allows browsers to be displayed to users without fatigue and without excessive resources.

What Is The Problem With The WebP Format Of Safari Browsers?

WebP formatının avantajlı kullanımından ve Safari tarayıcılarda WebP formatlarının görüntülenmediğinden bahsettik. Peki ama Safari tarayıcıların WebP formatıyla sorunu ne?

WebP formatı, Google tarafından oluşturulduğu ve belli tarayıcıların performansı göz önüne alınarak oluşturulduğu için, her tarayıcı tarafından desteklenmemektedir. Safari tarayıcılar da WebP formatlarını desteklemeyen tarayıcılardan bir tanesidir. Aşağıdaki tabloda hangi tarayıcıların WebP formatını desteklediğini görebilirsiniz.

It is expected that all browsers will implement updates to support the webp format in the coming years. Because a popular web browser such as Safari does not support the WebP format, which creates a lot of trouble, especially for website owners.

Why Should We Use WebP Format?

One of the important criteria of search engine optimization (SEO) metrics is website speed. The visual and media content used on the site is one of the factors that most affect the speed of the website. For example, an image used in PNG format has a size of 2 MB, while a JPG extension with the same resolution can reduce up to 750 KB because it compresses the image. WebP format, on the other hand, can compress the same image up to 100 KB as it compresses images compatible with browsers.

In this way, a user visiting the page spends 2 MB of upload time and data while uploading the PNG format image, 750 KB of loading time and data for the JPG format image, and 100 KB of loading time and data in WebP format. This adds a positive score to the user experience by search engines, as it allows the user to load the page faster.

How to Use WebP Format in Safari Browsers?

The use of images with webp extension in Safari browsers is not possible for now. Because the browser infrastructure and rendering engines do not yet support the WebP image extension in Safari browsers. However, there is an alternative solution for users who still want to optimize their site using the WebP format on website.

There is a method to install alternative extensions of images with img tag added to the website HTML, in browser-side lines and inability to load problems. You can fix this problem by using onerror. Example:

If you pay attention to the image addition in the code above, we first cited our webp extension image in the "src", that is, the source part of the image. However, we have specified the path to the JPG version of the same image in case there is any error and the image cannot be loaded immediately.

Bu sayede herhangi bir tarayıcıda, WebP formatının yüklenmemesi durumunda tarayıcı, görselin JPG versiyonunu yükleyecek ve kullanıcılara hiçbir görsel kirlilik yansıtmadan kullanıcı deneyimini olumsuz etkilemeyecektir.

Thanks to the Onerror event, you can use your images in WebP format and provide a fast and performance page experience in all browsers that support WebP format.