I put the cat images in a JuxtaposeJS to make it easier to compare them.
But I don't see a difference, are you sure you uploaded the original (before) image? I would expect the color banding in the background to be only in the (more) compressed version.
Edit: your original article had the correct files. Now you can see the difference.
Yeah I might have messed up the uploads, will have a look and fix it. Thanks
Don't forget that coming soon will be native browser lazy loading via an html attribute. While its only behind a feature flag right now, there is literally no harm in having it in place in your code already.
One good resource I like for image optimisation is TinyPNG. Don't let the name fool you - it supports JPG and PNG.
Has an API that you can integrate with a few different ways. Found it very useful integrated into content management systems for client websites.
I would disagree that webP has not enough support. It works everywhere except safari and iOS.
Given that there are a lot of ways to control what format is loaded and to provide alternative fallbacks I think strategies that exclude newer approaches are not addressing the full potential.
You're completely right Benjamin, although the support is not there yet. I updated the post and added a snippet to show how to add WebP and have a fallback 😊
Absolutely fabulous writeup.
The links to the other parts in the series do not seem to work : (
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.