Image Optimization Best Practices: Complete Checklist

Introduction

Image optimization isn't a one-and-done task. It's a workflow that starts when you create an image and continues through delivery, monitoring, and updates. Get it right, and you can cut page weight by 60–80% while keeping everything looking sharp.

This checklist covers the entire pipeline—from format selection and compression to responsive delivery and CDN setup. Follow it systematically and you'll boost your Core Web Vitals scores while giving users (especially those on slower connections) a noticeably faster experience.

Phase 1: Image Creation and Preparation

✓ Start with the Right Source

• Begin with the highest quality source. You can always compress later. You can't restore quality you never had.
• Capture photos in RAW when possible—it gives you way more editing flexibility before you export.
• Design graphics as vectors (SVG) whenever you can. They scale perfectly and stay tiny.
• Keep your asset library organized. Store originals separately from optimized versions. Trust me, you'll thank yourself later when you need to re-export.

✓ Choose the Right Dimensions

• Match your image size to its display size. Don't upload a 2000×2000px image if it's only ever shown at 400px wide. That's just wasted bandwidth.
• Support retina screens by providing 1.5× or 2× versions for high-DPI devices. Most modern phones and laptops have these displays.
• Export images at multiple sizes for responsive layouts: thumbnail (150–300px), small (400–600px), medium (800–1000px), large (1200–1600px), xlarge (1920–2400px). Tedious, yes. Worth it? Absolutely.
• Crop images thoughtfully. Make sure the most important content (faces, products, key details) stays visible at every size.

✓ Optimize Before Uploading

• Strip unnecessary metadata like EXIF, camera info, and GPS coordinates. Unless you specifically need location data, it's just adding bytes.
• Crop images closely. Remove empty space and zoom in on what matters.
• Convert to sRGB color profile for web (unless you're doing professional photo work that needs wider gamut).
• Sharpen images lightly. Over-sharpening creates ugly artifacts and actually hurts compression efficiency.

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. This is the sweet spot where files stay small but quality holds up.
• Use JPEG quality 85–90 for hero images or product photos. These are front-and-center, so quality matters more.
• Lower JPEG quality to 70–75 for thumbnails and background images. Nobody's zooming in on these.
• Use lossless compression for logos, screenshots, and graphics with text. Lossy formats blur sharp edges.
• Export JPEGs only once. Every time you resave a JPEG, it loses more quality. Keep a high-quality source file and export fresh copies as needed.

✓ Use Advanced Compression Tools

• MozJPEG for JPEGs. It usually saves 5–10% more than standard encoders with no visible quality loss.
• oxipng or pngquant for PNGs. I've seen these shrink files by 30–70% depending on the content.
• cwebp for WebP. Google's official encoder gives you fine control over lossy vs lossless.
• avifenc for AVIF. Encoding is slow (seriously, grab coffee), but the results are worth it for hero images.
• SVGO for SVG. Strips out cruft from design tools and optimizes paths without changing how they render.

✓ Automate Optimization

• Add optimization to your build pipeline. Images should get processed automatically—don't rely on manual steps.
• Use image CDNs like Cloudinary or Cloudflare Images for on-the-fly optimization. They handle resizing and format conversion automatically.
• Set up CI/CD checks to block oversized images from being deployed. Nothing like a failed build to remind someone to optimize.
• Create presets for each image type (hero, product, thumbnail) with the right settings. Consistency matters.

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. It's built into browsers now—no library needed.
• Don't lazy load above-the-fold images. Especially your LCP (Largest Contentful Paint) image. This is a common mistake that tanks performance scores.
• Set loading="eager" for critical images to prioritize them explicitly.
• Use IntersectionObserver if you need more control over when images start loading (like "load when within 500px of viewport").
• Show placeholders or skeletons while lazy images load. Prevents jarring content shifts.

✓ 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. Browsers use these to reserve space before the image loads.
• Use CSS aspect-ratio to maintain proportions in responsive layouts without JavaScript.
• Reserve space for images before they load. Nothing's more annoying than text jumping around as images pop in.
• Don't add images dynamically unless you've reserved space for them. Your CLS score will thank you.

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 isn't something you do once and forget. It's a workflow that starts when you create an image and continues through delivery, monitoring, and updates. But set it up right—automate where you can, monitor what matters—and it runs itself.

Start with the fundamentals: compression, lazy loading, and correct dimensions. Then layer on modern formats, responsive images, and automation. Small improvements across dozens of images add up fast. I've seen sites go from 8-second load times to under 2 seconds just by systematically working through this checklist.

Better Core Web Vitals, improved SEO, faster load times, higher conversions—the payoff is real. Put in the work once, reap the benefits forever.

Sources and References