How to optimize images
for web and SEO

The format you choose has the single biggest impact on file size and quality. Modern formats deliver dramatically smaller files at the same visual quality compared to older standards. Here is what to use and when.

The ideal approach is to serve multiple formats using the HTML <picture> element. Offer AVIF first, WebP as fallback, and JPEG as the final fallback. The browser will automatically pick the best format it supports.

Compression reduces file size by removing data the human eye cannot easily perceive. The key is finding the sweet spot where file size drops significantly but quality remains visually identical to the original.

There are two types of compression. Lossy compression (JPEG, WebP, AVIF) permanently removes data to achieve smaller files - this is what you want for photographs on the web. Lossless compression (PNG, WebP lossless) preserves every pixel but achieves smaller reductions - better for graphics and screenshots.

Tools like Squoosh, ImageOptim, or Sharp (Node.js) let you preview the quality difference before committing. Always compare the compressed version against the original at full size before deploying.

Alt text (the alt attribute on <img> tags) serves two purposes: it describes the image for screen readers and visually impaired users, and it tells search engines what the image contains. Google uses alt text as a primary signal for image search rankings.

Good alt text is descriptive, concise, and naturally includes relevant keywords without stuffing. Instead of "photo.jpg" or "image1", write something like "golden retriever running through autumn leaves in a park". Describe what is in the image, not what it is (avoid starting with "image of" or "picture of").

For decorative images that do not add informational value (borders, spacers, background patterns), use an empty alt attribute (alt="") so screen readers skip them entirely.

Lazy loading delays the loading of images until they are about to enter the viewport. This means a page with 50 images does not download all 50 on initial load - only the ones visible on screen. The rest load as the user scrolls. This dramatically reduces initial page load time and bandwidth usage.

In modern HTML, lazy loading is as simple as adding loading="lazy" to your <img> tags. Do not lazy-load images that are visible above the fold (the first screen) - these should load immediately to avoid layout shifts and poor Largest Contentful Paint (LCP) scores.

Responsive images adapt to different screen sizes so mobile users do not download a 4000px wide image when their screen is only 400px. Use the srcset and sizes attributes to provide multiple resolutions. The browser picks the smallest version that fits the user's screen, saving bandwidth and improving load time.

Always specify width and height attributes on every image to prevent Cumulative Layout Shift (CLS) - a Core Web Vitals metric that penalises pages where content jumps around during loading.

Image file names are another SEO signal that many people overlook. Search engines read file names to understand image content. A file named sunset-over-lake-geneva.webp tells Google far more than IMG_4829.webp.

For advanced SEO, add structured data (schema.org ImageObject) to your pages. This markup tells search engines the image's caption, creator, license, and content URL. Pages with structured data are more likely to appear in Google's image search results with rich snippets.

If you watermark your images before publishing, the watermark itself becomes part of the file. For guidance on watermarking without hurting image quality, see our watermark best practices guide.

Photographers and creators face a unique challenge: they want images that look stunning on the web, load fast for SEO, and remain protected from theft. These goals can feel contradictory, but they are not - you just need a clear workflow.

Keep your original high-resolution files stored safely offline - these are your masters and your proof of authorship. For the web, export resized versions (typically 1200-2000px on the longest edge) in WebP format at quality 80. This gives you excellent visual quality at a fraction of the original file size.

Before uploading, add a watermark to your web versions. A semi-transparent watermark at 30-40% opacity will not meaningfully affect file size or load speed, but it provides visual protection that deters casual theft. After watermarking, run the image through a compression tool for a final size reduction.

For the full guide on securing your images beyond optimization, see our article on protecting photos from theft online and our watermark tutorial.