Prepare website images for speed and accessibility

1. Start with the displayed size

Find out how large the image appears in your layout. A small article thumbnail rarely needs the same dimensions as a full-width hero image. Keep the original source so that you can produce different sizes later.

Use Image Compressor & Converter to set maximum dimensions. It preserves proportions and avoids enlarging smaller originals. For responsive websites, export suitable variants and configure srcset and sizes in the site code; the converter does not add responsive markup for you.

2. Compare formats using the actual image

Try WebP and JPEG for photographs, and consider PNG when lossless detail or transparency is important. WebP also supports transparency. The smallest acceptable output depends on the image, dimensions, and browser encoder.

Compare the preview and file size before downloading. A conversion can make an already optimized file larger. The quality slider applies to lossy formats; PNG output ignores it. JPEG uses a white background where the source was transparent.

• Inspect small text, edges, and faces at the intended display size.
• Keep a transparent format for logos that need it.
• Use descriptive filenames that help you manage assets.

3. Describe meaning, not keywords

Write alt text according to the image's purpose in its page. Explain relevant information conveyed by the image, rather than repeating a filename or filling the attribute with search terms.

The Bulk Alt Text Helper can provide a filename-based starting point, but it does not understand every image's purpose. Review every suggestion. Purely decorative images usually need an empty alt attribute; complex diagrams may need a fuller explanation in the surrounding text.

Instead of: image-seo-best-chart.png
Consider: Bar chart comparing image sizes before and after WebP conversion

4. Create a separate social preview when useful

Use Social Image Designer to create a readable headline and brand image. The 1200 × 630 preset is a useful starting point for link previews, but platforms can crop images differently.

Download the PNG, upload it to a public URL on your website, and reference that URL in your Open Graph tags. A local download or blob URL cannot be fetched by a social platform. Use Social Card Previewer to review the layout, then test the actual shared link.

• Keep important text away from the edges.
• Check that the image URL is accessible without signing in.
• Expect platforms to cache previous versions of a shared image.

5. Check the page after replacing assets

Confirm that the new image appears at the correct size on both small and large screens. Check width and height attributes or reserved layout space to reduce movement while images load.

Keep the main content image available promptly; do not automatically lazy-load every image. Recheck page performance after deployment and keep the version whose visual quality and loading behavior suit the page.