What Image Size Should You Use on a Website?
Images that are too large slow pages down, while images that are too small can look soft on high-density displays. Start with the maximum display size instead of an arbitrary pixel target.
Keep an original copy, define the rule before processing, and verify the result after processing.
Measure the maximum display width
If the content column is only 1200 pixels wide, most images do not need a 4000-pixel source.
Hero images, card thumbnails, logos, and content images should be sized separately.
Leave some room for high-density screens
A source around 1.5–2× the CSS display size can help on high-density displays.
That does not mean bigger is always better—file size still matters.
Consistent aspect ratios simplify layouts
Card thumbnails are easier to manage when they share ratios such as 16:9, 4:3, or 1:1.
If cropping is required, protect the important subject instead of relying on automatic center crops.
Optimize size, format, and quality together
After resizing, choose JPG, PNG, or WebP and compress appropriately.
Web image optimization works best when dimensions, format, and quality are considered as one workflow.
Open the matching WUCJ tool and try the workflow directly in your browser.
Article / reserved AdSense placement
Related reading
Browse the category page for more practical guides.