Image Aspect Ratios for the Web: Layout, SEO, and Social Previews

Pick one aspect ratio per image slot, crop to it, and tell the browser the box size before the file arrives. Crop Image locks the ratio on export. Resize Image hits the pixel target after that, and Compress Image cuts the bytes. A mismatched ratio breaks card grids, crops Open Graph previews, and raises cumulative layout shift. Search engines use the dimensions. They do not fix a layout that jumps.

Search Console flagged a blog for CLS. Featured images were the cause. Fonts and ads were not the problem in that report. Writers uploaded portraits, horizontal photos, and square Instagram exports into the same template. The grid reflowed on every row while images loaded. Readers felt the page jump. Google recorded it.

Aspect ratio is geometry. On the web it is also layout stability, predictable social cards, and image-search thumbnails that do not cut off the headline.

Why ratio matters more than raw pixels for the box

Crawlers and social scrapers read dimensions from tags and from file metadata. Browsers lay out from the box size. When those disagree:

• CLS spikes. There is no reserved height, so content shifts when the image arrives.
• OG crops miss. Facebook takes a center slice of the wrong-ratio art and the logo can vanish.
• Card grids misalign. Uneven rows look broken in archive pages and in modules that feature the page.
• Image search previews center-crop odd ratios in ways you cannot predict.

Pixel dimensions matter for weight (image compression for web). Ratio matters for where the box sits before the bytes arrive. Alt text and filenames still matter for image SEO. A consistent ratio does not replace a missing alt.

Standard ratios and where they fit

| Ratio | Decimal | Typical use | Example export | |-------|---------|-------------|----------------| | 16:9 | 1.78 | Video thumbs, heroes, blog wides | 1920×1080, 1200×675 | | 3:2 | 1.50 | Photography blogs, product cards | 1500×1000 | | 4:3 | 1.33 | Legacy displays, some tablets | 1600×1200 | | 1:1 | 1.00 | Avatars, product grids, Instagram | 1080×1080 | | 4:5 | 0.80 | Portrait social, Pinterest | 1080×1350 | | 1.91:1 | 1.91 | Open Graph / link previews | 1200×630 |

Pick one primary card ratio for archives and keep it. A mixed 16:9, 3:4, and square feed forces CSS workarounds or letterboxing. Heroes can differ if the CSS container declares aspect-ratio explicitly. 16:9 or 3:2 is the usual card choice.

Open Graph and Twitter cards

Link previews are strict. Build OG art at 1200×630 (1.91:1), which is the safest default for Facebook, LinkedIn, and Slack.

• Keep the headline inside the center 80%.
• Keep the logo off the edges.
• Keep essential detail out of the top and bottom 10%. Some clients crop there.

Twitter's large summary historically used 2:1. 1200×630 usually works. Some platforms tolerate 1:1. Few reward an ultra-wide banner. Validate with each platform's debugger after deploy.

When the on-page hero and the OG card need different ratios, export two crops from the same photo with Crop Image.

CSS: reserve space and stop CLS

HTML width and height set the intrinsic ratio:

<img src="post.webp" width="1200" height="675" alt="..." loading="lazy" />

A CSS container can reserve the same box:

.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover crops overflow. contain letterboxes. Card grids almost always want cover, with a consistent source ratio, so the crop is not random. object-fit: fill stretches the picture. Do not repair a ratio by stretching it.

Pair this with responsive images. Retina images 2x explained covers srcset without breaking the reserved box.

Standardize ratios in this order

1. Audit templates. List every image slot: card, hero, OG, author avatar.
2. Assign a ratio per slot and write it in the style guide.
3. Retrofit the library. Batch-crop existing posts to the card ratio.
4. Update CMS fields. Enforce a minimum dimension or a ratio hint on upload.
5. Add width and height in the theme markup for each slot.
6. Validate OG with a share debugger on the staging URL.
7. Monitor CLS in Search Console Core Web Vitals after rollout.

Crop in Crop Image, then Resize Image to the pixel target for that slot. Resize mistakes compound when a stretch also changes the ratio.

Social vs on-site ratios

Cropping for social media often needs 4:5 or 9:16. A blog card might be 16:9. One file serves both only when the composition works in both frames. Otherwise export two crops from the master.

master.jpg → crop-16x9-card.webp (on-site)
          → crop-1200x630-og.jpg (link preview)
          → crop-4x5-social.jpg (optional promo)

Compress each export with Compress Image.

Structured data and image search

Article schema can reference image URLs. Provide images at least 1200 px wide when you can, for rich-result eligibility. A repeated ratio makes it easier to produce assets that meet that bar. It does not remove the "will this qualify?" check.

Common mistakes

Mixed ratios in one grid force unequal row heights or an aggressive CSS crop.

Missing width and height is a CLS penalty on every lazy-loaded image.

Using a vertical Pinterest pin as the OG image decapitates the subject in the link preview.

Stretching with object-fit: fill distorts the photo.

An ultra-wide hero, such as 21:9 cinematic art, becomes a sliver on a phone. Art-direct a mobile crop.

Privacy note

An OG image is public once it is shared. For an internal ratio audit of a confidential deck, use a local crop tool. Skip preview generators that upload unreleased creative.

Other ways to hold the box

Art direction in <picture> can serve a different crop per breakpoint. A solid color in the dominant color can act as a low-quality placeholder while the image loads. An SVG can hold the ratio box with a shimmer. A CDN can auto-crop with fit=cover and a focal point. That last option ties you to the vendor.

For format next to ratio, see PNG vs JPG Guide and when to use WebP instead of PNG.

Limitations

Locking an aspect ratio in CSS (aspect-ratio: 16 / 9) prevents layout shift. If the image file was exported at a different ratio and you do not set object-fit: cover, the picture stretches or letterboxes.

Standardize a ratio per template slot, reserve the space in HTML or CSS, export a separate OG crop, and retrofit the archive before CLS complaints show up. The pixels are the cheap part. A layout that jumps is what Search Console records.