In short
Optimize images by serving modern formats (WebP/AVIF) at the actual display size, compressing without visible quality loss, writing descriptive alt text for every meaningful image, and lazy-loading everything below the fold — this improves both load speed and image search visibility together.
Why images are usually the biggest problem
On most pages, images account for the largest share of total page weight by far — often more than all the HTML, CSS, and JavaScript combined. An unoptimized hero image alone can undo every other performance improvement on a page. The good news: image optimization is one of the highest-leverage, lowest-effort fixes available.
Choosing the right format
- WebP — supported by all modern browsers, typically 25-35% smaller than an equivalent-quality JPEG.
- AVIF — even smaller than WebP in many cases, with growing browser support; worth using where available, with a WebP or JPEG fallback.
- SVG — for logos, icons, and illustrations that are vector-based; infinitely scalable and typically tiny in file size.
- JPEG/PNG — fine as fallbacks, but shouldn't be the primary format for anything user-facing anymore.
Sizing correctly
Serve images at the size they're actually displayed, not a large master file scaled down by CSS. A 3000px-wide photo displayed in a 600px-wide container wastes most of its download weight on pixels nobody sees. Use srcset and sizes to serve different resolutions for different viewport widths and pixel densities.
Compression without visible quality loss
Modern compression tools can typically cut file size by 50-80% with no visible difference at normal viewing distance. Compress every image before upload — don't rely on a CMS to do it automatically unless you've verified it actually does. A quality setting around 75-85% (rather than 100%) is usually visually indistinguishable but meaningfully smaller.
Writing alt text that actually helps
Alt text serves two purposes: accessibility (screen readers read it aloud) and search (it's one of the only text signals attached to an image). Write a specific, accurate description of what's in the image — "team standing outside the studio entrance," not "image1.jpg" or, at the other extreme, a keyword-stuffed sentence. Purely decorative images (a background texture, a divider) should have an empty alt="" so screen readers skip them.
Lazy loading, done correctly
Add loading="lazy" to every image below the initial viewport — this defers their download until the user scrolls near them, which meaningfully speeds up initial page load. Never lazy-load the hero image or anything visible without scrolling; that delays the most important visual content on the page and actively hurts Largest Contentful Paint, one of the Core Web Vitals.
Image sitemaps and search visibility
For sites where image search traffic matters (product photography, portfolios, recipes), a dedicated image sitemap or <image:image> entries in your regular sitemap help search engines discover and index images they might otherwise miss, especially ones loaded via JavaScript.
A quick checklist
Modern format, correctly sized for its display width, compressed, descriptive alt text, lazy-loaded if below the fold, eagerly-loaded if above it. Five checks, applied consistently, usually fix the majority of a site's image-related performance and search problems.
Common questions
Should every image have alt text?
Every meaningful image should. Purely decorative images should have empty alt="" rather than no attribute at all, so screen readers correctly skip them instead of guessing.
Does lazy loading hurt SEO?
Not when done correctly — search engine crawlers generally handle standard lazy loading fine. The risk is lazy-loading above-the-fold images, which hurts perceived load speed and Core Web Vitals, not search indexing directly.
WebP or AVIF — which should I use?
AVIF where support and tooling allow, with a WebP or JPEG fallback for older browsers — most modern image pipelines can generate all three automatically from one source file.