Johannes Odland avatar Johannes Odland

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

Screenshot of ā€œ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.

  3. Note from 4 April 2024

    Most mentions of the magical CSS object-fit: cover; in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option.