DEV Community

Cover image for Image optimisation

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...
Collapse
 
elmuerte profile image
Michiel Hendriks • Edited

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.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Yeah I might have messed up the uploads, will have a look and fix it. Thanks

Collapse
 
yashints profile image
Yaser Adel Mehraban

Done

Collapse
 
turnerj profile image
James Turner

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.

Collapse
 
jamiesonroberts profile image
Jamieson Roberts

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/

Collapse
 
benbao profile image
Benjamin Bromberg

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.

Collapse
 
yashints profile image
Yaser Adel Mehraban

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 😊

Collapse
 
anders profile image
Anders

The links to the other parts in the series do not seem to work : (

Collapse
 
yashints profile image
Yaser Adel Mehraban

Fixed

Collapse
 
ben profile image
Ben Halpern

Absolutely fabulous writeup.

Collapse
 
magme profile image
Mgme

Thank You!