Website Image Optimization Checklist 2026

Large images are the #1 cause of slow page loads and poor Core Web Vitals scores. Every 100KB saved is 100KB less data transfer.

On a 4G connection, a 500KB image takes ~1.2 seconds to download. A 2MB image takes 5+ seconds — long enough for visitors to bounce.

At 80% quality, file size drops 50–60% with no visible quality loss at normal viewing distances. The human eye cannot perceive the difference at 100% zoom.

Professional photographers use 80–85% for web galleries. E-commerce sites use 75% for product pages. Social media uses 70% for fast uploads.

The Largest Contentful Paint (LCP) image directly affects your Google PageSpeed score and is a confirmed Google ranking factor.

Your hero image is what Google measures for LCP. If it's over 100KB, you will almost certainly score below 80 on mobile PageSpeed. Convert to WEBP for an additional 25–35% reduction.

Verify dimensions, file size, and get optimization recommendations before going live. A single unoptimized image can tank your entire PageSpeed score.

Run every image through the Quality Checker to confirm: (1) dimensions match display size, (2) file size is under target, (3) format is appropriate for the content.

WEBP achieves 25–35% smaller files than JPEG at equivalent quality. Google recommends it in PageSpeed Insights and Core Web Vitals documentation.

Serve WEBP with a JPEG fallback using the HTML picture element. 97% of users will get the smaller WEBP; older browsers seamlessly fall back to JPEG.

PNG is lossless and supports transparency, but produces much larger files than JPEG for photos — typically 3–5× larger.

A 1920×1080 photo as PNG is ~1.8 MB. The same photo as JPEG 80% is ~215 KB. The same photo as WEBP 80% is ~142 KB. Format choice is the single biggest file size decision.

PNG photos are 3–5× larger than equivalent JPEG files. Converting saves significant bandwidth and improves load times dramatically.

Many users upload camera screenshots or phone photos saved as PNG by default. Converting these to WEBP often reduces file size by 80–90% with identical visual quality.

WEBP has 97%+ browser support, but a JPEG fallback ensures compatibility with older browsers and email clients.

Use the HTML picture element: <picture><source srcSet='image.webp' type='image/webp'><img src='image.jpg' alt=''></picture>. This pattern is supported by all modern browsers and degrades gracefully.

A 4000×3000px image displayed at 800×600px wastes 25× the pixels. The browser still decodes all 12 million pixels.

Always resize first, then compress. Resizing to display dimensions often reduces file size by 60–80% before any compression is applied. For retina displays, serve at 2× CSS width up to 1600px max.

Retina and HiDPI displays need 2× resolution for crisp images, but going beyond 1600px wide is rarely perceptible for web.

A 1600px-wide image displayed at 800 CSS pixels looks identical to a 4000px-wide image on a 4K monitor. The extra 2400 pixels add zero perceived quality but 3× the file size.

Avoid browser-side cropping which wastes bandwidth loading pixels that are hidden by CSS overflow.

If your layout needs a 16:9 hero image, crop to 16:9 before uploading. A 4:3 image cropped by CSS still transfers all the hidden pixels — typically 33% extra data for no benefit.

Each platform (Shopify, WordPress, Instagram) has specific dimension requirements for best display.

Instagram crops non-square images. YouTube adds black bars to wrong ratios. Amazon rejects images below 1000px. Uploading at the exact recommended size prevents platform-side degradation.

Alt text helps Google understand image content and improves accessibility for screen readers. It's also a legal requirement under WCAG 2.1.

Good alt text: 'handcrafted tan leather wallet with brass clasp on wooden table'. Bad alt text: 'image.jpg' or 'photo'. Descriptive alt text helps your images rank in Google Image search.

File names like 'product-red-sneakers-size-10.jpg' help Google index images for relevant searches and improve semantic understanding.

Google reads file names. 'IMG_4921.jpg' tells Google nothing. 'mens-running-shoes-nike-air-max-blue.jpg' tells Google exactly what the image contains. This directly affects Google Image search rankings.

EXIF data adds unnecessary file size (5–15 KB per image) and may expose GPS location or device information — a privacy risk.

EXIF data includes camera model, date/time, and potentially GPS coordinates. For 50 images, stripping EXIF saves 250–750 KB total and protects your privacy. Use our EXIF Remover.

Schema.org markup for images can enable rich results in Google Search, increasing click-through rates by 20–30%.

Add Product schema with image URLs for e-commerce. Add Article schema with featuredImage for blog posts. Use HowTo schema with image URLs for step-by-step guides. Test with Google's Rich Results Test.

Prevents layout shift (CLS) by telling the browser exactly how much space the image will occupy before it loads.

CLS above 0.1 is flagged as 'poor' in Core Web Vitals and hurts Google rankings. Without width/height, the browser reserves zero space, then jumps content downward when the image loads — a jarring user experience.

Lazy loading defers loading of off-screen images, improving initial page load time and reducing data transfer.

Add loading='lazy' to all images below the fold. For a typical blog post with 8 images, lazy loading the bottom 6 images can reduce initial page weight by 60–70%. Never lazy load the hero/LCP image.

Adding <link rel='preload'> for the hero image can improve LCP scores by 0.5–1.5 seconds on slow connections.

Place <link rel='preload' as='image' href='/hero.webp' type='image/webp'> in the document <head>. This tells the browser to start loading the hero image before it encounters the HTML img tag.

CDNs serve images from edge servers geographically close to your visitors, reducing latency by 70–85% for international traffic.

For a visitor in Sydney accessing a server in New York, a CDN reduces image load time from 800ms to 120ms. Popular options: Cloudflare (free tier), BunnyCDN ($0.01/GB), AWS CloudFront. Most CMS platforms include CDN support.

Watermarks protect your copyright and brand your images when shared on social media — 30% of Pinterest pins are re-pinned without attribution.

Place watermarks in a corner where they don't obstruct the main subject. Use 30–50% opacity white text with a subtle shadow for visibility without distraction. Our Watermark tool handles this automatically.

Photos taken on smartphones contain GPS coordinates in EXIF data — a serious privacy and security risk.

EXIF GPS data is accurate to within 5–10 meters. Posting a photo with GPS data on social media reveals your home address, workplace, or travel locations. Always strip EXIF before publishing personal photos.

Favicons appear in browser tabs, bookmarks, and search results — essential for brand recognition and professionalism.

A favicon should be a 32×32px PNG or a multi-resolution ICO file. Modern browsers also support SVG favicons for infinite scalability at any size. Our Favicon Generator creates all formats automatically.