DEV Community

Optimizing images for the web - an in-depth guide

Adrian Bece on October 01, 2019

Table Of Contents Calculating JPG image file size Online image optimization Automated solutions Image loading optimization Using CDN We...

Read full post

Jannik Wempe • Oct 1 '19

Thanks for that awesome article giving a nice overview.

Would appreciate a full example combining a picture element for different screensizes, formats (WebP) and pixel densities. As far as i understood this article, that should be the best solution (adding CDN, lazy loading and so on...).

Adrian Bece • Oct 1 '19 • Edited

Thank you very much.

I've copied this directly from one of my projects. Hopefully, it will be helpful to you. In the article, I didn't want to overwhelm the users with the full example, but I might include it as a bonus.

<picture>
    <source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 440px)">
    <source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 440px)">
    <source srcset="./images/webp/hero-image-550-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 767px)">
    <source srcset="./images/minified/hero-image-550-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 767px)">
    <source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 1023px)">
    <source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 1023px)">
    <source srcset="./images/webp/hero-image-760-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 1919px)">
    <source srcset="./images/minified/hero-image-760-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 1919px)">
    <source srcset="./images/webp/hero-image-960-min.webp" type="image/webp">
    <source srcset="./images/minified/hero-image-960-min.png">
    <img  src="./images/minified/hero-image-960-min.png" alt="Example">
</picture>

Moviez.biz • Oct 3 '19

Hey Adrian in my case i am running an blogger blog where it's full of YouTube videos, what I am doing is using staticaly cdn where I can insert there cdn.statically.io/img/:image_url to optimize images

Adrian Bece • Oct 3 '19

CDNs that optimize images right out of the box like Cloudinary and Statically are awesome. In cases like yours, CDNs really take a weight off our shoulders.

Are you doing any loading optimization like lazy loading the images?

Moviez.biz • Oct 3 '19

No because i am using this blogger platform with a amp theme,still google is not officially enabled amp for blogger platform,struggling a bit to implement things for a fully video blog like mine in i think you know if i add a video from YouTube as blog post it will have 2 URLs one is for image and the second one for YouTube video, in my case image URL is used for thumbnails in homepage and when sharing in social media it will be used

I have spoke with the lots of amp theme creators still they don't know how to make valid YouTube amp post.

Rahul Nanwani • Apr 20 '20

CDNs that optimize images on-the-fly really ease the burden, and no doubt Cloudinary and Statically do a great job there, but have you tried ImageKit.io? It's easy to use and offers a more cost-effective solution.

Moviez.biz • Oct 3 '19

If you know how to use lazy loading in blogger please tell me how to implement it

GTB3NW • Oct 1 '19

Hey Adrian, have a look at conditional webp returning. You can see browser headers for Accept and if webp appears there when the request for an image is made, you can conditionally return the webp to the client. Browsers will render the webp instead of a jpeg for example. No code changes required, just pipeline changes to create a webp alongside your jpegs, then add the condition to your webserver.

Adrian Bece • Oct 2 '19 • Edited

I had no idea it can be implemented server-side as well. Thank you very much for your suggestion.

I found this guide, looks simple and straightforward:

alexey.detr.us/en/posts/2018/2018-...
github.com/uhop/grunt-tight-sprite...

Eion Robb • Oct 2 '19

This can cause issues when saving images offline (eg for building offline-capable PWA's) unless you're careful to change the filename extension when you store it offline, eg storing a .jpg file with webp contents can trigger security checks since the mime-type of the contents of the file doesn't match with the mime-type of the file extension (extension sniffing has to be used since there's no mime-type headers for file://)

Robert Linder • Oct 4 '19

Although this post mentions native lazy-loading, seeing as it is already available in Chrome for desktop and Android (that's over 50% browser support! caniuse.com/#feat=loading-lazy-attr) - I think it'd be wise to conditionally load JS library for lazy-loading only when native isn't available, more info on that here: web.dev/native-lazy-loading

Robert Linder • Nov 13 '19 • Edited

Also, to improve performance and avoid content shifts - remember to set the width and height attributes for <img>, more info in this video from Jen Simmons of the CSS Working Group: youtube.com/watch?v=4-d_SoCHeWE

Adrian Bece • Oct 4 '19

Thank you very much for the info on implementing the native lazy loading with fallback.

Allison Walker • Oct 2 '19

Interesting list!

Do you know of an image compressor that also converts .jpg into webp? You can also install ImageOptim on your computer and compress images before uploading them.

I'm also curious why you only include the picture element and not img srcset? From my reading of the MDN spec, picture is for the art direction problem, and img srcset is for image resolutions.
developer.mozilla.org/en-US/docs/L...

Adrian Bece • Oct 2 '19

Thank you very much.

I've used picture element because it offers me more control over which image is being loaded. I guess I prefer explicitly telling the browser what to load. I've found it to work great with both art direction and performance. Also, picture element allowed me to support WebP with a really nice fallback.

I think it's just a matter of use-cases and personal preference.

Allison Walker • Oct 4 '19

What is your thought about adding images via background in CSS?

background-image:url(img/myimage.jpg);

Can images added via this method be optimized using picture or srcset, or do you just have to optimize them by resizing and compressing? thx

Adrian Bece • Oct 4 '19

For this method, my primary concern is accessibility. Without the alt tag and any HTML, a simple div with background-image doesn't have good accessibility.

Another issue is that you'd have to use an image aspect ratio to calculate the padding (spacing) needed for the background image which may lead to code bloat if you have lots of images with various aspect ratios.

As for optimization, we need to optimize them by compression and resizing (if needed).

ut4utc • Oct 3 '19

I've been wondering - how much time would love to confess about the fact that lazy loading is cool? Well, because it is very shabby looking, permanent screen blinking, the gray squares, which is 2000 on dialup modem sit and wait for the download. Well, that's pathetic! Did the developers do not have own opinion and remains only an opinion which they impose on internet giants?

Marius • Oct 1 '19

You're a lifesaver dude !

Adrian Bece • Oct 1 '19

Thank you.

Are you currently working on a project that uses lots of images?

Marius • Oct 4 '19

Not a lot but one of my class project use some, I was particularly interested in the lazy loading think especially the progressive loading 👌

Jang Rush • Oct 15 '19

Hi Adrian, I'd like to translate this excellent guide to Chinese. The translated text will be published at nextfe.com
Can you give me the permission?

Adrian Bece • Oct 15 '19

Hello Jang. Can you please contact me via email? My email is adrianbece@live.com

I would like to know more about your website and what is your publishing policy. Do you link to the original article and is the author credited?

Thank you

Jang Rush • Oct 16 '19

The author is credited at the beginning of the translation, and is linked back to the original article. I've sent you an email with details. :-)

Jang Rush • Nov 22 '19

Oh, I forgot to inform you that I recently finished the translation and published it at: nextfe.com/optimize-image/

Thanks again for sharing these excellent guide.

Adrian Bece • Nov 22 '19

Awesome, thank you really much

Rocky Kev • Oct 4 '19

This has singlehandedly been the most detailed post I ever read on image optimization. Thank you!

I've been using so many freaking tools and methods, forgetting what I did, and then googling it and doing something else. I'm going to be revisit this post for a long time!

Rodrigo • Oct 6 '19 • Edited

The described not optimized scenario it is actually describing a bit map image (bmp) a format that is uncommon and old and it is unlikely to happen.

I didn't know there was native lazy loading, thanks for the tip.

Panji Lesmana • Oct 2 '19

I'm using this service statically.io/imgpx, It has a lot of features I need. And now it supports custom domain.

Adrian Bece • Oct 3 '19

Someone else also mentioned statically. I might use it on my personal projects if needed. Are there any downsides to using that particular service? Any issues that you ran into during development?

Panji Lesmana • Oct 3 '19

Sometimes there's an error on some files that are cache from Github. So I must rename it on Github and recache it again. I still don't know why.

Siddharth Venkatesh • Oct 1 '19

Excellent article. Thank you for writing this.

Adrian Bece • Oct 1 '19

Thank you very much

Ha Tuan Em • Oct 1 '19

Thanks for that article. I hope you will post more new idea for old solution !
Thanks you so much !

Adrian Bece • Oct 1 '19

Thank you very much, hope you'll find it useful in your projects

Topollo • Oct 1 '19

Very helpful article thanks

Adrian Bece • Oct 1 '19

Thank you very much, glad you've found it helpful.

Uploadcare • Feb 7 '21

Awesome guide! We can add one more thing that will also help your website much faster. Try to disable hotlinking to images. Hotlinking takes place when some third-party websites display an image from your website using the web link of the image hosted on your server.

The weblink of the image will directly point to your web server and make use of your web server to host resources on their website. It puts an extra burden on the server, slowing down its overall performance.

Hotlinking should be disabled so that your server works only for your site. This will make the response time faster, which automatically results in faster loading on the clients’ end. To avoid hotlinking, you need to set correct HTTP headers for your images.

You can find more tips in this post: bit.ly/39X1pTd

Jeremy Smith • Oct 2 '19

That image at the end reminds me of two awesome albums. FM-84 Atlas and GUNSHIP :D

Adrian Bece • Oct 3 '19

I love the outrun / synthwave / vaporwave style. That's the reason I've used the image.

Jeremy Smith • Oct 3 '19

Yesss! Me Too! Though I've never known the source of the album art for those two albums, those images are great 👌

I'm also a huge fan of LIGHTS as well. Always on the look out for people who have a shared love of LIGHTS 👍

Burak • Mar 5 '20

Thanks for the helpful content. I want to mention about image4io. image4io is image optimization, CDN usage and storage management solution. It is full stack image manager. You can glance and review.

Zecony • Oct 3 '19

Thank you for sharing this informative topic. Hvala brate :)

Adrian Bece • Oct 3 '19

You're welcome, brate :)

Asifur Rahaman • Sep 25 '20

that was a hell of an article ,, thanks