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
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.
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/
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
Absolutely fabulous writeup.
Thank You!