Web image workflow
How to Prepare Images for the Web: Dimensions, Format, Quality, and Sharpness
A practical workflow for preparing website images: crop for the layout, resize to useful dimensions, choose an efficient format, control compression, and verify the final result.
The idea
A good web image is large enough to look clean in its layout, small enough to deliver efficiently, and exported in a format that matches the content. The workflow is more important than one magic quality setting.
Quick answer
Start from a clean master, crop for the intended layout, resize near the display dimensions, apply restrained output sharpening if needed, export to JPEG or WebP for most photos or PNG/lossless WebP when transparency or exact graphic detail matters, then inspect the final file in the page context.
Design the crop for the actual layout
A website hero, card thumbnail, profile image, and article illustration often need different shapes. Reusing one crop everywhere can hide important content or force the browser to crop unpredictably.
Decide whether the layout expects a square, portrait, landscape, or wide banner. Protect faces, text, product edges, and other important subjects from areas likely to be clipped on smaller screens.
- Create separate crops for very different placements.
- Keep important subjects away from unsafe edges.
- Preview both wide and narrow layouts when possible.
- Do not add critical text too close to the image boundary.
Resize to a useful delivery size
Uploading a very large camera original for a small page element can waste bandwidth without improving what the visitor sees. At the same time, an image that is too small can look soft on high-density screens or when the layout becomes larger.
Choose dimensions based on the largest realistic display size for that asset. Keep a larger master separately so you can create new sizes later without upscaling a small web copy.
Choose the format based on the image
Photographs usually benefit from efficient lossy compression such as JPEG or WebP. Graphics with transparency, sharp interface elements, or flat-color artwork may benefit from PNG or a suitable WebP mode.
Format support is broad on modern browsers, but the important decision is still visual: export the actual asset and compare quality and size for that content.
- Photograph: test JPEG and WebP.
- Transparent cutout or logo: test PNG or transparent WebP.
- Screenshot with crisp text: start with PNG and compare alternatives carefully.
- Do not convert formats only because one extension is fashionable; compare the result.
Use compression after dimensions are correct
Reducing the pixel dimensions to what the layout needs can save substantial file size before you touch aggressive compression. After that, lower the quality gradually and inspect the result.
Look carefully at faces, gradients, skies, text, fine hair, foliage, and high-contrast edges. Compression damage can appear in different places depending on the image.
Verify the final file in context
The last check should be the exported file, not only the editor preview. Open it at the size visitors will see. Check whether it still looks sharp, whether the crop works, and whether important detail survived compression.
If the website uses multiple responsive image sizes, keep the same creative intent across them while adjusting dimensions for each breakpoint. Preserve the original and editable project so you can make new exports later.
- Inspect the final export at normal viewing size.
- Check mobile and desktop crops when the layout differs.
- Keep the master image and project separately.
- Re-export from the master when a new size is needed.
Before you export
Practical checklist
Apply it
Turn the concept into an edit.
Use the related AashiPro Studio tool page for controls and workflow details, then open the full editor when you are ready to work on an image.
Continue learning