`!\n\nAnother great tactic is compressing our images and only sending the bytes truly necessary for rendering our resources\nat an acceptable quality level. You might be saying, but bro 🤨, didn't we already talk about compressing via Brotli or gzip,\nso why would I need to compress my images further?\n\nThe key difference is that Brotli and gzip are text-based compression algorithms. They're awesome for HTML, CSS, and JavaScript\nbecause those files are just text, which compresses really well. Images, on the other hand, are already stored in compressed\nformats like JPEG, PNG, or WebP. Running them through gzip won't magically shrink them more — in fact, it usually does nothing 😅.\n\nThat's why we need image-specific compression: things like resizing to responsive breakpoints, serving WebP/AVIF, stripping out\nmetadata, and dialing in quality settings. These steps cut actual image bytes, which is often the biggest win for\nLargest Contentful Paint (LCP).\n\n

\n\n| Format | Compression | Typical Size 📦 | Quality 🖼️ | Browser Support 🌐 | Best Use Case |\n| ------- | -------------- | --------------------- | ----------------------------------------------- | ----------------------------- | ----------------------------------------- |\n| JPEG 📸 | Lossy | Medium–Small | Good, but can show artifacts | Universal ✅ | Photos, complex images |\n| PNG 🖌️ | Lossless | Large | Excellent (no artifacts, supports transparency) | Universal ✅ | Logos, icons, images needing transparency |\n| WebP 🚀 | Lossy/Lossless | Smaller than JPEG/PNG | High (supports transparency + animation) | Widely supported (not IE) | General purpose replacement for JPEG/PNG |\n| AVIF 🌈 | Lossy/Lossless | Smallest | Excellent (HDR support) | Growing (all modern browsers) | Cutting edge for photos, hi-res graphics |\n\n

\n\nWe can also utilize responsive images to help improve our LCP.\nIt makes no sense to serve a 2800px-wide image to a mobile device with a 600px screen.\nInstead, we can use the `srcset` attribute to define multiple image sources at different sizes.\nThe browser will automatically choose the most appropriate file based on the user's screen resolution and viewport size.\nFor even more control, we can wrap our images in the `

Something went wrong.

Today I learned about... workshop

Back to all tags

Web Performance Fundamentals

Blog post about: My key takeaways from Todd Gardner's Frontend Master's workshop.

React Suspense with Chantastic

Blog post about: Some awesome things I learned at a remote workshop with Michael Chan

Today I learned about...
workshop