Image aspect ratios for websites: choosing a few and cropping consistently
Pages look considered when their images share a small set of shapes. Pick two or three image aspect ratios for websites you build, such as a portrait 4:5 for products and people, a wide 16:9 or 3:2 for scenes, and a square for avatars, then crop every image to them. CSS aspect-ratio and object-fit hold the shapes in place and stop the layout jumping as images load.
Why ratios matter more than pixel sizes
On a responsive site an image is never one fixed size. The same photo might be 1200px wide on a laptop and 360px on a phone. What stays constant is its shape. If every card in a row has a different shape, the row looks ragged; if every section uses a different shape, the page looks assembled from parts. Fixing the ratio and letting the size flex is the web's equivalent of a magazine's picture grid.
Common ratios and what they suit
| Ratio | Shape | Good for |
|---|---|---|
| 1:1 | Square | Avatars, team photos, product grids in shops, social previews |
| 4:5 | Portrait | Products, people, food; fills a phone screen well |
| 3:2 | Landscape, like most cameras | Editorial photos, interiors, scenes |
| 16:9 | Wide | Video posters, wide scenes, banners |
| 21:9 or wider | Panoramic | Thin bands between sections; rarely for content |
Choose by what the photographs show. People and objects are mostly taller than wide, so portrait crops waste less of the frame. Rooms and landscapes are wide. A bakery might use 4:5 for products and 3:2 for the shop interior and nothing else.
Hero image dimensions
Hero images are where ratios break most often, because a full-width image that's 16:9 on a laptop becomes a thin strip on a phone, or crops away the subject. Two approaches work. Either change the ratio by screen size, wide on desktop and closer to square or portrait on phones, or let the image fill a section of fixed proportion with object-fit: cover and choose a photo whose subject sits near the centre. Supply a source image of around 2000px to 2400px on its long edge for full-width use; larger rarely looks sharper and costs bandwidth. Image optimisation for websites covers file sizes and formats.
The CSS that holds the shape
aspect-ratio- Sets the box's shape, for example
aspect-ratio: 4 / 5. The browser reserves the space before the image arrives. object-fit: cover- Fills the box and crops whatever doesn't fit, keeping the image's proportions.
containfits the whole image inside instead, leaving empty bands. object-position- Chooses which part survives the crop, such as
object-position: 50% 30%to keep faces near the top in view. widthandheightattributes- On the
imgelement, these let the browser compute the ratio even before CSS loads, which helps prevent layout shift.
Cropping consistently
- Decide the ratios before the photo shoot, and tell the photographer. Shooting with space around the subject leaves room for every crop.
- Crop every image to its ratio before upload, placing the subject using the rule of thirds or centre, consistently within a set.
- Keep the same camera distance within a group: all heads and shoulders for a team grid, all whole products on a plain ground for a shop.
- Check the phone crop. A face that sits at the edge of a desktop crop may disappear entirely in a narrower one.
Accessibility and performance
Reserving space with aspect-ratio or width and height prevents the page shifting as images load, which matters for anyone who has started reading or is about to tap. Crops must not remove information the alt text describes; if the alt text says “the team outside the shop”, the shop should still be visible. Text in images gets cropped unpredictably, another reason to keep it out of photos.
Images in Anticode
Anticode places the photos you add into the design system's layout, which uses a small set of fixed shapes. Hero photos, product images and photo bands are portrait 4:5 on wide screens, the hero and the first band image switch to wider crops on narrower screens, and team members are shown as square tiles with their initials rather than photos. Every photo fills its frame with object-fit: cover, so its shape is held while the size flexes. Playful sets its hero photo as a square with a soft blob outline, and Organic gives its hero photo an arched top. In the layout editor you can resize an element within its section, which changes its width but not the photo's ratio.
Questions people ask
What aspect ratio should website images be?
There's no single answer. Pick two or three for the whole site based on your subjects, such as 4:5 for products and 3:2 for scenes, and keep to them.
What size should a hero image be?
Around 2000px to 2400px on its long edge is plenty for full-width use, served at smaller sizes to phones with responsive images.
What does object-fit cover do?
It scales the image to fill its box completely and crops the overflow, so the box keeps its shape without stretching the photo.
Sources
- aspect-ratio, MDN Web Docs, checked
- object-fit, MDN Web Docs, checked