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.

  • 4 - 5 : Not supported
  • 6 - 8 : Not supported (but has polyfill available)
  • 9 - 22 : Partial support
  • 23 - 31 : Partial support
  • 32 - 123 : Supported
  • 124 : Supported
  • 125 - 127 : Supported
  • 12 - 17 : Not supported
  • 18 - 123 : Supported
  • 3.1 - 13.1 : Not supported
  • 14 - 15.6 : Partial support
  • 16.0 - 17.3 : Supported
  • 17.4 : Supported
  • 17.5 - TP : Supported
  • 2 - 3.6 : Not supported
  • 4 - 64 : Not supported (but has polyfill available)
  • 65 - 124 : Supported
  • 125 : Supported
  • 126 - 128 : Supported
  • 9 - 10.5 : Not supported
  • 10.6 - 11 : Not supported (but has polyfill available)
  • 11.1 - 11.6 : Partial support
  • 12 - 18 : Partial support
  • 19 - 108 : Supported
  • 109 : Supported
  • 5.5 - 10 : Not supported
  • 11 : Not supported

Chrome for Android

Safari on ios.

  • 3.2 - 13.7 : Not supported
  • 14 - 17.3 : Supported
  • 17.5 : Supported

Samsung Internet

  • 4 - 23 : Supported
  • 24 : Supported
  • all : Supported

Opera Mobile

  • 10 : Not supported
  • 11 : Partial support
  • 11.1 - 12.1 : Supported
  • 80 : Supported

UC Browser for Android

  • 15.5 : Supported

Android Browser

  • 2.1 - 3 : Not supported
  • 4 - 4.1 : Partial support
  • 4.2 - 4.4.4 : Supported

Firefox for Android

  • 14.9 : Supported

Baidu Browser

  • 13.52 : Supported

KaiOS Browser

  • 2.5 : Not supported (but has polyfill available)
  • 3 : Supported
  • 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

ipad pro 2022

Apple Event Rumors: iPad Pro With M4 Chip and New Apple Pencil With Haptic Feedback

apple id account

Apple ID Accounts Logging Out Users and Requiring Password Reset

iOS 18 General Notes Feature 2

iOS 18 Rumored to 'Overhaul' Notes, Mail, Photos, and Fitness Apps

iOS 18 Siri Integrated Feature

iOS 18 Rumored to Add These 10 New Features to Your iPhone

top stories 27apr2024

Top Stories: Apple Announces 'Let Loose' Event With New iPads and More Expected

maxresdefault

The MacRumors Show: Apple's iPad Event Finally Announced!

Next article.

tiktok logo

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

ios 17 4 sidebar square

App Store changes for the EU, new emoji, Podcasts transcripts, 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.

ipad pro 2022 blue square

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

ipad air 12 9 square

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

wwdc 2024 upcoming square

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

ios 18 upcoming square

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

ipados 17

8 hours ago by Tim Hardwick

Apple Event Let Loose Pastel Blellow

4 days ago by Tim Hardwick

iPad Air 12

5 days ago by Joe Rossignol

General Apps Reddit Feature

5 days ago by MacRumors Staff

iOS 18 Siri Integrated Feature

6 days ago by Joe Rossignol

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.

DEV Community

DEV Community

Ben Halpern

Posted on Jun 24, 2020

Safari 14 ships webp support. Are we nearing the end of PNG on the web?

One thing that really stood out to me in the Safari 14 Release Notes was support for webp.

webp is a much more compact image format than PNG, but it offers a lot of the features we need from PNG such as transparency. Webp also has animation support, and is all around a much more advanced image format for the web than some of its predecessors. Safari was very slow to the game.

In most cases webp is also a better option than jpeg. Progressive jpeg, which offers more pleasant rendering options, may still be the right choice in some cases, but in general we may be done with the need to serve different formats to different browsers.

DEV renders webp to Chrome and Firefox, but not to Safari. We save terabytes of expensive bandwidth this way, but the complexity required to render different formats is something we'd be happy to do away with. So I am very happy about this.

Happy coding ❤️

Top comments (31)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

ben profile image

  • Email [email protected]
  • Location NY
  • Education Mount Allison University
  • Pronouns He/him
  • Work Co-founder at Forem
  • Joined Dec 27, 2015

Safari catching up here makes it that much less appealing to continue supporting IE.

sharadcodes profile image

  • Email [email protected]
  • Location India
  • Work Full Stack Developer (Part time) at Shriram Yoga Training & Research Society
  • Joined Dec 5, 2019

Add animation to comment likes as well 🤣.

@pp will have some comment updates coming soon enough 😊

pp profile image

  • Location Poland
  • Work Product Designer at Forem (DEV)
  • Joined Oct 25, 2019

andypiper profile image

  • Location Kingston upon Thames, London, UK
  • Education Modern History, Brasenose College, Oxford
  • Pronouns he/they
  • Work Freelance consultant; DevRel at Mastodon gGmbH; open to opportunities.
  • Joined Dec 30, 2017

I'm impressed you're still doing that. Isn't MS pushing Chromium-based Edge to basically everyone, now - capable of running it, that is...

downey profile image

  • Location Colorado
  • Education Indiana University && Georgia Tech
  • Work Software Engineer
  • Joined May 22, 2019
We save terabytes of expensive bandwidth this way, but the complexity required to render different formats is something we'd be happy to do away with.

On one hand I'm sure that practically everyone who uses this site is using a modern browser that will support webp images and in practice no one (or very few people) will be impacted. But on the other hand it feels like only providing webp images may leave some folks behind. From a digital preservation standpoint providing jpegs just feels good cause it's like so unlikely to ever go obsolete as a format. Ancient computers support it and you can pretty much guarantee future ones will continue to support it.

Like I think there's a reason archives still default to JPEG .

Like I said, probably doesn't matter for Dev and it's user base, but it's interesting to think about from a digital preservation standpoint IMO. 😅

That's a very good point! Thanks for bringing this to the discussion.

henrihelvetica profile image

  • Location yyz
  • Work Lead, Dev Comms. Catchpoint/WebPageTest™
  • Joined Apr 21, 2017

If you're talking about ppl from emerging markets being left behind - I certainly do understand, and a great point. But would you believe that the 1st browser to support webp outside of Chrome 10 yrs ago, was Opera ? The renown client of choice for emerging markets and have been in full support long before everyone else. So the very ppl you might consider being left behind were likely concerned we were left behind - since major browsers only came aboard in late 2018 - now. 🙃

jesuscrow profile image

  • Location Kaunas, Lithuania
  • Joined Sep 27, 2018

Using lossy image format for preservation?

It's less about perfectly preserving the quality of the original and more about ensuring that the data remains decipherable.

Like if you're archiving something that contains charts, a pixel perfect image of the chart is no good if your device can't read the file format. But if it's a JPEG chances are you can still render and understand what it has despite any lossiness.

dfockler profile image

  • Location Portland, OR!
  • Education Computer Science Degree
  • Work Application Developer at Corista
  • Joined Oct 5, 2017

This one kind of depends on how the tooling for handling images changes. I haven't used many of them, but they will need to work seamlessly with webp files so that users can create, view, and export them easily. Until then I think PNG will stick around.

zenulabidin profile image

  • Location Addis Ababa, Ethiopia
  • Education Self-taught
  • Work Junior Backend Engineer at ChainWorks Industries
  • Joined Nov 30, 2019

It really depends on the image quality of WebP.

JPG is much more compressed than PNG so artifacts and blurriness in pictures is much bigger on JPG than on PNG, when you view the pictures at full size. If WebP has the same quality as PNG then I think it will be very beneficial for everyone to at least offer WebP as a fallback image option, because let's face it, you can't really extinguish PNG. Just look at how enduring the GIF format is for proof.

Similar to how Youtube offers WebM/VP9 videos for browsers along with MP4 in case a browser doesn't support one of them, although in this case we will see more of "Offer WebP first, if that fails, then fall back to PNG".

zilti_500 profile image

  • Location Berlin
  • Work CTO at Sompani
  • Joined Feb 29, 2020

Seriously? WebP support now , just as we see AVIF on the horizon? WebP is pretty crappy...

Yeah, this is only great news because expectations for Apple are so low. If they'd introduced this years ago along with the other browsers, we'd already be talking about the next formats.

I mean, I know Safari tends to move at their own pace, but the idea that Safari was grossly late on this? FF support came in 65 (jan 19), Edge (late fall 18). There has been very competent fall back long before that. So in 2 yrs, all the major browser venders (Edge, FF + Safari) outside of Chrome provided support. Considering we've been using JPEGs for almost 30 yrs, I think 2 yrs for webp support is pretty quick.

ankitbeniwal profile image

  • Email [email protected]
  • Education Master of Computer Applications
  • Work Product Manager
  • Joined Oct 13, 2019

i was wondering why WebP is crappy? Can you please elaborate about it?

also wondering why webp is crappy.

saint4eva profile image

  • Joined Dec 16, 2017

Are there people who still use safari?

iPhone is still the most popular smartphone. Safari desktop isn't getting you very far but iPhone is still big.

I thought Samsung & Huawei and Android are the most popular? Notwithstanding, iPhone is still big. Thanks

I thought Samsung & Huawei and Android are the most popular? Notwithstanding, iPhone is still big.

twwilliams profile image

  • Location Helena, Montana, United States
  • Work Full Stack Developer
  • Joined Dec 3, 2017

Web stats on the sites we run show that mobile Safari is the biggest browser in use, well ahead of all versions of Chrome combined (desktop + Android) which is the second most popular.

So regardless of market share, we see a lot more traffic and users on mobile Safari.

ha. tons. 🙋🏾‍♂️. Safari has a pretty significant mobile presence. An Etsy engineer was just tweeting about this.

xowap profile image

  • Location Madrid
  • Education Telecommunications Engineer
  • Work CTO at WITH Madrid
  • Joined Feb 16, 2017

I would definitely not target PNG as the first victim, JPEG is outdated and needs to die. Give it another 10 years :)

alangdm profile image

  • Location Japan
  • Work Front-end Developer at LINE Corporation
  • Joined Aug 10, 2018

For me this was amazing news, especially on animations, animated webp are remarkably smaller than apng

anjanesh profile image

  • Email [email protected]
  • Location Navi Mumbai
  • Work Web Developer at Applied Data Finance
  • Joined Jul 1, 2019

How do I get Safari 14 on macOS Mojave ?

maybe if you download STP ( safari tech preview ) and it might be behind a flag. I would check w/ webkit.org. Otherwise, if you will have to download big sur if you want support.

safari not support webp

  • Location City of Bath, UK 🇬🇧
  • Education 10 plus years* active enterprise development experience and a Fine art degree 🎨
  • Work Web Development Consultant at ForgeRock
  • Joined Aug 21, 2018

What was apples format called again?

mubardauda profile image

  • Email [email protected]
  • Location Nigeria
  • Education Undergraduate
  • Pronouns He/Him
  • Work Power BI Developer & Business Intelligence Analyst
  • Joined Jun 20, 2020

Thank you sir

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

thepracticaldev profile image

How Do You (Unconventionally) Use ChatGPT?

dev.to staff - Apr 30

salmandotweb profile image

From Idea to MVP in Just 20 Days

Muhammad Salman - Apr 29

jenesh profile image

Vite vs Nextjs: Which one is right for you?

Jenesh Napit - Apr 29

brainvault_tech profile image

Introducing VASA 1: Microsoft's Cutting-Edge AI Model

Brainvault Technologies - Apr 29

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

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.

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

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

rigin

Safari not supporting images with webp format

Safari browser is not support WebP format, is there any reason for the same?

WebP was added to Firefox for desktop and Android, but it will not work in iOS. This is because Firefox for iOS works on Safari's WebKit engine.

Is there any way we can sort the issue

Posted on Jan 9, 2019 12:27 AM

Eric Root

Posted on Jan 12, 2019 12:46 PM

If you want to, you can send Apple feedback. They won't answer, but at least will know there is a problem or a suggestion for change. If enough people send feedback, it may get the problem/suggested change solved sooner.

Click here to send Feedback

Similar questions

  • HTML5 When will make Safari able to support HTML5 ? I currently have to use Chrome & others to support HTML5! I play games on Farmtown and they are currently working to make it fully supported. You would think Apple would work on this since Adobe did away FLASH. I even have issues with Wells Fargo Stocks. I don't have any issues if I use Chrome! Thanks' Vincent VJOCO 170 3
  • Can we use Safari on windows? {if yes, then how to download and insrall it}, {if no, then what is the best way for a developer to test that its web is going well on safari?} {if yes, then how to download and insrall it}, {if no, then what is the best way for a developer to test that its web is going well on safari?} 242 2
  • Image display problem with safari I am using safari. I am facing a problem with displaying some images on my website.  Can anyone suggest the solution please?. 465 1

Loading page content

Page content loaded

Jan 12, 2019 12:46 PM in response to Slapbox

Jan 12, 2019 11:57 AM in response to rigin

I really hope the Safari team decides to change this. Some developers are moving ahead with WebP without a fallback option since even Firefox supports it now. Safari and iPhone users are going to be left behind in 2019 if Apple doesn't make some changes.

TLP7

Jan 25, 2019 1:28 PM in response to ShadowDust99

The problem is not that Safari does not support WebP, it's that it fails to use the fallback image, or send bad hints to the server.

ShadowDust99

Jan 9, 2019 12:30 AM in response to rigin

WebP was designed by Google for use in Google Chrome. Unfortunately, WebP is not supported in Apple's Safari web browser.

Hanterdro

Jan 29, 2019 6:57 AM in response to rigin

@ShadowDust99

Yes, that must be the reason why every other relevant Web Browser supports (or will soon support) WebP and Safari not *facepalm*...

https://caniuse.com/#search=WebP

Find answers, guides, and tutorials to supercharge your content delivery.

  • Getting Started
  • Account Management
  • Troubleshooting

The State of WebP Browser Support

On September 30, 2010, Google released an open source image format called WebP. Fast-forward to today, most browsers widely support it. It has had many improvements to the library code base and is used by some as an entire replacement for PNG and JPEG images. WebP achieves a 26 percent better lossless compression ratio than PNG and a better lossy ratio, which ranges between 25 percent and 34 percent than JPEG. Furthermore, WebP supports transparency without increasing the file size by more than 22 percent.

WebP browser support

According to caniuse , 96.3% of browsers currently support the WebP image format. That would include Chrome, Firefox, and Edge. The WebP image format is not supported only by Internet Explorer 11 and the KaiOS browser. However, both browsers account for just 0.577% of the market share.

Although not all browsers support the WebP image format, it's important to note that, if set up properly, your website's images won't appear broken for these browsers. Rather, unsupported browsers will be delivered the default image format, like PNG or JPEG, but only if you are using an appropriate WebP integration solution. It's also important to note which browser has the greatest market share ( Chrome ) and what percentage of your website visitors are using a WebP supported browser. Reviewing this information should help you better decide whether it will be advantageous to convert to WebP images.

Although the list above shows which browsers currently natively support WebP, it's also worth mentioning that other browsers can also display WebP images by using an "add-on" of sorts. For example, if your browser supports WebM you can use a JavaScript shim such as Weppy to display the WebP images.

Over the last decade WebP has made significant improvements and now the most used browsers nearly all support the WebP image format. This is a great accomplishment because now more users can benefit from the advantages that WebP certainly offers over PNG and JPEG. Many large companies like eBay and Facebook are actively using this image format to help save bandwidth thanks to the compression improvements. Additionally, the support for WebP is growing beyond that of just web browsers as more and more CMSs and platforms are providing users with methods of delivering WebP formatted images.

As WebP is able to cut down on image sizes, this format makes it very attractive to website owners who want to reduce both the cost of their bandwidth and increase visitor satisfaction. Read our WebP Support article for a complete breakdown of WebP support availability.

WebP Support

WebP is Google's alternative smaller image format to that of PNG or JPEG. There has been a lot of confusion lately over WebP support and just exactly what you can and cannot use it with, such as browser and CMS support. Today we want to clear up any…

How WebP Compression Works

We've talked a lot about WebP and how it's beneficial for improving load times by reducing image sizes without sacrificing quality. However, we haven't yet gone into detail about how WebP compression actually works. There are various techniques at…

WebP Converter - Online File Conversion

Google's WebP image format, particularly lossless WebP, can a be a great solution when it comes to dramatically decreasing the size of your images, while still retaining the quality. We saw an 85% decrease in image size when converting from JPG to…

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Apple adds WebM video playback support to Safari with macOS Big Sur 11.3

Avatar for Filipe Espósito

9to5Mac reported that Apple is now letting developers create extensions that modify some of the default Safari tabs with macOS Big Sur 11.3 beta, and it seems there’s more to come. With the release of macOS Big Sur 11.3 beta 2 this week, Safari can finally play WebM videos.

As noted by The 8-Bit , WebM video compatibility has been added to Safari with macOS Big Sur 11.3 beta 2. For those unfamiliar with the format, WebM is a royalty-free video codec created by Google in 2010 — similar to the WebP image format, also developed by Google.

Although nearly all current web browsers support WebP video, Apple has never added WebP support to Safari. Back in 2010, Steve Jobs argued that the WebM format was “a mess” and that Apple had no plans to adopt the codec. The company has always given preference to H.264 and H.265 codecs, which are not royalty-free but are widely used by popular streaming services .

If you’re running macOS Big Sur 11.3 beta 2 on your Mac, you can try playing a WebM video by going to the WebM Project website , which has a demonstration video available there.

Prior to that, Apple also added support for the WebP image format to Safari with macOS Big Sur, not to mention support for VP9 videos — which enabled 4K HDR videos on websites like YouTube and Netflix. Safari also gained other important features with Big Sur, including a built-in translator and more privacy controls.

macOS Big Sur 11.3 beta is currently available for developers and users registered in the Apple Beta Software Program. Apple hasn’t announced when the update will be available to the public.

  • Safari on Mac will soon let you customize and override new window or tab page with extensions
  • macOS Big Sur: How to translate websites with Safari
  • Safari 14 is now available as a standalone update for macOS Catalina and Mojave users
  • Apple adds WebP, HDR support, and more to Safari with iOS 14 and macOS Big Sur

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

Check out 9to5Mac on YouTube for more Apple news:

Safari

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.

safari not support webp

Manage push notifications

safari not support webp

IMAGES

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

    safari not support webp

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

    safari not support webp

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

    safari not support webp

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

    safari not support webp

  5. webP Support Safari on macOS Mojave

    safari not support webp

  6. Webp Not Working In Safari

    safari not support webp

VIDEO

  1. Chaupai Sahib Path

  2. EVOLUTION OF NEW SUPER UPGRADED TITAN TV MAN VS ALL SKIBIDI TOILETS BOSSES! In Garry's Mod

  3. Live video proof of 88% Returns made in 30 Days!

  4. Long Distance Relationship

  5. Drupal Module: WebP Fallback image

  6. Fix Safari Download Stuff Not Showing In iPhone Gallery ✅

COMMENTS

  1. 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. ... The support for WebP image format is available in Safari 14, and it is not possible to support webp images in older Safari versions. You cannot just change the webp files to make them to work on incompatible ...

  2. Why safari do not support images of webp …

    Safari not supporting images with webp format Hi Safari browser is not support WebP format, is there any reason for the same? WebP was added to Firefox for desktop and Android, but it will not work in iOS. This is because Firefox for iOS works on Safari's WebKit engine. Is there any way we can sort the issue

  3. Dealing with Safari and .webp images in 2022

    How to use CSS to display webp images on Safari, which does not support this format natively? This question explores the possible solutions and trade-offs for web developers who want to optimize their image performance and quality in 2022. Learn from the answers and comments of other Stack Overflow users who faced the same challenge.

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

    WebP is a file format that uses lossy compression to reduce the size of images on the web. However, sometimes, you may experience issues with WebP not working on your Safari browser. The main benefit of using WebP over JPEG is that it can reduce file size without affecting image quality too much.

  5. 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. webP and webM is getting a wide spread standard which exist around 10 years. I do not want to convert images.

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

  7. Apple Adds WebP Image Support in Safari 14

    In the developer notes, Apple notes that it has added WebP image support for the first time in Safari. WebP is a newer image format developed by Google and announced in 2010. It provides lossy and ...

  8. Frequently Asked Questions

    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.

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

  10. WebP Images on Safari 14 not working

    Oddly, iOS Safari does properly display WebP images while macOS Safari does not (including Technology Preview v14.0.1). For example, on iOS, this image opens inline while on macOS it initiates a download. I haven't yet found an explanation as to why this is the case. Probably because of the server settings.

  11. Safari 15 does not show some webp images : r/MacOS

    I am using Safari 15 and some webp images are no longer showing up in the browser. I just get a blue boxed question mark. I have cleared the chache and reinstalled Safari but the issue is still there. ... Webp support is added in Safari 14. So far I can not Google any problem regarding to Safari 15 and Webp format except this post. Reply reply

  12. Safari 14 ships webp support. Are we nearing the end of PNG on the web

    webp is a much more compact image format than PNG, but it offers a lot of the features we need from PNG such as transparency. Webp also has animation support, and is all around a much more advanced image format for the web than some of its predecessors. Safari was very slow to the game. In most cases webp is also a better option than jpeg.

  13. Using WebP Format in Safari Browsers

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

  14. WebP

    In September 2020, WebP support was added in Safari version 14. The supporting libwebp library reached version 1.0 in April 2018. ... Discord and ElementIO, but as of 6 March 2024 the two latter ones only support static WebP, and not animated WebP. Restrictions. Like VP8 on which it is based, former lossy WebP supports only 8-bit YUV 4:2: ...

  15. Safari not supporting images with webp fo…

    Safari and iPhone users are going to be left behind in 2019 if Apple doesn't make some changes. The problem is not that Safari does not support WebP, it's that it fails to use the fallback image, or send bad hints to the server. Hey there! WebP was designed by Google for use in Google Chrome.

  16. Safari's still doesn't support WebP : r/programming

    Just implement webP and save the users the bandwidth. If Apple wants to win the image format war, they should invent a new better format instead of blocking the others. AFAIK Apple doesn't even support heic in Safari. Probably because they don't feel it's appropriate to support on the web unless all browsers do.

  17. The State of WebP Browser Support

    According to caniuse, 96.3% of browsers currently support the WebP image format. That would include Chrome, Firefox, and Edge. The WebP image format is not supported only by Internet Explorer 11 and the KaiOS browser. However, both browsers account for just 0.577% of the market share. Although not all browsers support the WebP image format, it ...

  18. Apple adds WebM video playback support to Safari with macOS ...

    Prior to that, Apple also added support for the WebP image format to Safari with macOS Big Sur, not to mention support for VP9 videos — which enabled 4K HDR videos on websites like YouTube and ...

  19. How to use webp images and support safari

    Since the majority of browsers supports WebP I think this solution is ideal. Browsers that don't support WebP will fall into the at-rule getting the JPG. Then they will read the next style that calls a WebP and since they don't support that feature they just will stick with the JPG. I'd like to know if you could try this in a safari browser.

  20. Safari 16 supports AVIF in macOS Ventura and iOS 16

    AVIF support in Safari 16, macOS Ventura, and iOS 16. AVIF is a next-gen image format that is poised to replace WebP. Chrome added support for AVIF in late 2020, and Firefox began supporting it in January 2021. WebKit added support for AVIF in April 2021, but Safari did not. While Safari is based on WebKit, it relies on the operating system to process images.

  21. WebP images doesn't display in safari although added polyfill

    The order of the images is strange, as it feels like you should put the older format after the .webp file. Anyway, this provides a fallback image for Safari and other lesser browsers to use. EDIT. The answer above works, but it's not a good solution as browsers just end up downloading both the images.