Maximally optimizing image loading for the web in 2021

Malte Ubl’s list for:

8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

  1. Fluid width images in CSS, not forgetting the height and width attributes


The post Maximally optimizing image loading for the web in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

Malte Ubl’s list for:

8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

  1. Fluid width images in CSS, not forgetting the height and width attributes in HTML so you get proper aspect-ratio on first render.
  2. Use content-visibility: auto;
  3. Send AVIF when you can.
  4. Use responsive images syntax.
  5. Set far-out expires headers on images and have a cache-busting strategy (like changing the file name).
  6. Use loading="lazy"
  7. Use decoding="async"
  8. Use inline CSS/SVG for a blurry placeholder.

Apparently, there is but one tool that does it all: eleventy-high-performance-blog.

My thoughts:

  • If you are lazy loading, do you really need to do the content-visibilty thing also? They seem very related.
  • Serving AVIF is usually good, but it seems less cut-and-dry than WebP was. You need to make sure your AVIF version is both better and smaller, which feels like a manual process right now.
  • The decoding thing seems weird. I’ll totally use it if it’s a free perf win, but if it’s always a good idea, shouldn’t the browser just always do it?
  • I’m not super convinced blurry placeholders are in the same category of necessary as the rest of this stuff. Feels like a trend.

Direct Link to ArticlePermalink


The post Maximally optimizing image loading for the web in 2021 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-02-16T21:16:54+00:00) Maximally optimizing image loading for the web in 2021. Retrieved from https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/

MLA
" » Maximally optimizing image loading for the web in 2021." Chris Coyier | Sciencx - Tuesday February 16, 2021, https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/
HARVARD
Chris Coyier | Sciencx Tuesday February 16, 2021 » Maximally optimizing image loading for the web in 2021., viewed ,<https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/>
VANCOUVER
Chris Coyier | Sciencx - » Maximally optimizing image loading for the web in 2021. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/
CHICAGO
" » Maximally optimizing image loading for the web in 2021." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/
IEEE
" » Maximally optimizing image loading for the web in 2021." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/. [Accessed: ]
rf:citation
» Maximally optimizing image loading for the web in 2021 | Chris Coyier | Sciencx | https://www.scien.cx/2021/02/16/maximally-optimizing-image-loading-for-the-web-in-2021/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.