"Serve images in next-gen formats" currently useless

[hkampen]

Page Affected: https://developers.google.com/web/TODO

What needs to be done?

http://httparchive.webpagetest.org/lighthouse.php Section "Serve images in next-gen formats"

Since lighthouse is used by Google Search Console to alert page performance, mostly unsupported file formats are not helpful to be part of the test. It cost useless resources in the companies.

[mkkeck]

Page Affected: https://developers.google.com/web/tools/lighthouse/audits/webp

What needs to be done?

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

Why should I use next-gen formats for images, with terrible support? This does not make sense. Other point: is Photoshop able to generate such next-gen formats (sorry in my version I've not found)? This audit is really useless until better support! And of course every manufacturer cooks his own soup again!

[myakura]

At least WebP is gaining support in multiple browsers; Support has been added to the Microsoft Edge in Windows 10 October update (1809) and is coming to Firefox as well in Firefox 65 (ships in January 2019).

And since Chrome is dominating the browser market (at least on desktop), chances are high that the visitors/customers to your sites use Chrome. If your sites is large enough, serving WebP will worth the cost.

[mkkeck]

@myakura: Of course Chrome is dominating, but there some other "mainly used" browsers. I do not only develope in and for Chrome. And the mobile market is dominated by Apple Safari too. And of course many older mobile devices aren't supporting next-gen image types, but these are relevant for our buisiness too. Nobody will get a new smartphone only for new web-features or next-gen image types.

So why should I use next-gen image types, where support is terrible?

[myakura]

I do not only develope in and for Chrome. And the mobile market is dominated by Apple Safari too. And of course many older mobile devices aren't supporting next-gen image types, but these are relevant for our buisiness too.

I don't develop for particular browsers, too. But if serving some next-gen formats will save bandwidth to many visitors, I do think its worth considering. Yeah, serving multiple copy of images is painful, I have done it and I think so. But if doing so will cut the bytes for many people, that painful effort worth it.

So why should I use next-gen image types, where support is terrible?

If you look at the number of browsers when you count "support" it might be terrible. Since you look at Can I use, try loading your Google Analytics data and then looking at the "usage relative" chart. You may see the majority of visitors use next-gen-capable browsers. If there's not much usage for you, it is (sadly) useless.

[englishextra]

@myakura

Chrome is not dominating. Even devs use Firefox foremost (at least that I had came across), because it's more comfortable than Chrome, and yes Chrome is the second obligatory to test with. Lots of businesses and home users like housewifes and children use Edge/IE11

Should you contradict that?

As said above this test for next-gen images have nothing to do with performance but with promotion.

[groovenectar]

At best, this should be a warning.

Google itself does not even adhere to this nonsense: https://www.google.com/about/ This page serves JPEGs (at the time of this writing).

Users are starting to find tools like PageSpeed themselves, and complain to their developers about things that are not even necessarily reasonable at all. The existence of the PageSpeed tool, with it being so quirky, has definitely been annoying.

It would be nice if they were finding and using a better tool, but it's not likely to happen when they are using Google to find it in the first place.

[AlekseyKorzun]

Chiming in here. The performance test is biased and is a giant waste of time. Agreed with all the comments on this topic.

[SalimDigitalMarketing]

How we can compress image for shopify sites

[khalwat]

Users are starting to find tools like PageSpeed themselves, and complain to their developers about things that are not even necessarily reasonable at all. The existence of the PageSpeed tool, with it being so quirky, has definitely been annoying

I think it is GOOD that end users/clients are starting to become aware of web performance. We all benefit in so many ways by a more performant website.

Like it or not, PageSpeed results are a ranking signal (one of many), and for as long as this is the case, it's something to pay attention to.

As for the "next generation formats" discussion, webp is support in Edge, FireFox, Chrome, Opera, Android, UC Browser, and a bunch of others, so it's not just Chrome users that benefit from its implementation.

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

Additionally, you can add support for .webp in a progressive way, without having to use any JavaScript, Polyfills, or feature detection. You can use the HTML5 started <picture> element along with multiple <source>s -- the browser will pick the right one, and ignore the others.

Examples of how to do that can be found here: https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern#use-lt-picture-gt-instead

[englishextra]

@khalwat gosh why would you write this

[groovenectar]

I think it is GOOD that end users/clients are starting to become aware of web performance. We all benefit in so many ways by a more performant website.

Yes, that's good.

[wopian]

JPEG 2000 and JPEG XR in this audit should probably be replaced by JPEG XL once the standardisation has been finalised. It's backwards compatible with JPEG and a combination of the open source FUIF (successor of FLIF) image format and Google's PIK image format.

JPEG 2000 is only supported in Safari and JPEG XR is no longer supported in any modern browser.

https://bugzilla.mozilla.org/show_bug.cgi?id=1539075 https://bugs.chromium.org/p/chromium/issues/detail?id=1056172 https://bugs.webkit.org/show_bug.cgi?id=208235

Try online: https://libwebpjs.appspot.com/jpegxl/

Info: https://jpeg.org/jpegxl/ (spec) https://gitlab.com/wg1/jpeg-xl (reference implementation) https://www.slideshare.net/cloudinarymarketing/imagecon-2019-jen-looper

[jeffmcmahan]

+1 for dropping the nextgen images stuff that no one anywhere follows.

[whyboris]

WebP is almost there: https://caniuse.com/?search=webp

As of September 15th, Safari support is finally there with version 14 (limited to OS 11 or later). But that means we have at least a half year before majority of users are using it. IE 11 still has a large user share and it does not support WebP

I spent several hours upgrading my website to WebP as per Lighthouse recommendation only to later discover I can't use the format yet. Though I look forward to WebP being more supported - as it cut down the image sizes by 50% for me on average.

[mchl18]

I believe it would make sense for Lighthouse to then point to WebP first as there is reasonable support. As we can see, formats such as jpeg200 has barely any support and I really wonder if this will ever become the case.