Image optimisation

Yaser Adel Mehraban on May 05, 2019

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... [Read Full]
markdown guide
 

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.

 
 

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 😊

 
 
 
code of conduct - report abuse