Crop strategyalways cut out the middle
Placeholders onlyScale images with sharp
With the sharp library, you can build an image component and converter in userland. The images below are cropped, resized and converted to AVIF or WebP on the fly, depending on what your browser accepts. The image converter is also used in the products example.
Each image starts as a blurred placeholder: a 24 pixel version, inlined into the HTML as data: URI of a few hundred bytes. It shows up instantly and keeps the layout stable, until the full image has loaded and covers it. No JavaScript is involved.
The originals are landscape photos, cut to portraits. The frame on each original shows which part sharp keeps.
The child in red stands at the right edge: centre loses them.
Child on the beach by Danielle MacInnes (CC0) · 300 × 450 px · placeholder 98 bytes
Only entropy finds the barn, attention goes for the bright sky.
Barn in Färlev by W.carter (CC0) · 300 × 450 px · placeholder 128 bytes
The waves are full of detail, so entropy misses the boat. Attention finds it.
Sailboat from above by Lance Asper (CC0) · 300 × 450 px · placeholder 95 bytes