Images make up about 50% of the average web page's total weight. They're also one of the most overlooked sources of organic traffic. Google Image Search drives billions of visits per month, and properly optimized images improve both your page speed and your visibility in search results.
Here's how to optimize every image on your site, from file naming through delivery.
Start with File Names
Before you upload an image, rename the file. Search engines read file names as a signal about the image's content. IMG_4829.jpg tells Google nothing. blue-ceramic-coffee-mug.jpg tells Google exactly what the image shows.
File naming best practices:
- Use lowercase letters and hyphens between words
- Be descriptive but concise (3-6 words is usually right)
- Include your target keyword if it fits naturally
- Avoid generic names like
photo1.jpgorbanner-final-v2.jpg
Rename files before uploading. While you can change alt text later, renaming files after upload often means the old file name stays in the URL.
Write Alt Text That Actually Helps
Alt text serves two purposes: it describes the image for screen readers (accessibility), and it gives search engines text to associate with the image. Good alt text does both.
- Describe what the image shows. "A woman using a laptop at a standing desk in a modern office" is useful. "Image" or "photo" is not.
- Keep it under 125 characters. Screen readers sometimes cut off longer text.
- Include keywords naturally, not forcefully. "Standing desk setup for home office" works. "Best standing desk standing desk for home office buy standing desk" is keyword stuffing.
- Skip decorative images. If an image is purely decorative (like a divider or background texture), use an empty alt attribute:
alt="". This tells screen readers to skip it.
Every content image on your site should have alt text. Leaving it blank is a missed opportunity for both SEO and accessibility.
Choose the Right Image Format
Using the wrong format can double or triple your file sizes without any visible quality difference.
WebP
WebP is the best general-purpose format for the web in 2026. It produces files 25-35% smaller than JPEG at the same visual quality, and it supports transparency (replacing PNG for most use cases). Browser support is now universal across Chrome, Firefox, Safari, and Edge.
AVIF
AVIF offers even better compression than WebP, typically 30-50% smaller at equivalent quality. Browser support has caught up significantly, with Chrome, Firefox, and Safari all supporting it. The tradeoff is slower encoding time, which matters if you're processing images dynamically.
When to Use JPEG, PNG, or SVG
- JPEG is still fine as a fallback for older systems, but WebP should be your default for photos
- PNG makes sense only when you need lossless quality for screenshots or images with text overlays where WebP artifacts would be visible
- SVG is perfect for logos, icons, and illustrations. SVGs are vector-based, so they scale to any size without quality loss and are usually tiny in file size
Resize Before Uploading
Never upload a 4000x3000 pixel image when it displays at 800x600 on your page. The browser downloads the full file and then scales it down, wasting bandwidth and slowing your page.
Resize images to the maximum size they'll actually display at. For most content images on a blog or business site, that's typically 1200-1600 pixels wide. Hero images might need 1920 pixels wide for full-width displays.
For WordPress users, the built-in media library generates multiple sizes automatically. Make sure your theme's content width matches the sizes being generated so you're not serving oversized versions.
Implement Responsive Images
Different visitors have different screens. A phone on a cellular connection doesn't need the same image as a desktop on fiber. The srcset attribute lets you serve the right size to each device:
This tells the browser which sizes are available and lets it choose the most appropriate one based on the viewport width and device pixel ratio. Combined with the sizes attribute, you get precise control over which image loads on which device.
WordPress handles responsive images automatically for images inserted through the editor. For custom themes or static sites, you'll need to implement srcset manually or use a build tool.
Lazy Load Below-the-Fold Images
Lazy loading delays the download of images that aren't visible when the page first loads. As the visitor scrolls down, images load just before they enter the viewport.
The simplest implementation is the native loading="lazy" attribute, which is supported by all modern browsers. Add it to every image except your above-the-fold content:
- Do NOT lazy load your hero image or LCP element. Those need to load immediately.
- Do NOT lazy load images visible in the initial viewport. This actually hurts performance.
- Do add
loading="lazy"to everything below the fold: blog post images, product thumbnails in lower sections, team photos, etc.
WordPress 5.5+ adds lazy loading automatically. If you're managing images manually, it's one attribute per <img> tag.
Use a CDN for Image Delivery
A Content Delivery Network caches your images on servers around the world. When someone in Tokyo visits your site hosted in Dallas, the CDN serves the image from a server in Tokyo instead of making the request travel across the Pacific.
Many CDNs also offer on-the-fly image optimization: automatic WebP conversion, resizing, and quality adjustment based on the requesting device. Cloudflare, BunnyCDN, and imgix are popular options.
Compress Without Visible Quality Loss
Most images contain more data than the human eye can perceive. Compressing them removes that invisible excess.
- For JPEGs, a quality setting of 80-85% is visually indistinguishable from 100% but can cut file size by 40-60%
- For WebP, quality 75-80% strikes the best balance
- Tools: ShortPixel, Imagify, and Squoosh (free, browser-based) all do excellent compression
If you're running WordPress, install an image optimization plugin that compresses on upload. This way you never forget.
Add Images to Your Sitemap
Google supports image sitemaps, which help your images get indexed faster. You can either create a separate image sitemap or add <image:image> tags to your existing sitemap entries. Yoast SEO and Rank Math both include images in their sitemaps automatically.
Putting It All Together
Every image you publish should go through this checklist:
- Descriptive file name with hyphens
- Resized to actual display dimensions
- Converted to WebP (with JPEG/PNG fallback if needed)
- Compressed to 80% quality
- Alt text that describes the content
- Lazy loading on below-the-fold images
- Responsive
srcsetfor different screen sizes
Fast image delivery starts with fast hosting. SpectraHost shared hosting includes NVMe storage and LiteSpeed's built-in image optimization, so your images serve quickly without extra configuration.