Home > Technical & Creative Skills > Programming, Servers & Scripts

WebP - A new image format for the Web (8)

03-05-2019 07:31 PM #1 samkerstein (Member)
WebP - A new image format for the Web

Hey folks,
I assume most of you aren't programmers so you're not up to date with the latest developments so I thought I might introduce you to the new and compact image format - WebP.

So what's WebP?
In short - a new Google proposed image format which provides smaller images size.
How smaller? According to Google, 26% smaller than PNG and 25-34% smaller than JPEG.

What does it mean for us? Faster web page loading! It'll speed up the time it takes our landers to load.
By how much? Approximately 30% faster - depending on usage and amount of images.

Coverage:
WebP is correctly supported across all the most popular browsers:

Browser Supported Min. version
IE No
Edge Yes 18
Chrome Yes 71
Firefox Yes 65
Safari No
Opera Yes 56

Some more good news:
In case WebP isn't supported by the user agent, the browser will fallback to the known and old </img> format

So how to use it?
Code:
<!-- before -->
<img src="/img/mountain.jpg" alt="Moutains view" />

<!-- after -->
<picture>
  <source type="image/webp" srcset="/img/mountain.webp" />
  <img src="/img/mountain.jpg" alt="Mountains view" />
</picture>
Note the <img> tag in the after section - it is necessary to supply it with the picture in the old format in case the browser doesn't support WebP yet.

And that's pretty much it! Hope this will help some of you.


Sources and further reading:
dev.to blog
google blog

If you have further questions feel free to ask

03-06-2019 02:59 AM #2 thedudeabides (Moderator)

Didn't realize it was around 30% - thats a good savings.

Bummer that safari doesn't support it.

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

Also Photoshop doesn't natively support that format, at least not with Photoshop CC on the cloud plan. Been trying to get the plugin found here: http://telegraphics.com.au/sw/produc...mat#webpformat working but no luck so far.

03-06-2019 10:54 AM #3 matuloo (Legendary Moderator)

I'm wondering whether the additional 30% saving actually matters in todays world of fast internet, especially when we're talking just about images. Coming up with a new more compressed video format, now that would be something as that's where most of the BW is burned now, at least I'd say so. What do you guys think?

03-06-2019 11:02 AM #4 stickupkid (Senior Moderator)

Quote Originally Posted by matuloo View Post
I'm wondering whether the additional 30% saving actually matters in todays world of fast internet, especially when we're talking just about images. Coming up with a new more compressed video format, now that would be something as that's where most of the BW is burned now, at least I'd say so. What do you guys think?
Will the saving not result in better quality pictures if the size reduced by 30%? Or am I wrong...

03-06-2019 12:48 PM #5 vortex (Senior Moderator)

For mobile devices, any savings in loading speed would help!

Especially when it comes to pop ads, for which quick loading is crucial.

Thanks @samkerstein for sharing!



Amy

03-06-2019 01:20 PM #6 matuloo (Legendary Moderator)

Quote Originally Posted by vortex View Post
For mobile devices, any savings in loading speed would help!

Especially when it comes to pop ads, for which quick loading is crucial.

Thanks @samkerstein for sharing!



Amy
Oh yes, this is a very valid point. Once in a while I wasn't thinking about a subject as an affiliate and I totally missed the point of the thread LOL

03-06-2019 05:47 PM #7 samkerstein (Member)

Quote Originally Posted by thedudeabides View Post
Didn't realize it was around 30% - thats a good savings.

Bummer that safari doesn't support it.

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

Also Photoshop doesn't natively support that format, at least not with Photoshop CC on the cloud plan. Been trying to get the plugin found here: http://telegraphics.com.au/sw/produc...mat#webpformat working but no luck so far.
It's still pretty new, it'll take time for everything to support it
There are plenty of tools already that convert to the webp format

Quote Originally Posted by stickupkid View Post
Will the saving not result in better quality pictures if the size reduced by 30%? Or am I wrong...
According to Google, it doesn't hurt the quality, my eyes are not professional enough to tell the difference

https://developers.google.com/speed/webp/faq - How can I judge WebP image quality for myself?
https://developers.google.com/speed/...ocs/webp_study
And here is another test by a guy not from Google
https://havecamerawilltravel.com/photographer/webp-website/
WebP offers some pretty dramatic savings in file size with relatively little reduction in image quality. Color me impressed.


Quote Originally Posted by matuloo View Post
Oh yes, this is a very valid point. Once in a while I wasn't thinking about a subject as an affiliate and I totally missed the point of the thread LOL

For general websites it might not help, I'm still new to AM and while learning pops this format instantly came to mind

Quote Originally Posted by vortex View Post
For mobile devices, any savings in loading speed would help!

Especially when it comes to pop ads, for which quick loading is crucial.

Thanks @samkerstein for sharing!



Amy
Sure thing!

Feel free to use this post and share any opinions you have om this new format!

03-08-2019 02:54 AM #8 erikgyepes (Moderator)

Thanks for sharing this information, especially the table with browsers support.

I've stumbled to this format a few times, I know Google uses it for their app logos in the Google Play Store.

But as @thedudeabides said, Photoshop doesn't support it so I always ended up using something like "webp to png" https://cloudconvert.com/webp-to-png

Home > Technical & Creative Skills > Programming, Servers & Scripts