Image Optimization Best Practices: Complete Checklist

Introduction

Image optimization isn’t a one-time fix—it’s an ongoing process that spans everything from choosing the right format and compression to delivery and monitoring. This checklist walks you through practical best practices for every step, from creating images to long-term site maintenance.

Use this guide to build a solid image optimization workflow. You’ll cut page weight by 60–80%, boost Core Web Vitals, and deliver a faster, smoother experience for every user, on any device or connection.

Phase 1: Image Creation and Preparation

✓ Start with the Right Source

• Begin with the highest quality source—you can always compress later, but lost quality can’t be restored.
• Capture photos in RAW when possible for more editing flexibility.
• Design graphics as vectors (SVG) whenever you can—they scale cleanly and keep file sizes small.
• Keep your asset library organized by storing originals separately from optimized versions.

✓ Choose the Right Dimensions

• Only upload images at their display size—for example, don’t upload a 2000px image for a 400px-wide thumbnail.
• Support retina screens by providing 1.5x or 2x versions for high-DPI devices.
• Export images at multiple sizes for responsive layouts: thumbnail (150–300px), small (400–600px), medium (800–1000px), large (1200–1600px), xlarge (1920–2400px).
• Crop images thoughtfully so the most important content is visible at every size.

✓ Optimize Before Uploading

• Strip unnecessary metadata such as EXIF, camera info, and GPS coordinates (unless you need them).
• Crop images closely to remove empty space and focus on the subject.
• Convert to sRGB color profile for web, unless you require a wider gamut.
• Sharpen images lightly—over-sharpening introduces artifacts and hurts compression.

Phase 2: Format Selection

✓ Choose the Right Format for Each Image Type

• Photographs: Choose JPEG, WebP (lossy), or AVIF.
• Graphics with few colors: Choose PNG-8 or WebP (lossless).
• Graphics with many colors: Choose PNG-24 or WebP (lossless).
• Logos and icons: Use SVG whenever possible, or fallback to PNG.
• Images with transparency: Choose PNG or WebP with alpha channel.
• Simple animations: Use MP4/WebM video or WebP animation (avoid GIF).

✓ Implement Modern Format Delivery

• Serve AVIF to browsers that support it (Chrome, Edge, Opera, Firefox).
• Serve WebP for most users (over 95% browser support).
• Offer JPEG/PNG as fallbacks for older browsers.
• Use the picture element to deliver the best format based on browser support.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Phase 3: Compression and Optimization

✓ Apply Appropriate Compression

• Set JPEG quality to 80–85 for most photos.
• Use JPEG quality 85–90 for hero or product images.
• Lower JPEG quality to 70–75 for thumbnails and backgrounds.
• Use lossless compression for logos, screenshots, and graphics.
• Always export JPEGs only once—repeated saves degrade quality.

✓ Use Advanced Compression Tools

• MozJPEG for JPEGs—usually gets 5–10% smaller files than standard encoders.
• oxipng or pngquant for PNGs—often shrinks files by 30–70%.
• cwebp for WebP—Google’s encoder with flexible quality settings.
• avifenc for AVIF—encoding can be slow but is ideal for key images.
• SVGO for SVG—removes extra code and optimizes paths.

✓ Automate Optimization

• Add optimization to your build pipeline so images are processed automatically.
• Leverage image CDNs like Cloudinary or Cloudflare Images for on-the-fly optimization.
• Set up CI/CD checks to block oversized images from being deployed.
• Create presets for each image type (hero, product, thumbnail) with the right settings.

Phase 4: Responsive Images

✓ Implement srcset for Different Screen Sizes

• Export several sizes for each image (at least 400px, 800px, 1200px, 1600px, 2000px).
• Use the srcset attribute so browsers pick the best size automatically.
• Add the sizes attribute to help browsers choose more efficiently.
• Offer 1x and 2x versions for retina and high-DPI screens.

<img
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w,
    image-1600.jpg 1600w
  "
  sizes="
    (max-width: 400px) 100vw,
    (max-width: 800px) 90vw,
    (max-width: 1200px) 80vw,
    1200px
  "
  src="image-800.jpg"
  alt="Responsive image"
  width="800"
  height="600"
>

✓ Use Art Direction When Needed

• Provide different crops for different screens using the picture element.
• Show portrait crops on mobile and landscape crops on desktop.
• Highlight key content at each size (for example, zoom in on faces for mobile).

<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="Hero image" width="1200" height="600">
</picture>

Phase 5: Loading Strategies

✓ Implement Lazy Loading

• Use native lazy loading (loading="lazy") for all images below the fold.
• Don’t lazy load above-the-fold images—especially your LCP (Largest Contentful Paint) image.
• Set loading="eager" for critical images to prioritize them.
• Try IntersectionObserver if you want more control over lazy loading.
• Show placeholders or skeletons while lazy images load.

✓ Prioritize Critical Images

• Preload your LCP image so it starts loading right away.

<link rel="preload" as="image" href="hero.jpg">

• Add fetchpriority="high" to important images.
• Don’t hide above-the-fold images with CSS or JavaScript at first load.
• Place critical image tags early in your HTML for faster discovery.

✓ Prevent Layout Shifts

• Always set width and height attributes on img tags.
• Use CSS aspect-ratio to keep image proportions with responsive layouts.
• Reserve space for images before they load, to avoid shifting content.
• Don’t add images dynamically unless you’ve reserved space for them.

Phase 6: Delivery and Caching

✓ Use a CDN

• Serve images from a CDN to lower latency for users worldwide.
• Pick a CDN with image optimization features—automatic resizing and format conversion saves time.
• Enable HTTP/2 or HTTP/3 for faster loading of many images.
• Consider a separate domain for images to avoid sending cookies.

✓ Set Optimal Cache Headers

• Cache images for one year: Cache-Control: public, max-age=31536000, immutable.
• Add the immutable directive to avoid unnecessary revalidation.
• Use version numbers or hashes in filenames for easy cache busting.
• Keep image URLs consistent to maximize browser caching.

✓ Enable Compression

• Enable Brotli compression for HTML, CSS, and JS (not for images—they’re already compressed).
• Don’t re-compress images with gzip or Brotli—it wastes CPU and doesn’t help.
• Serve pre-compressed assets when you can to lighten server load.

Phase 7: Accessibility and SEO

✓ Provide Descriptive Alt Text

• Write clear, meaningful alt text that describes the image and its context.
• Keep alt text short (under 125 characters for screen readers).
• Use empty alt="" for purely decorative images.
• Avoid starting with "image of"—screen readers already announce images.

✓ Optimize for SEO

• Use descriptive filenames (e.g., red-running-shoes.jpg instead of IMG_1234.jpg).
• Add structured data (schema.org) for product images.
• Create an image sitemap to help search engines find your images.
• Include descriptive text around images to give search engines more context.

✓ Support Dark Mode

• Offer dark mode versions for images with light backgrounds.
• Use the picture element with prefers-color-scheme to switch images automatically.

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
  <img src="logo-light.png" alt="Company logo">
</picture>

Phase 8: Monitoring and Maintenance

✓ Monitor Performance Metrics

• Track Core Web Vitals using Google Search Console and real user monitoring tools.
• Keep LCP (Largest Contentful Paint) under 2.5 seconds.
• Keep CLS (Cumulative Layout Shift) under 0.1.
• Measure total page weight and see how much is from images.
• Set up alerts if pages exceed your weight targets.

✓ Regular Audits

• Run monthly audits with Google PageSpeed Insights.
• Look for unoptimized images in your CMS or upload folders.
• Spot opportunities to upgrade formats (like converting old JPEGs to WebP).
• Check new content for compliance with your optimization guidelines.
• Test on real devices and networks regularly.

✓ Continuous Improvement

• Keep up with new formats and techniques (like AVIF, JPEG XL).
• Try new optimization tools as they’re released.
• Experiment with quality settings and monitor the results.
• Run A/B tests on image optimization to see real business impact.

Phase 9: Common Pitfalls to Avoid

⚠️ Don't Make These Mistakes

• ❌ Using PNG for photographs → Choose JPEG, WebP, or AVIF instead.
• ❌ Using JPEG for logos/graphics → Choose PNG, SVG, or WebP lossless.
• ❌ Scaling images with CSS/HTML → Resize images to match their display size.
• ❌ Lazy loading above-the-fold images → Never lazy load your LCP image.
• ❌ Omitting width/height attributes → Always specify dimensions to prevent layout shifts.
• ❌ Over-compressing product images → Quality below 75 can hurt conversions.
• ❌ Serving only modern formats → Always provide fallbacks for older browsers.
• ❌ Not testing on mobile → With 60%+ of traffic on mobile, always test there first.
• ❌ Skipping accessibility → Alt text is essential, not optional.
• ❌ Using GIF for animations → Use MP4/WebM video or WebP animation instead.

Quick Reference Checklist

Conclusion

Image optimization is an ongoing journey. By applying these best practices—from the moment you create an image to delivery and regular monitoring—you’ll keep your site fast, user-friendly, and cost-effective.

Start with the basics: compression, lazy loading, and using the correct dimensions. Then layer on modern formats, responsive images, and automation. Each improvement adds up, and even small tweaks across many images can make a big difference in performance.

Optimizing images pays off in better Core Web Vitals, improved SEO, faster load times, and higher conversions. Invest the time—it's one of the best returns you'll see for your website.

Sources and References