Practical guide to the <img> element: from basics to LCP. @nucliweb explains responsive images with srcset and sizes, modern formats AVIF and WebP via <picture>, and performance attributes like loading=lazy, width and height to cut CLS, decoding, and fetchpriority. Plus when to preload LCP images and when an image CDN is the pragmatic shortcut. #performance #html

https://joanleon.dev/en/guia-practica-elemento-img/

I'm playing around with JPEG XL's "JPEG repackaging" feature. It repackaged a 147kb JPEG down to 126kb, but on my Pixel 10, the new file takes 78ms to decode, vs 10ms for the JPEG.

At 3g+ speeds… that feels like a performance loss.

https://random-stuff.jakearchibald.com/apps/img-decode-bench/

Optimizing the performance of eBay’s sites and apps for a faster user experience

https://web.dev/shopping-for-speed-on-ebay/ by @addyosmani

#WebPerf #ProductPerf #Performance

The Algorithm That Transform The World.
The Story Of Nasir Ahmed.

https://www.youtube.com/watch?v=I9VXaVVs7WY

#Image #ImageCompression #ImagePerf #WebPerf

My first #WebPerf post here :)

Want to load your (LCP) hero image sooner?

Try <img fetchpriority=high> to boost its priority. Now used in production by Google Store, YouTube, eBay, Etsy, Yahoo. We also just deployed it on YouTube!

Learn more: https://web.dev/priority-hints

Hello 👋