Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.

By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions.

To workaround this, we can use the width and height attributes, or the aspect-ratio CSS property. Which is best? Depend if the image is content or design!

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

Blurhash strings are short enough to be added as a field in a JSON object and to be stored in a database. The implementations are small and easy to port to new languages, and the end result is a smooth and interesting experience for your users.

… ~50% savings compared to JPEG, and ~20% savings compared to WebP.
… can be lossy or lossless, has the ability to use an alpha channel (transparency for UI and design elements), and even has the ability to store a series of animated frames (think lightweight high-quality animated GIFs).
… one of the first image formats to support HDR color support; offering higher brightness, color bit depth, and color gamuts.

I'm pretty happy to have cut the size of images on my blog by ~50%. In addition to the benefits to user experience at a critical time, I'm also expecting that this'll save me some money in terms of bandwidth.

Comment réduire l’impact des visuels sur les performances de decitre.fr tout en gardant une bonne qualité d’affichage ? WebP, images à haut ratio et LQUIP !

Avec le son : http://responsiveconf.com.s3.amazonaws.com/audio/15-paul-robert-lloyd-responsiveconf.mp3

Ajout d'une information sur la focale de l'image de manière à ce qu'une version réduite se concentre effectivement sur le contenu intéressant.

Très pratique pour monter facilement des webdesigns, un générateur d'images vides aux dimensions souhaitées.

Agrandissement de petites images pour en faire de plus grandes.

Une question récurrente à laquelle Korben se propose de nous donner quelques réponses...

"Une petite astuce toute bête, réalisable sous Windows qui permet d’encapsuler dans une image, un fichier RAR."