Web Image Optimization for Designers: Formats, Dimensions, and Export Settings

Overview

The best image format for a website depends on the asset’s visual structure, not on a universal rule. A photograph usually needs a format that handles continuous tones efficiently. A logo or interface icon may need scalable geometry or transparency. An animated graphic has different requirements again.

Start by separating four decisions:

1. Format: Choose AVIF, WebP, JPEG, PNG, or SVG according to the image content and required features.
2. Dimensions: Export enough pixels for the largest intended display size, while providing smaller responsive variants where useful.
3. Compression: Reduce file weight until the image remains visually appropriate at its actual display size.
4. Delivery: Use descriptive filenames, meaningful alternative text, and a handoff that tells developers or editors how each file should be used.

File dimensions and file size are different. A large image can be heavily compressed and still be unnecessarily wide; a small image can have a large file size because it contains excessive metadata or inefficient encoding. Check both before publishing.

Format comparison

For a deeper icon-specific decision, see SVG vs PNG Icons. The same principle applies to brand marks, UI icons, and decorative illustrations: use vector files when the artwork is genuinely vector-based, not simply because SVG is available.

Checklist by scenario

Hero images and large photographs

• Identify the largest display area across desktop and wide layouts.
• Crop for the composition, subject placement, and likely mobile framing rather than scaling one crop everywhere.
• Export a modern format such as WebP or AVIF when the delivery workflow supports it, with a suitable fallback if required.
• Keep a JPEG version available for workflows that require broad compatibility or editorial reuse.
• Compare the image at its real rendered size, including on a smaller screen. A technically sharp source can still appear poorly framed.
• Write alt text that describes the image’s useful meaning, not every visible object.

For composition and responsive cropping ideas, the website hero photo selection and cropping guide provides a useful companion workflow.

Illustrations, posters, and campaign graphics

• Decide whether text must remain selectable, searchable, or accessible. If so, do not treat a text-heavy image as a replacement for HTML content.
• Use WebP or AVIF for complex raster illustrations when the platform supports them.
• Use PNG for transparency or crisp, limited-color detail when modern formats introduce rendering or workflow issues.
• Export separate crops for cards, banners, and social previews when their aspect ratios differ substantially.
• Check small-size legibility. Fine lines and small type that work in the design file may disappear on a phone.

Logos, icons, and UI assets

• Prefer SVG for responsive logos, interface icons, and simple geometric artwork when the source is vector.
• Provide PNG fallbacks where a receiving system cannot use SVG or where a raster preview is explicitly required.
• Check the viewBox, intrinsic dimensions, stroke alignment, and fill colors before delivery.
• Test light and dark backgrounds, focus states, and small rendered sizes.
• Do not embed important text in an icon without providing an accessible label or adjacent HTML text.

Transparent, animated, or decorative assets

• Confirm that transparency is actually needed. Removing an unused transparent background can simplify delivery.
• For animation, define the purpose, duration, looping behavior, and reduced-motion alternative before export.
• Use CSS for simple interface shapes, gradients, and decorative effects when it can replace a downloaded image.
• For textures and patterns, compare a small seamless tile with a large raster background. A reusable tile may be more efficient and easier to update.

When working with texture packs, review the guidance on choosing and using seamless textures so the web export remains useful beyond one page.

What to double-check

Dimensions and responsive variants

Measure the component in the design system or browser layout before exporting. For a content image that displays at about 600 CSS pixels, an export around 600 pixels wide may be sufficient in some contexts, while a higher-density display may benefit from a larger variant. The correct choice depends on the layout, viewing distance, source quality, and performance budget.

Rather than creating many arbitrary sizes, define a small set of purposeful variants, such as thumbnail, card, content, and large display. Name them clearly and tell the developer or CMS which is the default. Responsive image markup can then select an appropriate file for the available space and device.

Quality and compression

Compression settings should be judged visually, not by a number alone. Inspect faces, gradients, foliage, shadows, small type, and high-contrast edges. Lossy compression can create ringing, blockiness, banding, or color shifts. Lossless compression preserves pixels but may produce a file that is larger than necessary.

Run exports through an image optimizer after the design application if the workflow allows it. Keep the original editable file separate from the delivery file, and retain an uncompressed master when future crops or format changes are likely.

Accessibility and metadata

• Write concise alt text for informative images.
• Use empty alt text for purely decorative images when the implementation supports that treatment.
• Do not repeat a nearby caption or link label unnecessarily.
• Maintain sufficient contrast in graphics that contain essential text, and provide the information in HTML when practical.
• Check orientation, color profile, filename, and metadata before uploading.

A palette tool can help with color decisions, but it does not replace a contrast check. If a campaign graphic depends on text inside the image, test the actual exported file rather than only the source document.

Common mistakes

1. Uploading the original design file: PSD, AI, and oversized source exports are for editing, not routine browser delivery.
2. Using one image for every placement: A wide hero crop rarely works equally well in a square card or narrow mobile banner.
3. Choosing PNG for every image: PNG is useful, but photographs and complex artwork often deserve a more suitable format.
4. Scaling with CSS alone: Visually shrinking a very large file does not remove the download cost.
5. Compressing repeatedly: Re-saving a lossy image through several applications can compound artifacts. Keep a master and generate delivery files from it.
6. Ignoring CMS limits: Confirm accepted extensions, maximum upload dimensions, automatic resizing behavior, and whether the CMS changes filenames or quality.
7. Leaving filenames meaningless: Names such as hero-final-2.jpg make review and replacement harder. Use a consistent system described in this design asset organization guide.
8. Forgetting licensing: Optimization does not change usage rights. Confirm that stock photos, textures, icons, and other creative assets are cleared for the intended website and campaign.

When to revisit

Review this workflow before a major site launch, seasonal campaign, redesign, or CMS migration. It is also worth revisiting when a page introduces new asset types, such as animation, product galleries, high-resolution editorial images, or a large library of icons.

Browser support, CMS behavior, compression tools, and performance guidance can change. Recheck the receiving environment before standardizing a new format, especially when moving to AVIF, changing responsive image rules, or replacing a third-party optimization service. Test representative assets rather than relying on one successful sample.

A practical handoff checklist

• Group files by page, component, or campaign.
• Use descriptive names that include the subject and intended placement.
• Include dimensions, format, and any fallback relationship in a short readme or handoff note.
• Provide the recommended alt text or explain whether the image is decorative.
• List crop variations and identify the preferred default.
• Open every delivery file after optimization and inspect it at both large and small sizes.
• Upload a test asset to the actual CMS or staging environment before exporting a complete batch.
• Record the export date and source file location so the asset can be regenerated later.

Save this checklist with the project assets and update it when the workflow changes. A repeatable export process helps designers protect visual quality while giving developers and editors files that are easier to publish, maintain, and replace.