Recently I had a chance to present a talk at NDC Sydney about web performance and it received a great feedback.
That inspired me to write up a ser...
For further actions, you may consider blocking this person and/or reporting abuse
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
Done
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.
addyosmani.com/blog/lazy-loading/
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 😊
The links to the other parts in the series do not seem to work : (
Fixed
Thank You!
Absolutely fabulous writeup.