• a. Send us an email
  • b. Anonymous form
  • Buyer's Guide
  • Upcoming Products
  • Tips / Contact Us
  • Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Adds WebP Image Support in Safari 14

During today's WWDC Keynote, Apple showed off the latest version of macOS Safari that will ship with iOS 14 and macOS 11 Big Sur.

In the developer notes , Apple notes that it has added WebP image support for the first time in Safari.

apple macos bigsur safari improvedtabs 06222020

WebP images are supported in Chrome, Firefox and Microsoft Edge browsers, but has been notably absent from both iOS and macOS Safari. The addition to Safari makes the format more likely to receive widespread adoption.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

Jeaz Avatar

Please let us be able to turn it off or at least download a JPG. Until editing tools widely support WebP this is a headache.

gmanist1000 Avatar

But does it play back 4K YouTube? That’s the only reason I haven’t switched from Chrome.
The addition of animation also allows it to also serve as a substitute to animated GIFs.

Popular Stories

iPhone 16 Camera Lozenge 2

Apple Leak Confirms Four iPhone 16 Models With Same A18 Chip

Netflix Smaller 2

Netflix Starts Booting Subscribers Off Cheapest Basic Ads-Free Plan

HomePod G4 Feature

Leak Confirms Apple's Work On 'Home Accessory'

iPhone 16 Pro Front Update Blue

iPhone 16 Pro Models to Adopt 'M14' Advanced Samsung OLED Panels for Improved Brightness and Lifespan

macbook pro butterfly keyboard

MacBook Owners With Faulty Butterfly Keyboards to Get Payouts Soon

Next article.

HomePod G4 Feature

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

ios 17 5 sidebar square

Apple News+ improvements, cross-platform tracker alerts, website app downloads for the EU, and more.

iphone 15 series

Get the most out your iPhone 15 with our complete guide to all the new features.

sonoma icon upcoming square

A deep dive into new features in macOS Sonoma, big and small.

ios 18 sidebar square

Updates to Mail, Photos, Messages, and more, with Apple Intelligence features throughout.

macos sequoia sidebar square

iPhone Mirroring, Safari improvements, new Passwords app, and Apple Intelligence features throughout.

ipados 18 sidebar square

Apple Intelligence features, Smart Script handwriting refinement, Calculator app, and more.

visionos 2 sidebar square

New hand gestures, rearrange apps in Home View, larger Mac Virtual Display, and more.

Other Stories

Safari Technology Preview Feature

1 day ago by Juli Clover

iPhone 16 Cameras Feature 1

4 days ago by Tim Hardwick

iphone hidden trackpad tip

1 week ago by Tim Hardwick

New Beats Pill iOS 17

WebP

  • Español – América Latina
  • Português – Brasil
  • Tiếng Việt
  • Make the Web Faster

Frequently Asked Questions

What is webp why should i use it.

WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality (see Comparative Study ).

The WebP format essentially aims at creating smaller, better looking images that can help make the web faster.

Which web browsers natively support WebP?

Webmasters interested in improving site performance can easily create optimized WebP alternatives for their current images, and serve them on a targeted basis to browsers that support WebP.

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)
  • Safari 14+ (iOS 14+, macOS Big Sur+)
  • Google Chrome (desktop) 23+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+
  • Google Chrome (desktop and Android) 32+
  • Wikipedia WebP article

How can I detect browser support for WebP?

You'll want to serve WebP images only to clients that can display them properly, and fall back to legacy formats for clients that can't. Fortunately there are several techniques for detecting WebP support, both on the client-side and server-side. Some CDN providers offer WebP support detection as part of their service.

Server-side content negotiation via Accept headers

It is common for web clients to send an "Accept" request header, indicating which content formats they are willing to accept in response. If a browser indicates in advance that it will "accept" the image/webp format, the web server knows it can safely send WebP images, greatly simplifying content negotiation. See the following links for more information.

  • Deploying New Image Formats on the Web
  • Serving WebP Images to Visitors Using HTML Elements

Modernizr is a JavaScript library for conveniently detecting HTML5 and CSS3 feature support in web browsers. Look for the properties Modernizr.webp , Modernizr.webp.lossless , Modernizr.webp.alpha and Modernizr.webp.animation .

HTML5 <picture> element

HTML5 supports a <picture> element, which allows you to list multiple, alternative image targets in priority order, such that a client will request the first candidate image that it can display properly. See this discussion on HTML5 Rocks . The <picture> element is supported by more browsers all the time.

In your own JavaScript

Another detection method is to attempt to decode a very small WebP image that uses a particular feature, and check for success. Example:

Note that image-loading is non-blocking and asynchronous. This means that any code that depends on WebP support should preferably be put in the callback function.

Why did Google release WebP as open source?

We deeply believe in the importance of the open source model. With WebP in open source, anyone can work with the format and suggest improvements. With your input and suggestions, we believe that WebP will become even more useful as a graphic format over time.

How can I convert my personal images files to WebP?

You can use the WebP command line utility to convert your personal image files to WebP format. See Using WebP for more details.

If you have many images to convert you can use your platform's shell to simplify the operation. For example, to convert all jpeg files in a folder try the following:

Linux / macOS:

How can I judge WebP image quality for myself?

Currently, you can view WebP files by converting them into a common format that uses lossless compression, such as PNG, and then view the PNG files in any browser or image viewer. To get a quick idea of WebP quality, see the Gallery on this site for side-by-side photo comparisons.

How do I get the source code?

The converter code is available on the downloads section of the WebP open-source project page. The code for the lightweight decoder and the VP8 specification are on the WebM site . See the RIFF Container page for the container specification.

What is the maximum size a WebP image can be?

WebP is bitstream-compatible with VP8 and uses 14 bits for width and height. The maximum pixel dimensions of a WebP image is 16383 x 16383.

What color spaces does the WebP format support?

Consistent with the VP8 bitstream, lossy WebP works exclusively with an 8-bit Y'CbCr 4:2:0 (often called YUV420) image format. Please refer to Section 2, " Format Overview " of RFC 6386, VP8 Data Format and Decoding Guide for more detail.

Lossless WebP works exclusively with the RGBA format. See the WebP Lossless Bitstream specification .

Can a WebP image grow larger than its source image?

Yes, usually when converting from a lossy format to WebP lossless or vice versa. This is mainly due to the colorspace difference (YUV420 vs ARGB) and the conversion between these.

There are three typical situations:

  • If the source image is in lossless ARGB format, the spatial downsampling to YUV420 will introduce new colors that are harder to compress than the original ones. This situation can typically happen when the source is in PNG format with few colors: converting to lossy WebP (or, similarly to a lossy JPEG) will potentially result in a larger file size.
  • If the source is in lossy format, using lossless WebP compression to capture the lossy nature of the source will typically result in a larger file. This is not particular to WebP, and can occur when converting a JPEG source to lossless WebP or PNG formats, for instance.
  • If the source is in lossy format and you are trying to compress it as a lossy WebP with higher quality setting. For instance, trying to convert a JPEG file saved at quality 80 to a WebP file with quality 95 will usually result in a larger file, even if both formats are lossy. Assessing the source's quality is often impossible, so it is advised to lower the target WebP quality if the file size is consistently larger. Another possibility is to avoid using the quality setting, and instead target a given file size using the -size option in the cwebp tool, or the equivalent API. For instance, targeting 80% of the original file size might prove more robust.

Note that converting a JPEG source to lossy WebP, or a PNG source to lossless WebP are not prone to such file size surprises.

Does WebP support progressive or interlaced display?

WebP does not offer a progressive or interlaced decoding refresh in the JPEG or PNG sense. This is likely to put too much pressure on the CPU and memory of the decoding client as each refresh event involves a full pass through the decompression system.

On average, decoding a progressive JPEG image is equivalent to decoding the baseline one 3 times.

Alternatively, WebP offers incremental decoding, where all available incoming bytes of the bitstream are used to try and produce a displayable sample row as soon as possible. This both saves memory, CPU and re-paint effort on the client while providing visual cues about the download status. The incremental decoding feature is available through the Advanced Decoding API .

How do I use the libwebp Java bindings in my Android project?

WebP includes support for JNI bindings to the simple encoder and decoder interfaces in the swig/ directory.

Building the library in Eclipse :

  • Make sure you have the ADT plugin installed along the with NDK tools and your NDK path is set correctly ( Preferences > Android > NDK ).
  • Create a new project: File > New > Project > Android Application Project .
  • Clone or unpack libwebp to a folder named jni in the new project.
  • Add swig/libwebp_java_wrap.c to the LOCAL_SRC_FILES list.
  • Right-click on the new project and select Android Tools > Add Native Support ... to include the library in your build.

Open the project properties and go to C/C++ Build > Behaviour . Add ENABLE_SHARED=1 to the Build (Incremental build) section to build libwebp as a shared library.

Note Setting NDK_TOOLCHAIN_VERSION=4.8 will in general improve 32-bit build performance.

Add swig/libwebp.jar to the libs/ project folder.

Build your project. This will create libs/<target-arch>/libwebp.so .

Use System.loadLibrary("webp") to load the library at runtime.

Note that the library can be built manually with ndk-build and the included Android.mk . Some of the steps described above can be reused in that case.

How do I use libwebp with C#?

WebP can be built as a DLL which exports the libwebp API. These functions can then be imported in C#.

Build libwebp.dll. This will set WEBP_EXTERN properly to export the API functions.

Add libwebp.dll to your project and import the desired functions. Note if you use the simple API you should call WebPFree() to free any buffers returned.

Why should I use animated WebP?

Advantages of animated WebP compared to animated GIF

WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.

WebP supports both lossy and lossless compression; in fact, a single animation can combine lossy and lossless frames. GIF only supports lossless compression. WebP's lossy compression techniques are well-suited to animated images created from real-world videos, an increasingly popular source of animated images.

WebP requires fewer bytes than GIF 1 . Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.

WebP takes less time to decode in the presence of seeking. In Blink , scrolling or changing tabs can hide and show images, resulting in animations being paused and then skipped forward to a different point. Excessive CPU usage that results in animations dropping frames can also require the decoder to seek forward in the animation. In these scenarios, animated WebP takes 0.57x as much total decode time 2 as GIF, resulting in less jank during scrolling and faster recovery from CPU utilization spikes. This is due to two advantages of WebP over GIF:

WebP images store metadata about whether each frame contains alpha, eliminating the need to decode the frame to make this determination. This leads to more accurate inference of which previous frames a given frame depends on, thereby reducing unnecessary decoding of previous frames.

Much like a modern video encoder, the WebP encoder heuristically adds key-frames at regular intervals (which most GIF encoders do not do). This dramatically improves seeking in long animations. To facilitate inserting such frames without significantly increasing image size, WebP adds a 'blending method' flag for each frame in addition to the frame disposal method that GIF uses. This allows a keyframe to draw as if the entire image had been cleared to the background color without forcing the previous frame to be full-size.

Disadvantages of animated WebP compared to animated GIF

In the absence of seeking, straight-line decoding of WebP is more CPU-intensive than GIF. Lossy WebP takes 2.2x as much decode time as GIF, while lossless WebP takes 1.5x as much.

WebP support is not nearly as widespread as GIF support, which is effectively universal.

Adding WebP support to browsers increases the code footprint and attack surface. In Blink this is approximately 1500 additional lines of code (including the WebP demux library and Blink-side WebP image decoder). Note that this problem could be reduced in the future if WebP and WebM share more common decoding code, or if WebP's capabilities are subsumed in WebM's.

Why not simply support WebM in <img> ?

It may make sense long-term to support video formats inside the <img> tag. However, doing so now, with the intent that WebM in <img> can fill the proposed role of animated WebP, is problematic:

When decoding a frame that relies on previous frames, WebM requires 50% more memory than animated WebP to hold the minimum number of previous frames 3 .

Video codec and container support varies widely across browsers and devices. To facilitate automatic content transcoding (e.g. for bandwidth-saving proxies), browsers would need to add accept headers indicating what formats their image tags support. Even this might be insufficient, as MIME types like "video/webm" or "video/mpeg" still don't indicate the codec support (e.g. VP8 vs. VP9). On the other hand, the WebP format is effectively frozen, and if vendors who ship it agree to ship animated WebP, the behavior of WebP across all UAs should be consistent; and since the "image/webp" accept header is already used to indicate WebP support, no new accept header changes are necessary.

The Chromium video stack is optimized for smooth playback, and assumes there's only one or two videos playing at a time. As a result, the implementation is aggressive in consuming system resources (threads, memory, etc.) to maximize playback quality. Such an implementation does not scale well to many simultaneous videos and would need to be redesigned to be suitable for use with image-heavy webpages.

WebM does not currently incorporate all the compression techniques from WebP. As a result, this image compresses significantly better with WebP than the alternatives:

  • GIF (85 KB)
  • WebM with alpha (32 KB)
  • Lossless animated WebP (5 KB) 4

1 For all comparisons between animated GIF and animated WebP, we used a corpus of about 7000 animated GIF images taken randomly from the web. These images were converted to animated WebP using the 'gif2webp' tool using default settings (built from the latest libwebp source tree as of 10/08/2013). The comparative numbers are the average values across these images.

2 The decode times were computed using the latest libwebp + ToT Blink as of 10/08/2013 using a benchmark tool . "Decode time with seeking" is computed as "Decode the first five frames, clear the frame buffer cache, decode the next five frames, and so forth".

3 WebM keeps 4 YUV reference frames in memory, with each frame storing (width+96)*(height+96) pixels. For YUV 4:2:0, we need 4 bytes per 6 pixels (or 3/2 bytes per pixel). So, these reference frames use 4*3/2*(width+96)*(height+96) bytes of memory. WebP on the other hand would only need the previous frame (in RGBA) to be available, which is 4*width*height bytes of memory.

4 Animated WebP rendering requires Google Chrome version 32+

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-04-15 UTC.

WebP Image Support Coming to iOS 14

Avatar of Geoff Graham

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around.

But there’s one little line in the Safari 14 Beta release notes that caught my eye:

Added WebP image support.

🎉🎉🎉

This excites me because WebP is a super progressive format that encodes images in lossless and lossy formats that we get with other image formats we already use, like JPEG, but at a fraction of the file size. We use WebP right here at CSS-Tricks, thanks to Jetpack and its Site Accelerator feature that serves WebP versions of the images we upload to browsers that support them. Jeremy Wagner has a great write-up on WebP and how to work with it, specifically for WordPress.

So, yes, this means WebP will be largely supported across the board (:IE-sad-trombone:) once Safari 14 ships.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Even with that great support, defining fallbacks with the <picture> element is still a good idea.

Oh, and not to be completely overshadowed, Safari 14 also squeezes in some CSS goodies, like the :is() and :where() pseudo class functions, which we linked up a couple of weeks ago. Jen Simmons picked out other key features we should be excited about.

Safari 14 Beta Release Notes • Added WebP • Changed to derive <img> aspect ratio from size attributes • Added :is() • Added :where() • Safari no longer supports Flash • Added Safari Web Extensions • Added Webpage Translation (Beta) & much more: https://t.co/qO2Cy7rK4A — Jen Simmons (@jensimmons) June 22, 2020

Direct Link →

Yeah!!!! welcome to a few years back Apple

I’d written up a post on my site nearly 10 years ago, just after WebP had been announced (it was being called “weppy” at the time). I mentioned there was promise with a Safari plugin. It’d been supported until ~2015 https://github.com/nickzman/weppy/releases/tag/v1.0.3

We’ve all been waiting a long time to see Safari support but now that we’re getting it, I’m starting to wonder more about the politics of browsers vs actual tech… https://siipo.la/blog/is-webp-really-better-than-jpeg

Must-read: https://siipo.la/blog/is-webp-really-better-than-jpeg

This has made my day! It’s about time!!!!!

I recently noticed that webp is supported in Firefox, so I set up a script to convert a bunch of png images to webp. The funny thing is, in some cases, a maximally-compressed lossless webp image is bigger than a Zopfli-compressed png. It doesn’t happen often, and Zopfli takes a lot longer to compress a png, but it’s worth looking for.

Following up – one of the things that WEBP does afford is the possibility of animated images that also include transparency (think Gif89a but with full color) https://mathiasbynens.be/demo/animated-webp Can’t wait – Insta, Twitter and every other social will be overrun with better looking motion :)

Kind of wish they’d support webp in Finder MacOS too so we can view the images locally at least.

YES! Agreed. Would love to see that. There’s a Quick Look Plugin I use called “Glance” (it’s on the AppStore) which allows a lot of other previews for a lot of formats that native macOS doesn’t support. Maybe @samuelmeuli would consider adding webp? https://github.com/samuelmeuli/glance/issues/26

WebP image format

Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

Partial support refers to not supporting lossless, alpha and animated WebP images.

Partial support refers to not supporting animated WebP images.

Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

  • Official website
  • Official website FAQ - Which web browsers natively support WebP?
  • Bitsofcode - Why and how to use WebP images today
  • WebP decoder and encoder

Data by caniuse.com Licensed under the Creative Commons Attribution License v4.0. https://caniuse.com/webp

AnalyticaHouse

Using WebP Format in Safari Browsers

Adem Mert Kocakaya

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.

Using WebP Format in Safari Browsers

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.

Using WebP Format in Safari 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:

WebP Örneği

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.

Share Social Media

Our similar articles in the seo (search engine optimization) category.

A Dive into Prompt Engineering Techniques Pt.2

A Dive into Prompt Engineering Techniques Pt.2

Advanced ChatGPT prompt techniques in Pt.2, focusing on White et. al's classification! Prompt patterns for creative, informed, and engaging AI interactions.

A Dive into Prompt Engineering Techniques Pt.1

A Dive into Prompt Engineering Techniques Pt.1

Exploring LLMs through the academic paper 'A Prompt Pattern Catalog' by White et. al, this blog showcases practical prompt engineering with real examples.

Topic Clustering, a Core Content Strategy

Topic Clustering, a Core Content Strategy

Dive into the modern content evolution with topic clustering. Learn how a topic-centric approach boosts user experience and search rankings.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Tom Binroth

webP Support Safari on macOS Mojave

Will Apple Safari on macOS Mojave ever fully integrate webP and webM support?

It's a pity! You can use webP in an outdated Firefox Version and it renders great. Why does Apple still keep users away using webP. I do not want to switch to Firefox/Chrome. More websites starting to serve webp files and Safari won't show any images.

Posted on Aug 4, 2021 5:23 AM

Similar questions

  • Issues with Safari on Mojave 10.14.5 Safari doesn't want to work. I just did a Re-Install of the iOS. I have a hard wired Internet connection as well as wifi network. I'm getting 70mbps Download and 6 Mbps Upload speeds. Firefox is working flawlessly on my 2012 MacBook Pro. I am getting annoyed with this. I can't find any information on how to Fix this after 5 hours of Google searching. Is there a new version of Safari that ISN"T tied into Mojave 10.14.5 that I have to sacrifice a Goat to get? The Big issue is that sometimes Safari works fine. But then it doesn't want to load the websites that it's been going to for the last couple of years. 412 4
  • how do I put chrome browser on my MacBook Air with OS Mojave? how do I put chrome browser on my MacBook Air with OS Mojave? 496 2
  • How do I get a version of Safaris that works with mojave 10.14.2 How do I get a version of Safaris that works with mojave 10.14.2 209 1

Loading page content

Page content loaded

leroydouglas

Aug 4, 2021 10:17 AM in response to Tom Binroth

Isn't the webP webM Google? This may explain your conundrum as the battle continues.

WebP   is a modern image format that provides lossless & lossy compression for images on the web.

You can convert these if necessary.

You can open a WEBM file with most modern web browsers, like Google Chrome, Opera, Firefox, and Edge.

If you want to play WEBM files in the Safari web browser on a Mac, you can do so through  VLC for Mac OS X plugin. If your web browser isn't opening the WEBM file, make sure it's fully updated.

or search the app store:

webp compatibility safari

you can submit your user feedback: https://www.apple.com/feedback/macos.html

Aug 4, 2021 12:47 PM in response to Tom Binroth

Tom Binroth wrote:

Right, most modern web browsers show webP files, except Safari.

I am looking for native webP/webM support in Safari and macOS Mojave Safari.
Apple already implemented webP/webM support to Safari for iOS and macOS Big Sur.

I do not want to convert images. I would like to view website.

Right. Update your software, the current is macOS 11.5.1
Update macOS on Mac - Apple Support

Aug 4, 2021 1:00 PM in response to leroydouglas

leroydouglas wrote:
Too bad. Unfortunately MacPro5,1 does not support Big Sur.

Aug 4, 2021 1:10 PM in response to Tom Binroth

Your alternative is to upgrade your hardware.

Apple | Trade in

It never pays to get too far behind in the hardware or software, as you are experiencing now.

Aug 4, 2021 12:41 PM in response to leroydouglas

I am looking for native webP/webM support in Safari and macOS Mojave Safari. Apple already implemented webP/webM support to Safari for iOS and macOS Big Sur. webP and webM is getting a wide spread standard which exist around 10 years.

Aug 4, 2021 3:23 PM in response to leroydouglas

I have switched to Brave Browser.

Audio element

Method of playing sound on webpages (without requiring a plug-in). Includes support for the following media properties: `currentSrc`, `currentTime`, `paused`, `playbackRate`, `buffered`, `duration`, `played`, `seekable`, `ended`, `autoplay`, `loop`, `controls`, `volume` & `muted`

AVIF image format

A modern image format based on the [AV1 video format](/av1). AVIF generally has better compression than [WebP](/webp), JPEG, PNG and GIF and is designed to supersede them. AVIF competes with [JPEG XL](/jpegxl) which has similar compression quality and is generally seen as more feature-rich than AVIF.

CSS revert value

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, `display:revert` on a `<div>` would result in `display:block`. This is in contrast to the `initial` value, which is simply defined on a per-property basis, and for `display` would be `inline`.

Method of embedding images and other files in webpages as a string of text, generally using base64 encoding.

HEIF/HEIC image format

A modern image format based on the [HEVC video format](/hevc). HEIC generally has better compression than [WebP](/webp), JPEG, PNG and GIF. It is hard for browsers to support HEIC because it is [complex and expensive to license](https://en.wikipedia.org/wiki/High_Efficiency_Video_Coding#Patent_licensing). [AVIF](/avif) and [JPEG XL](/jpegxl) provide free licenses and are designed to supersede HEIC.

JPEG 2000 image format

JPEG 2000 was built to supersede the original JPEG format by having better compression and more features. [WebP](/webp), [AVIF](/avif) and [JPEG XL](/jpegxl) are all designed to supersede JPEG 2000.

JPEG XL image format

A modern image format optimized for web environments. JPEG XL generally has better compression than [WebP](/webp), JPEG, PNG and GIF and is designed to supersede them. JPEG XL competes with [AVIF](/avif) which has similar compression quality but fewer features overall.

JPEG XR image format

JPEG XR was built to supersede the original JPEG format by having better compression and more features. [WebP](/webp), [AVIF](/avif) and [JPEG XL](/jpegxl) are all designed to supersede JPEG XR.

PNG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the `.ico` format, the PNG format can be preferable.

SVG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the `.ico` format, the SVG format can be preferable to more easily support higher resolutions or larger icons.

Custom protocol handling

Method of allowing a webpage to handle a given protocol using `navigator.registerProtocolHandler`. This allows certain URLs to be opened by a given web application, for example `mailto:` addresses can be opened by a webmail client.

Signed HTTP Exchanges (SXG)

Part of the Web Packaging spec, Signed HTTP Exchanges allow a different origin server to provide a resource, and this will be treated as if it came from the original server. This can be used with AMP CDNs, for example, to allow the original URL to be displayed in the URL bar.

Video element

Method of playing videos on webpages (without requiring a plug-in). Includes support for the following media properties: `currentSrc`, `currentTime`, `paused`, `playbackRate`, `buffered`, `duration`, `played`, `seekable`, `ended`, `autoplay`, `loop`, `controls`, `volume` & `muted`

WebP image format

Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. [AVIF](/avif) and [JPEG XL](/jpegxl) are designed to supersede WebP.

X-Frame-Options HTTP header

An HTTP header which indicates whether the browser should allow the webpage to be displayed in a frame within another webpage. Used as a defense against clickjacking attacks.

htmlcanvaselement api: toblob: `type` parameter supports `"image/webp"`

Htmlcanvaselement api: todataurl: `type` parameter supports `"image/webp"`, offscreencanvas api: converttoblob: `option.type` parameter supports `"image/webp"`.

  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free

Image file type and format guide

In this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery.

Common image file types

The image file formats that are most commonly used on the web are listed below.

Note: The older formats like PNG, JPEG, GIF have poor performance compared to newer formats like WebP and AVIF, but enjoy broader "historical" browser support. The newer image formats are seeing increasing popularity as browsers without support become increasingly irrelevant (i.e. have virtually zero market share).

The following list includes image formats that appear on the web, but which should be avoided for web content (generally this is because either they do not have wide browser support, or because there are better alternatives).

Note: The abbreviation for each image format links to a longer description of the format, its capabilities, and detailed browser compatibility information (including which versions introduced support and specific special features that may have been introduced later).

Note: Safari 11.1 added the ability to use a video format, as an animated gif replacement. No other browser supports this. See the Chromium bug , and Firefox bug for more information.

Image file type details

The following sections provide a brief overview of each of the image file types supported by web browsers.

In the tables below, the term bits per component refers to the number of bits used to represent each color component. For example, an RGB color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value. Bit depth , on the other hand, is the total number of bits used to represent each pixel in memory.

APNG (Animated Portable Network Graphics)

APNG is a file format first introduced by Mozilla which extends the PNG standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of color depths , whereas animated GIF supports only 8-bit indexed color .

APNG is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activity throbbers , and other animated sequences. For example, APNG is one of the formats supported when creating animated stickers for Apple's iMessage application (and the Messages application on iOS). They're also commonly used for the animated portions of web browsers' user interfaces.

AV1 Image File Format (AVIF) is a powerful, open source, royalty-free file format that encodes AV1 bitstreams in the High Efficiency Image File Format (HEIF) container.

Note: AVIF has potential to become the "next big thing" for sharing images in web content. It offers state-of-the-art features and performance, without the encumbrance of complicated licensing and patent royalties that have hampered comparable alternatives.

AV1 is a coding format that was originally designed for video transmission over the Internet. The format benefits from the significant advances in video encoding in recent years, and may potentially benefit from the associated support for hardware rendering. However it also has disadvantages for some cases, as video and image encoding have some different requirements.

The format offers:

  • Excellent lossy compression compared to JPG and PNG for visually similar compression levels (e.g. lossy AVIF images are around 50% smaller than JPEG images).
  • Generally, AVIF has better compression than WebP — median 50% vs. 30% compression for the same JPG set (source: AVIF WebP Comparison (CTRL Blog)).
  • Lossless compression.
  • Animation/multi-image storage (similar to animated GIFs, but with much better compression)
  • Alpha channel support (i.e. for transparency).
  • High Dynamic Range (HDR): support for storing images that can represent bigger contrasts between the lightest and darkest parts of the image.
  • Wide Color Gamut: Support for images that can contain a larger range of colors.

AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed. This often has little impact on real-world user experience because AVIF files are much smaller than the equivalent JPEG or PNG files, and hence can be downloaded and displayed much faster. For larger file size the impact can become significant, and you should consider using a format that supports progressive rendering.

AVIF is supported in Chrome, Edge, Opera, Safari and Firefox (Firefox supports still images but not animations). As support is not yet comprehensive (and has little historical depth) you should provide a fallback in WebP , JPEG or PNG format using the <picture> element (or some other approach).

BMP (Bitmap file)

The BMP ( Bitmap image ) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.

Warning: You should typically avoid using BMP files for website content. The most common form of BMP file represents the data as an uncompressed raster image, resulting in large file sizes compared to png or jpg image types. More efficient BMP formats exist but are not widely used, and rarely supported in web browsers.

BMP theoretically supports a variety of internal data representations. The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with 0x00 bytes to a multiple of 4 bytes wide.

While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).

Theoretically, several compression algorithms are supported, and the image data can also be stored in JPEG or PNG format within the BMP file.

GIF (Graphics Interchange Format)

In 1987, the CompuServe online service provider introduced the GIF ( Graphics Interchange Format ) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the Lempel-Ziv-Welch (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by HTML , along with XBM .

Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). To simulate more than 255 or 256 colors, dithering is generally used. It is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.

Pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent.

GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.

GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.

Another popular feature of GIF is support for interlacing , where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.

GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use PNG for lossless and indexed still images, and should consider using APNG for lossless animation sequences.

ICO (Microsoft Windows icon)

The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a website to provide an ICO file named favicon.ico in a website's root directory to specify a favicon — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.

An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a BMP image without the file header, or a complete PNG image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.

Warning: ICO files should not be used in web content. Additionally, their use for favicons has subsided in favor of using a PNG file and the <link> element, as described in Providing icons for different usage contexts .

JPEG (Joint Photographic Experts Group image)

The JPEG (typically pronounced " jay-peg ") image format is currently the most widely used lossy compression format for still images. It's particularly useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory results.

JPEG is actually a data format for compressed photos, rather than a file type. The JFIF ( J PEG F ile I nterchange F ormat) specification describes the format of the files we think of as "JPEG" images.

PNG (Portable Network Graphics)

The PNG (pronounced " ping ") image format uses lossless compression, while supporting higher color depths than GIF and being more efficient, as well as featuring full alpha transparency support.

PNG is widely supported, with all major browsers offering full support for its features.

SVG (Scalable Vector Graphics)

SVG is an XML -based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern Web design.

SVG files are text files containing source code that, when interpreted, draws the desired image. For instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:

SVG can be used in web content in two ways:

  • You can directly write the <svg> element within the HTML, containing SVG elements to draw the image.
  • You can display an SVG image anywhere you can use any of the other image types, including with the <img> and <picture> elements, the background-image CSS property, and so forth.

SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.

TIFF (Tagged Image File Format)

TIFF is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats. This is because of the metadata often included, as well as the fact that most TIFF images are either uncompressed or use compression algorithms that still leave fairly large files after compression.

TIFF supports a variety of compression methods, but the most commonly used are the CCITT Group 4 (and, for older fax systems, Group 3) compression systems used for by fax software, as well as LZW and lossy JPEG compression.

Every value in a TIFF file is specified using its tag (indicating what kind of information it is, such as the width of the image) and its type (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). This allows different data types to be used for the same properties. For example, the width of an image, ImageWidth , is stored using tag 0x0100 , and is a one-entry array. By specifying type 3 ( SHORT ), the value of ImageWidth is stored as a 16-bit value:

Specifying type 4 ( LONG ) stores the width as a 32-bit value:

A single TIFF file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). However, software reading TIFF files is only required to support the first image.

TIFF supports a variety of color spaces, not just RGB. These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.

Long ago, some browsers supported TIFF images in web content; today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content, but it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.

WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. Lossy WebP images are on average 25–35% smaller than JPEG images of visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images in PNG format.

WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Lossless WebP holds the ANIM chunk, which describes the animation, and the ANMF chunk, which represents a frame of an animation sequence. Looping is supported.

WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either JPEG or PNG format, such as with the <picture> element .

Note: On Safari for macOS, WebP support depends on both Safari and macOS versions. You need Safari 14 or later as well as macOS Big Sur (11) or a more recent version.

XBM (X Window System Bitmap file)

XBM (X Bitmap) files were the first to be supported on the Web, but are no longer used and should be avoided, as their format has potential security concerns. Modern browsers have not supported XBM files in many years, but when dealing with older content, you may find some still around.

XBM uses a snippet of C code to represent the contents of the image as an array of bytes. Each image consists of 2 to 4 #define directives, providing the width and height of the bitmap (and optionally the hotspot, if the image is designed as a cursor), followed by an array of unsigned char , where each value contains 8 1-bit monochrome pixels.

The image must be a multiple of 8 pixels wide. For example, the following code represents an XBM image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern:

Choosing an image format

Picking the best image format for your needs is likely easier than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases.

Photographs

Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes JPEG and WebP good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both using a fallback with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.

For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a fallback . If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).

If the icon can be represented using vector graphics, consider SVG , since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.

Screenshots

Unless you're willing to compromise on quality, you should use a lossless format for screenshots. This is particularly important if there's any text in your screenshot, as text easily becomes fuzzy and unclear under lossy compression.

PNG is probably your best bet, but lossless WebP is arguably going to be better compressed.

Diagrams, drawings, and charts

For any image that can be represented using vector graphics, SVG is the best choice. Otherwise, you should use a lossless format like PNG. If you do choose a lossy format, such as JPEG or lossy WebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.

Providing image fallbacks

While the standard HTML <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions , as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version.

For example, if you're displaying a diagram best displayed with SVG, but wish to offer a fallback to a PNG or GIF of the diagram, you would do something like this:

You can specify as many <source> s as you wish, though typically 2 or 3 is all you need.

  • Guide to media types and formats
  • Web media technologies
  • Guide to video codecs used on the web
  • The HTML <img> and <picture> elements
  • The CSS background-image property
  • The Image() constructor and the HTMLImageElement interface

Ce n'est pas le langage de votre navigateur, nous vous conseillons de changer de langage :

Changer de langage :

  • Discover the Webvert Blog and Learn More About Website Optimization
  • WebP: Usage, Compatibility... Do You Really Need to Convert Everything to WebP?

WebP: Usage, Compatibility… Do You Really Need to Convert Everything to WebP?

Rédigé le 29/02/2024 par Noah Sturtzer

AWARENESS TECHNICAL

WebP: Usage, Compatibility…​ Do You Really Need to Convert Everything to WebP?

First, a reminder: what is webp.

WebP: An eco-friendly image format in search of universal support.

The digital world is evolving at a rapid pace, and with it, the technologies that underpin our online experience. One of these evolutions concerns the WebP image format, praised for its lightweight nature and positive impact on digital ecology. However, its universal adoption is hindered by challenges related to browser and operating system compatibility.

WebP is an image format developed by Google in 2010 with the aim of reducing image file sizes while preserving high visual quality. It uses more efficient compression than older formats like JPEG and PNG, making it ideal for improving website performance while reducing their ecological footprint.

Its ecological benefits.

Bandwidth Reduction: By decreasing image sizes, WebP contributes to more efficient bandwidth usage, thereby reducing energy demand from servers and networks.

Faster Page Loading: Websites using WebP images tend to load faster, enhancing user experience while consuming less energy.

What is WebP Compatibility on Browsers?

While WebP offers undeniable ecological advantages, its universal adoption is hindered by compatibility issues. To date, WebP support varies across browsers and operating systems.

✅Full Support:

Google Chrome : Fully compatible for a long time due to its origin at Google.

Opera : Full compatibility, following Google Chrome’s trend.

Microsoft Edge : Full support since the migration to Chromium.

☑️Partial Support:

Firefox : Partial support with recent versions, but not yet universal.

Safari : Support is under development but not yet integrated into all versions. Note that from versions 14 to 15.6, it is fully supported but requires macOS 11 Big Sur. Below version 14, or from 14 to 15.6 without macOS 11 Big Sur, the WebP format is not supported.

❌No Support:

Internet Explorer : No support, but given Microsoft’s end of support for it, this is not surprising.

Operating Systems:

Older operating systems may not offer native WebP support.

☑️Windows: WebP is supported on newer Windows versions, but compatibility may vary.

☑️macOS: Newer macOS versions support WebP, but older versions may require updates.

☑️Linux: WebP support depends on the desktop manager and browser used.

What is WebP Compatibility on Smartphones?

What percentage of iphones are incompatible with webp.

Compatibility issues start from iOS 14 (see list below).

There are 2 billion active devices (iPhones, Macs, iPads, Apple Watches) worldwide, including 1 billion iPhones.

Around 30% of smartphones in circulation worldwide are iPhones in 2023.

Thanks to efficient update deployment at Apple, the vast majority of smartphones are compatible (64% considering only the categories represented below, i.e., from iOS 16.4 onwards).

The goal is to determine the number of iPhones that are not WebP compatible, those on iOS 14 or older.

This first Statista graph shows that the percentage of iPhones with an iOS version below 16.4 is 36.23%. Figures from 2024.

iOS Version and their Usage Percentage Worldwide in 2023. Source: Statista

Source: Statista

In this second graph, Apple stated that 11% of remaining devices running versions earlier than iOS 16 include devices running on iOS 15 and iOS 14. 18% on iPad. Figures from 02/04/2024.

iOS Version and their Usage Percentage Worldwide in 2023. Source: Apple Developer

Source: developer.apple.com

In this last graph, according to Telemetrydeck, the share of devices with iOS equal to or less than 14 would represent 0.10% of versions still in use to this day. Figures from December 2023.

iOS Version and their Usage Percentage Worldwide in December 2023. Source: Telemetrydeck

Source: telemetrydeck.com

For the following, we will use this 0.10% percentage of iPhones that are not WebP compatible.

What Percentage of Android Phones are Incompatible with WebP?

WebP is fully supported on 4.4-111, partially supported on 4.1-4, and not supported on versions 2.1-3 of the Android browser. Compatibility issues arise below Android 4.4 KitKat (see list below). Android 4.4 KitKat, the last compatible Android version, accounted for 0.50% of the Android market share in 2023 according to Frandroid’s study.

There are slightly over 6 billion active Android devices.

Around 70% of smartphones in circulation worldwide are Android devices in 2023.

Below, there is a graph indicating the most used versions of Google’s mobile OS, with Android 11 R leading the pack.

The goal is to determine the number of Android smartphones that are not WebP compatible, those on 4.1-4 or older.

In the following graph, the small light green portion, Android 4.4 KitKat represents 0.5% of active Android smartphones in the market in May 2023.

Android Fragmentation in May 2023, source: Frandroid

Source: Frandroid

For the following, we will use this 0.50% percentage of Android devices that are not WebP compatible.

Which Smartphones are Specifically Affected?

Smartphones affected by compatibility issues are listed below in a non-exhaustive manner:

In 2024, How Many Smartphones are Incompatible with WebP?

There are 8.59 billion smartphones in circulation worldwide according to Statista in 2022. Based on the figures mentioned earlier, 30% are iPhones and 70% are Android devices.

After a quick calculation, we arrive at a total of 2,577,000,000 iPhone devices in circulation and 6,013,000,000 Android devices.

Considering that 0.10% of iPhones in use are on an incompatible iOS version, this results in over 2 million incompatible iPhones (2,577,000 devices).

Considering that 0.50% of Android devices in the market are incompatible, this results in over 30 million incompatible Android devices (30,065,000 devices).

Over 32 Million Incompatible WebP Smartphones, …​ How to Use WebP While Keeping Content Accessible to Older Devices?

Although WebP is a promising eco-friendly image format, its universal adoption requires ongoing collaboration between developers, browsers, and operating systems. In the meantime, content creators must balance the ecological benefits of WebP with the need to ensure a consistent user experience across all devices and browsers. Using WebP in the current context deprives a certain number of users of access to content , and partially encourages hardware renewal , which, it is worth noting, is the largest contributor to digital pollution.

One possible solution to address this compatibility issue requires a bit of code.

First, offer another format (jpg, png, or gif) for the images you have.

Then, use the HTML <picture> tag, which will replace the traditional <img> tag.

This tag allows listing the formats available to the browser for a single image.

Thus, the browser will display the image it can use (WebP as a priority).

Here is what it could look like:

As you can see, this solution is quite simple to implement.

In 2024, we see that WebP compatibility is increasing! Smartphones below iOS 14 and Android 4 versions will not be compatible, yet they represent over 32 million smartphones (32,642,000), or 0.38% of smartphones in circulation .

One can also play with the code to initially offer two formats, to not leave any devices behind, and eventually transition to using only WebP. The simplest solution would still be for WebP to be compatible with all browsers, thanks to increasing longevity in updates across different systems, and we may achieve that over time.

iOSref for information on iOS versions and compatible devices

Statista: figures on different smartphone operating systems

Counterpointresearch: figures on smartphones in circulation

Mac4ever: information on Apple

Blog Du Modérateur: Apple figures

Lambdatest: for browser version compatibility/WebP

Enterprise apps today: Android figures

telemetrydeck.com: iOS versions still in use

In the meantime, you can decarbonize your website, and we will make your images more suitable (sizes/resolutions/formats) for your site, so that it pollutes less! Request a Free Webvert Diagnostic

PSA: You can try Safari 18 beta on your Mac without installing macOS Sequoia

Avatar for Filipe Espósito

Safari is one of the many Apple apps bundled with iOS and macOS. With iOS 18 and macOS Sequoia, Apple has introduced Safari 18 with new features and improvements. However, when it comes to the Mac, you don’t need to update your Mac to macOS 15 in order to try out the new Safari 18 beta.

Safari 18 beta

The new version of Safari comes with Highlights, a new way to quickly find relevant information (such as an address or phone number) on a webpage. It also introduces a redesigned Reader that summarizes webpage content using AI. There are a lot of improvements in the backend too.

While features like Highlights will likely remain exclusive to iOS 18 and macOS Sequoia, the beta version of Safari 18 for previous versions of macOS brings many of the backend improvements.

This includes better support for accessibility features, new options for using Apple Pay on the web, support for the WebAuthn PRF extension, compatibility with new CSS and JavaScript features, and much more.

Anyone with a Mac running macOS Sonoma or macOS Ventura can download Safari 18 beta from the Apple Beta Software website . It’s worth noting that installing Safari beta on your Mac replaces the main Safari rather than keeping both versions, so don’t do this if you rely on Safari for your work.

For now, iOS 18 and macOS Sequoia are still available as beta previews for developers. A public beta will be released this month, while the official launch is scheduled for this fall. You can find the Safari 18 beta release notes here .

  • How to create a macOS Sequoia USB installer [Video]
  • macOS Sequoia brings Headphone Accommodations feature to the Mac
  • macOS Sequoia brings an unexpected update to Apple’s Chess game
  • macOS Sequoia eases storage requirements for downloading Mac App Store apps
  • Developers can now create larger apps and games for iOS 18 and tvOS 18

FTC: We use income earning auto affiliate links. More.

Check out 9to5Mac on YouTube for more Apple news:

macOS

Filipe Espósito is a Brazilian tech Journalist who started covering Apple news on iHelp BR with some exclusive scoops — including the reveal of the new Apple Watch Series 5 models in titanium and ceramic. He joined 9to5Mac to share even more tech news around the world.

IMAGES

  1. Browser Compatibility of webp on Safari Browsers

    webp compatibility safari

  2. WebP Not Working In Safari: 3 Ways To Easily Fix It

    webp compatibility safari

  3. WebP Safari

    webp compatibility safari

  4. webP Support Safari on macOS Mojave

    webp compatibility safari

  5. Top 6 Safari Browser Compatibility Issues To Consider In 2024

    webp compatibility safari

  6. Apple's Safari 14 Now Supports Google's WebP Images

    webp compatibility safari

VIDEO

  1. Safari karte waqt mila Chandi ka sikka😱 #comedy #funny

  2. How do I use WhatsApp Web on safari?

  3. Configure ZAP and Burp Proxy Settings for Webgoat (Pen-test Setups)

  4. Webpack 5.3 Внешние библиотеки

  5. ✨💞 Metal Alloy Key Cover for Nexon 💞✨ #keycept #shorts #nexon

  6. HD Benchmark: Safari Webkit

COMMENTS

  1. WebP image format

    Widely available across major browsers. Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

  2. How to add webp support in Safari browser

    The webp format is not supported by Safari as of today, and I'm not sure if it is planned for implementation in the near future. But you can give the browser a choice whether to use webp or jpg like so. <picture> <source srcset=" /uploads/img_small.webp 1x, /uploads/img_big.webp 2x" type="image/webp"> <source srcset=" /uploads/img_small.jpg 1x ...

  3. Apple Adds WebP Image Support in Safari 14

    Monday June 22, 2020 1:35 PM PDT by MacRumors Staff. During today's WWDC Keynote, Apple showed off the latest version of macOS Safari that will ship with iOS 14 and macOS 11 Big Sur. In the ...

  4. Frequently Asked Questions

    WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and ...

  5. Apple adds WebP, HDR support, and more to Safari with iOS 14 ...

    There's also support for Google's WebP image format in Safari 14, which enables images with transparency and lower compression but also keeping files smaller. With iOS 14 and macOS Big Sur ...

  6. WebP Image Support Coming To IOS 14

    But there's one little line in the Safari 14 Beta release notes that caught my eye: Added WebP image support. This excites me because WebP is a super progressive format that encodes images in lossless and lossy formats that we get with other image formats we already use, like JPEG, but at a fraction of the file size.

  7. WebP Image Format

    Partial support refers to not supporting animated WebP images. Safari 14.0 - 15.6 has full support of WebP, but requires macOS 11 Big Sur or later. Bugs. WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

  8. Browser Compatibility of webp on Safari Browsers

    About Safari. Safari is a popular web browser developed and maintained by the Apple Inc., and available for macOS, iOS, and iPadOS. It succeeded Internet Explorer for Mac as the default web browser for Macintosh computers. Yup, you got that right! Earlier macOS used to have Internet Explorer, but Safari changed that.

  9. Using WebP Format in Safari Browsers

    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 ...

  10. What Are WebP Images? WebP Image Format Explained

    WebP Compatibility. WebP compatibility with web browsers has increased, but it's still not universal. While most browsers have gradually added support, Internet Explorer and Safari are still holdouts (Safari support is partial). Here's a WebP image. If you can see it here, the web browser or app you're currently using can display WebP images.

  11. webP Support Safari on macOS Mojave

    Right, most modern web browsers show webP files, except Safari. I am looking for native webP/webM support in Safari and macOS Mojave Safari. Apple already implemented webP/webM support to Safari for iOS and macOS Big Sur. I do not want to convert images. I would like to view website. Right. Update your software, the current is macOS 11.5.1

  12. WebP Not Working In Safari: 3 Ways To Easily Fix It

    The file format is supported by major browsers but ensure you are using the latest versions to avoid compatibility issues. WebP works in some Safari browser versions but if you encounter problems, this article will help you address the issue. ... WebP works on Safari 14 version so if you are having a problem, it's probably because Apple hasn ...

  13. "webp"

    WebP image format. Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

  14. Browser Compatibility of WebP image format

    Note: WebP image format shows a browser compatibility score of 92. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support.

  15. Can I in 2023 finally start using webp images without a fallback?

    Safari doesn't auto-update like other browsers do, and in this case Safari also has a minimum OS version for webp to be supported. ... There's no way to ensure compatibility with all browsers. For webp, 95% coverage is pretty extensive, and only IE is the main browser that you might be worried about.

  16. Image file type and format guide

    The PNG (pronounced " ping ") image format uses lossless compression, while supporting higher color depths than GIF and being more efficient, as well as featuring full alpha transparency support. PNG is widely supported, with all major browsers offering full support for its features. MIME type. image/png.

  17. WebP format support with backward compatibility (support in IE, Safari)

    I am using Dianoga module (Thanks to Kam Figy) to optimize the images. At present looking to enable WebP format with backward compatibility (serving default image format for un-supported browsers). Latest Dianoga version supports WebP format (Thanks to Anton). Everything works fine after following the steps in the documentation.. Issue: If first request comes from WebP supported browser, then ...

  18. WebP: Usage, Compatibility... Do You Really Need to Convert Everything

    WebP is fully supported on 4.4-111, partially supported on 4.1-4, and not supported on versions 2.1-3 of the Android browser. Compatibility issues arise below Android 4.4 KitKat (see list below).

  19. Webp and Safari Compatibility

    I've used only webp images all over my website. I googled and found out that Safari started supported webp from September, so I didn't worry. But now, I noticed that Safari users can't see any images on my site. If you're a Safari browser user, please check if you can see any Image Here. What should I do to solve this problem?

  20. Detect if browser supports WebP format? (server side)

    Today, you should check the accept header for image/webp.All browsers which support WebP will send this as part of their accept string for all requests (images and non-images).

  21. PSA: You can try Safari 18 beta on Mac without macOS Sequoia

    Safari is one of the many Apple apps bundled with iOS and macOS. With iOS 18 and macOS Sequoia, Apple has introduced Safari 18 with new features and improvements. ... compatibility with new CSS ...