Website image optimization: dimensions, formats and loading

Start with the display slot

A photo displayed in a small card rarely needs the camera's original dimensions. Measure its display width and consider higher-density screens. For a 600 CSS-pixel slot, compare sources around 600 and 1200 pixels instead of increasing size without a limit. This tool can downscale using longest-edge presets. Prepare other exact dimensions separately when needed.

Compare formats using actual files

WebP can help with many web photos, but an optimized JPEG may still be smaller for a particular image. Transparent assets also need an alpha channel, which JPEG cannot preserve. Record candidate file sizes and inspect them in the intended browser. Your content management system and client support remain part of the format decision.

Loading behavior matters too

Developers can use srcset and sizes to select resources for different slots, and width and height or aspect-ratio to reserve layout space. A critical first-screen image has different loading needs from an illustration far down the page; do not lazily load everything indiscriminately. An image encoder provides files but cannot change your HTML, caching rules or server response.

Image SEO goes beyond a filename

Use descriptive filenames and accurate alternative text for meaningful images; purely decorative images can use empty alt text. Repeating keywords does not improve the description. Check actual transfers in the browser network panel and measure the finished page. Smaller files alone do not guarantee a performance score, search position or indexing date.

Checklist

• Match sources to display needs and distinguish CSS from image pixels
• Reserve layout space and verify the resource actually requested
• Write useful alternative text and measure page performance