Prepare a large image for the web
Choose the source image and leave the target at 500 KB. For a photograph, start with WebP. The tool encodes the image locally and provides a downloadable result without sending the source to an image-processing service.
Five hundred kilobytes is a budget, not a universal recommendation. A small thumbnail should normally be much lighter, while a detailed full-width photograph may justify most of the allowance. Judge the file together with its actual rendered dimensions.
- Resize a normal content image near its maximum layout width
- Use responsive variants for wide layouts and small screens
- Prefer WebP when the publishing system supports it
- Keep width and height attributes in the final HTML to prevent layout shift
Consider the complete page weight
One 500 KB hero image can be reasonable; ten 500 KB gallery images create a five-megabyte page before scripts, fonts and styles are counted. Compress every asset according to its role and lazy-load media that begins below the first screen.
For repeatable publishing, define separate budgets for heroes, content images and thumbnails. A consistent workflow is more useful than compressing each image until it merely looks small enough in a file browser.
Check sharpness at the final display size
Inspect the downloaded image inside the real page or CMS preview. Fine text, product labels and interface screenshots reveal compression damage sooner than ordinary photographs. If those elements soften, use a lossless format or increase the budget.
High-density displays do not require the original camera dimensions. Supplying an image near twice its CSS width is usually enough for a sharp result, and responsive image markup can prevent phones from downloading the largest version.