The shape of the frame shapes the content.
An image’s width compared with its height, written width:height. The ratio decides what fits in the frame, how content adapts from wide monitors to upright phones, and whether the page jumps while it loads.
In 1892 William Dickson and Thomas Edison set the frame of 35 mm film at four perforations high, which gave a picture of about 4:3. The sound-era Academy ratio of 1.375:1 stayed close to it, and television adopted 4:3 so that films could be shown on it.
When television drew audiences away in the early 1950s, Hollywood went wide with CinemaScope, VistaVision, and the flat 1.85:1 frame that debuted in 1953, and anamorphic film settled at 2.39:1 in 1970. HDTV standardized on 16:9, computer displays moved from 4:3 through 16:10 to 16:9 by around 2010, and phones made square and vertical video everyday formats.
Aspect ratio is the proportion of width to height. Every frame has one, and when the content and the frame disagree, something has to give: the image is cropped, padded with bars, or stretched. Deciding which, ahead of time, is the design work.
An image without dimensions loads at zero height, then pushes everything down when it arrives. Width and height attributes, or the CSS aspect-ratio property, let the browser hold the space, which keeps Cumulative Layout Shift low.
Thumbnails in mixed shapes make a grid ragged and hard to scan. Crop every image in a component to the same ratio with object-fit: cover, and set a focal point so faces and products stay in the frame.
When content and frame disagree there are three options: crop to fill, add bars (letterboxing or pillarboxing), or stretch. Crop when the edges don’t matter, add bars when nothing may be cut, and avoid stretching, which distorts everything.
Desktop monitors are mostly 16:9 or 16:10, while an upright phone is closer to 9:19.5. A hero composed for one is wrong for the other, so serve a different crop at each breakpoint.
Square video spread with Instagram and Vine, and stories, Shorts, and Reels made 9:16 the standard on phones. Shoot and edit for the frame people actually hold, not the one you are used to.
Most cameras shoot 3:2 or 4:3. Cropping those photos into 16:9 heroes or 1:1 thumbnails throws away part of the shot, so plan the crop when choosing the image, not after.
Screens are sold by their diagonal, but at the same diagonal a 16:9 screen has about 11 percent less area than a 4:3 one, and much less height. Height decides how much of a page fits, so compare screens by their dimensions.
1:1 feels stable, 4:3 practical, 16:9 cinematic, and 2.39:1 epic. The 16:10 of many laptops is 1.6:1, close to the golden ratio’s 1.618. Choose a frame for the feeling as well as the fit.
AI now generates and crops images at scale. The frame has to be chosen before generation, and automatic crops have to be checked.
Image and video generators compose for the ratio you ask for, and cropping later cuts the composition apart. Choose the ratio for where the image will live before you generate it.
Automatic cropping uses saliency models to keep the important part of an image. Twitter dropped its saliency crop in 2021 after its own study found the model favored some faces over others.