Johannes Odland

Cropping Images with CSS While Keeping a Focal Point in the Center

https://johannesodland.github.io/2023/02/26/cropping-images-with-css-while-keeping-a-focal-point-in-the-center.html

This is a lovely way to deal with image crop and focal point with CSS only! 😍

And I love that Johannes put this warning in the beginning:

While client-side cropping can be an effective way to adapt images further for display on different screens and devices, it can also be a wasteful technique. The downside of cropping on the client is that we discard pixels that we’ve spent resources on transferring and decoding. As a result we end up with larger file sizes, slower load times, and a less optimal user experience overall. As such, it’s important to use client-side cropping sparingly and consider alternative responsive image techniques.

• older link:
  The New CSS
• newer link:
  Thoughts from “Meet Safari for Spatial Computing”

---

Related contents with similar topics

1. 

   Barry Pollard

   What does the image decoding attribute actually do?

   • Nicolas Hoizey
   • 27 June 2023
   • image, WebPerf
   • 1 reaction

   So use it on your `` elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by…

2. 

   Jason Grigsby

   New Recommendations for Ecommerce Images

   • Nicolas Hoizey
   • 15 June 2023
   • image, responsive, WebPerf, ecommerce
   • 9 reactions

   For ecommerce companies—particularly for those selling apparel—it likely makes sense to prioritize image quality above file size. This is a really…

3. • Nicolas Hoizey
   • 6 June 2023
   • Core Web Vitals, image, LCP, WebPerf
   • 6 reactions
   • permalink

   Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭

   You can see this for my photography site in this WebPageTest result:

   https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp

   

4. • Nicolas Hoizey
   • 6 June 2023
   • image, JPEG XL, Safari, WebPerf
   • 20 reactions
   • permalink

   Looks like we will soon have JPEG XL in Safari! 🥳

   https://developer.apple.com/videos/play/wwdc2023/10122/

5. 

   Paul Hebert

   Watch Out for Layout Shifts with ‘ch’ Units

   • Nicolas Hoizey
   • 31 May 2023
   • WebPerf, Core Web Vitals, CLS, CSS
   • 5 reactions

   In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…