How Expert Web Developers Optimize Images for Performance and SEO

BoldDisplaying an image on a website may seem straightforward, just drop in an <img src=""> tag, right? Not quite. Optimizing images is one of the most critical steps in creating a fast, accessible, and SEO-friendly website. Proper image sizing, formatting, and delivery can dramatically impact load times, layout stability, and user experience.

Airtight’s Lead Front-End Developer, John Graham, recently shared best practices during a Wednesday Workshop on image optimization. In this article, you will read a summary of his expert insights.

Key Questions to Ask When Working with Images

Whether you’re adding content images or building reusable components, start by asking yourself:

• What is the maximum size this image will be viewed at?
• Is this image responsive?
• Has the image file been properly prepared and optimized?
• Is it being served in a modern format (like WebP)?
• Does the image have explicit dimensions in the code?
• Should the image be lazy loaded?
• Should the image be preloaded for better performance?

6 Tips for Ensuring Images are Set Up for Optimal Performance.

1. Determine the Maximum Image Size Full-width desktop images should typically be 1900px to 2500px wide. Wider screens may require larger breakpoints, but you should never load images that are 8000px wide into a browser, it’s wasteful and slows performance.

Example: If a breakpoint is 1024px, your image should be no wider than 1024px. For mobile breakpoints (e.g., 768px), ensure the mobile version of the image doesn’t exceed that width.

Content images should always be sized as closely as possible to their displayed dimensions across breakpoints. Use WordPress’s built-in image size functions to automate this or define custom sizes as needed.

add_image_size( 'custom-thumbnail', 400, 400, true );

2. Make Sure Images Are Responsive Responsive images automatically serve the optimal size for each device, saving bandwidth and improving performance.

Use the srcset and sizes attributes on inline images: <img src="image-1024.jpg" srcset="image-768.jpg 768w, image-1024.jpg 1024w, image-1900.jpg 1900w" sizes="(max-width: 768px) 768px, (max-width: 1024px) 1024px, 1900px" alt="Example image">

If you need completely different images for different breakpoints (such as for hero banners or complex designs), use the <picture> element: <picture> <source media="(max-width: 768px)" srcset="hero-mobile.jpg"> <source media="(min-width: 769px)" srcset="hero-desktop.jpg"> <img src="hero-desktop.jpg" alt="Hero image"> </picture>

For background images, use CSS media queries to serve different versions by screen size. @media (max-width: 768px) { .hero { background-image: url('hero-mobile.jpg'); } }

Tip: Use WordPress’s built-in image functions like wp_get_attachment_image(), which outputs responsive images by default. Always specify the $size argument to ensure the correct file is used.

3. Prepare Image Files Properly Before uploading, make sure your images are optimized and correctly formatted:

• Resize images to the maximum needed dimensions.
• Choose the right format:
• *JPEG (.jpg) for photos
• PNG for images needing transparency
• SVG for vector graphics and icons
• Use “Save for Web” settings to balance quality and file size.
• Avoid unnecessary transparency or extra metadata.

4. Define Explicit Image Sizes in Code Defining explicit width and height attributes helps browsers calculate layout faster, preventing Cumulative Layout Shifts (CLS) — a key Core Web Vitals metric for SEO.

Also, use CSS properties like aspect-ratio and object-fit to maintain consistent layout and prevent distortion. img { aspect-ratio: 4 / 3; object-fit: cover; max-width: 100%; }

5. Lazy Load and Preload Strategically Lazy load images that appear below the fold to improve initial page load times. Most modern browsers support the loading="lazy" attribute natively: <img src="image.jpg" loading="lazy" alt="Deferred image">

Avoid lazy loading hero images or other assets above the fold — doing so can cause layout shifts. Instead, consider preloading these images to improve performance:

For hero sliders, only preload the first image to balance speed and efficiency.

6. Use Modern Image Formats Modern formats like WebP offer significantly smaller file sizes compared to traditional JPEGs and PNGs, while maintaining excellent visual quality.

• Convert and serve WebP where possible.
• Let your CMS or CDN handle automatic conversion and delivery:
• WordPress Plugins: Smush Pro supports WebP optimization for both uploads and theme directories.
• CDNs: Many, like Cloudflare, offer on-the-fly image optimization and WebP delivery.

Pro Tip: Always optimize and resize your image before conversion. File format alone doesn’t fix poor optimization.