Choose useful image dimensions
Choose image dimensions from the largest layout where the file will appear, then check it on smaller screens.
Start from the layout
Size an image for the space where it will appear. Check the page at the narrowest and widest screen sizes you support. A card thumbnail, article hero, and full-width background each have different needs. Measure the largest display area to get a practical starting point instead of uploading the camera original by default.
Responsive layouts often change image width at breakpoints: an image may fill most of a phone screen but take up only part of a desktop column. If you control the page markup, responsive image features let the browser choose from multiple sizes. If your publishing system accepts one file only, balance the largest display size against download time.
Account for high-density displays
CSS pixels and image pixels do not always map one to one. Some displays use several physical pixels for each CSS pixel, so a small source can look soft. A higher-resolution source may look sharper, but it also takes more storage, memory, and download time. Choose a size for the way the image will be viewed; larger is not always better.
For a card on a high-density display, an image wider than the card’s CSS width can keep edges crisp. A responsive image set can also provide smaller versions for layouts or devices that need fewer pixels. Check the result on representative screens, especially when the image contains text.
Preserve aspect ratio unless cropping is intentional
Changing width and height independently can stretch people and objects. If the image ratio does not fit its frame, keep the full image with empty space, crop it to fill, or choose a different composition. Cropping can sharpen the focus, but may remove context or cut off important details. Check faces, labels, and edges afterward.
When resizing with a maximum width or height, keep the source aspect ratio. A maximum dimension reduces an oversized image without changing its shape; it does not choose a crop for a fixed frame. If the page uses different crops for different layouts, prepare them deliberately instead of forcing one image into every shape.
Dimensions and file weight interact
Pixel count affects file size, though the format and image content matter too. Doubling both width and height creates four times as many pixels before compression. A detailed photo may encode differently from a flat illustration of the same dimensions. Resizing to the actual display size can preserve visible quality and save more space than a steep quality reduction.
Resizing too far permanently removes detail. If an image may be enlarged, zoomed, or viewed on a high-density screen, a small source can look blurred. Keep the larger original and make each delivery size from it; enlarging a reduced copy will not restore lost detail.
A practical sizing workflow
Identify the largest display size and whether visitors can open or zoom the image. Choose the pixel density, keep the aspect ratio, and export a copy. Check it at its intended size on narrow and wide layouts, then assess the file size. Judge it in the page where it will appear, not only in a desktop editor.
MEZENCORE can limit an image’s maximum width or height and apply compression settings. It does not create responsive markup or choose a crop for your website. If your publishing system supports responsive images, prepare a few sizes from the original. For the next steps, see reducing file size and choosing an image format, or open the tool.