Saltar al contenido

Set image width and height

Unos 10 min

Width and height (or CSS aspect-ratio) stop layout shift while images load. Follow the steps below on your stack, then re-check the live URL.

Width and height (or CSS aspect-ratio) stop layout shift while images load.

Lo recordamos en este navegador para que la siguiente guía use el mismo CMS.

At a glance

Time~10 min
CategoryPerformance
Steps2
StacksWordPress, Shopify, Webflow, Next.js, HTML, more

Pasos

  1. Add width and height that match the image’s display box.

  2. Don’t serve a 3000px file for a 300px slot.

En HTML / static

Add alt="…" on each <img>, plus width and height when you know them.

Snippet
<img src="/photo.jpg" alt="Description" width="800" height="600">

FAQ

What does “Set image width and height” fix?
Width and height (or CSS aspect-ratio) stop layout shift while images load.
How long does this usually take?
About 10 minutes on most CMS and code stacks when you already have access to edit the page.
Where do I start?
Start with: Add width and height that match the image’s display box. Then use the platform picker on this page for placement notes.