Match pixels to the layout
Measure the rendered width of the image at the largest breakpoint. Exporting close to that width prevents the browser from downloading pixels it will immediately shrink. For a full-width desktop image, that may be 1,920 pixels; for a content column it may be 800 to 1,200 pixels.
Allow for high-density screens
A 2x variant can keep a small interface image crisp on a retina display. Do not automatically double every photo: file size grows quickly, and responsive `srcset` lets the browser select an appropriate candidate.
Useful starting points
- Content images: 800 to 1,200 pixels wide.
- Full-width hero images: up to 1,920 pixels wide when the design needs it.
- Card thumbnails: 300 to 600 pixels wide.
- Open Graph images: commonly 1,200 × 630 pixels.
These are starting points, not rules. A narrow mobile layout should receive a smaller candidate, and a portrait image needs dimensions that respect its composition.
Always preserve aspect ratio: changing width and height independently can stretch faces, products and text. Crop intentionally when a fixed frame is part of the design.
Keep layout stable
Declare the image's intrinsic dimensions in HTML or set an aspect ratio in CSS. This reserves space before loading and helps prevent cumulative layout shift.
The resize tool includes practical presets so you can create a display-sized export without altering the original.
Open the resize tool →