CODEWITHSUNDEEP
imageperformanceoptimizationgoogle-pagespeed
tria
tria

Reputation: 33

Better image format than PNG? (for page speed)

Google speed test suggests me to switch my PNG background image in my landing page to a "next-gen format", based on the explanation:

"Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. "

Is it true? I didn't encounter the use of such formats in any websites I visit. Just to want to confirm.

Upvotes: 1

Views: 3001

Answers (2)

GrahamTheDev
GrahamTheDev

Reputation: 24835

Is it true?

Yes it is true.

A .png file is normally around 15-25% larger than a .jpg.

A .jpg file is normally around 25-30% larger than a .webp.

In fact if you look at your report it will tell you approximately how much size you can save by switching to a recommended format (Google recommends WebP format and so it bases its numbers on that).

In all the examples above I am assuming complex images with no transparency that are properly optimised.

Transparencies, use .png, everything else use 'Next Gen Formats' where you can.

I didn't encounter the use of such formats in any websites I visit

What browser are you using? Depending on what browser you use you may not see these formats as websites will sniff for the ability to display these formats before serving them to you.

https://www.ebay.co.uk/ uses .webP a lot if you want a site where you can see the difference between browsers.

Other sites such as YouTube etc. do use them but not consistently.

This is because support is still not fantastic:-

WebP Support

JPEG 2000 Support

JPEG XR Support

Because of the fact that each format is linked to a particular browser vendor if you use all 3 you can get a coverage well over 95%.

Which format(s) should I use?

In reality, using WebP with feature sniffing is more than sufficient for most sites.

If you are using WordPress there are lots of plugins for WebP format that are pretty much plug and play.

If not, WebP support is built into PHP 5.4 and above so it is really easy to roll your own.

Sadly there isn't as much support for JPEG2000 - which is surprising as that is iOS preferred format.

We rolled our own but it was a nightmare finding a PHP library that actually worked and I seem to remember needing several modules installing on the server (so if you are on shared hosting, this is likely a no go).

This could have changed as it was a couple of years ago we set everything up. (try ImageMagick)

JPEG XR is for when you have done everything else and if you really want to be on the bleeding edge of performance in IE9+ (so basically only nut cases like me even attempt to use that format and I would never recommend it commercially!).

We couldn't even get this to work on the server and had to adjust images externally using an online service - for this reason only static assets for anchor pages were done.

Upvotes: 4

Fischbrot
Fischbrot

Reputation: 828

PNGs are pretty big and you can't compress them as much as JPEGs.

You can compress PNGs but i noticed that no service really does this without quality issues.

Here is a link to try it out (png & jpeg - compression tool): https://tinyjpg.com/

Upvotes: 1

Related Questions