Image optimization is not simply making every file as small as possible; it is delivering enough visual information for the actual display size and purpose.
Start with the final use
Identify where the image will appear: a full-width hero, product card, avatar, article illustration or social preview. Each use has a different target size and crop. Uploading a 5000-pixel photo for a 400-pixel card wastes bandwidth even if the server visually scales it down.
Record the largest expected display width, including high-density screens, and create an output appropriate for that range.
Resize before compressing
Dimensions often have a larger effect on file size than a small quality adjustment. Resize the master image to the required pixel dimensions, then compress the resized copy. Keep the original master separately because repeated resizing and lossy export can reduce quality.
Do not upscale a small image expecting new detail. Upscaling creates more pixels but cannot reconstruct missing texture or sharp text.
Choose a suitable format
JPG works well for photographs when transparency is unnecessary. PNG preserves transparency and sharp edges but can be large for complex photos. WebP often provides a useful balance for modern browsers. SVG is valuable for vector logos and icons when the source is trusted and safely handled.
Format selection should follow the content. Converting a transparent logo to JPG adds a solid background; converting a photo to PNG may greatly increase size.
Adjust quality visually
Lossy quality settings are not comparable across every encoder. Start around a moderate-to-high value, inspect faces, gradients, product labels and fine edges, then reduce gradually. The best setting is the lowest size that still looks acceptable in its real context.
Zooming far beyond the intended display can make harmless artifacts seem serious. Also check normal viewing size because that is what most visitors will see.
Preserve important information
Images with small text, diagrams or interface screenshots often need sharper output than decorative photography. If the image communicates instructions, readability matters more than an aggressive file-size target. Consider cropping empty areas before compression.
Use responsive delivery
A responsive page can offer different image widths so the browser downloads an appropriate file. The HTML srcset and sizes attributes, or an image CDN, can help. Set width and height attributes to reserve layout space and reduce unexpected movement while the file loads.
Use meaningful alternative text
Alternative text describes the function or information of an image for people who cannot see it. It is not a place to repeat keywords. Decorative images can often use empty alternative text, while charts and instructional images need a useful equivalent in nearby text.
A practical workflow
- Keep the original master.
- Crop for the intended composition.
- Resize to the largest required display.
- Select JPG, PNG or WebP based on content.
- Adjust quality while inspecting important details.
- Download and compare file size.
- Serve responsive variants when needed.
- Test the live page on mobile and a slower connection.