Prepare sharper, smaller images for a website
A smaller image file is useful only if it still looks right where people see it. Start with the image’s job and display size, then adjust dimensions, format and compression. Keep the original so that every experiment starts from the same source rather than a previously compressed copy.
1. Choose dimensions for the place the image appears
Measure the space in your layout. A photo displayed about 600 CSS pixels wide may benefit from a 1200-pixel version on a screen with a device pixel ratio of two. That is a starting point to test, not a requirement to double every image. A thumbnail and a full-width banner need different exports.
Resize while preserving aspect ratio. A 2400 × 1600 photo becomes 1200 × 800 when its width is halved. Forcing that photo into a square stretches the subject unless you crop it. Enlarging a small source adds pixels without recovering detail that was never captured.
Further reading: MDN: responsive images
2. Match the format to the content
JPEG is a practical option for photographs when you do not need transparency. PNG is useful for lossless graphics and transparent images. WebP supports both transparency and compression modes, making it another option when your publishing system accepts it. Compare actual exports rather than assuming one format always creates the smallest file.
Keep an eye on logos, fine text and flat-color illustrations: compression artifacts can be more noticeable there than in a photograph. JPEG cannot retain a transparent background. If you convert a transparent image to JPEG, inspect the background color in the exported result.
Further reading: MDN: image file types and formats
3. Compress while watching the result
Open the image compressor and try a moderate quality setting for a lossy format. Compare the original and result at the size people will actually see. Inspect faces, product edges, small lettering and smooth gradients; these areas often reveal an export that has gone too far.
A quality setting is an encoder input, not a promise about file size or visual quality across browsers. PNG export does not use the same lossy quality control as JPEG. A re-encoded file can even be larger than its source. Use the resulting byte count and visual inspection to decide whether an export helps.
Avoid repeatedly compressing an already compressed JPEG. If you need another attempt, return to the original. When your workflow supports it, combine the final dimensions, format and quality into one export.
Further reading: MDN: browser image export and quality settings
4. Prepare responsive versions when needed
For a photo used across mobile and desktop layouts, save a small set of useful widths instead of sending the largest file to everyone. Your website can expose those files through srcset and describe the display size through sizes. The browser then chooses an appropriate candidate.
Name exports clearly, such as workshop-600.webp and workshop-1200.webp. Confirm that each filename matches its actual dimensions and format. Keep a record of where the files are used so that replacing one does not leave broken links or mismatched versions.
Further reading: MDN: choosing responsive image candidates
5. Check the finished page
Open the downloaded file, then test it in the final page on a narrow screen and a larger display. Check that important subjects remain visible and that the browser has not stretched the image. For informative images, write alternative text that describes their purpose in context.
Set suitable width and height attributes in the page so the browser can reserve the image’s aspect ratio before it loads. Image preparation and the page’s loading behavior work together; a small export alone does not guarantee a fast page.
Further reading: MDN: image dimensions and alternative text