The Complete Image Optimization Checklist for 2026
Images account for 42% of total page weight on the average website (HTTP Archive 2025). This is the definitive, step-by-step image optimization checklist covering everything from format selection and compression to HTML implementation, CDN delivery, and ongoing monitoring. Bookmark this page and use it every time you add images to a website.
Table of Contents
Section 1: Before upload — preparing your images
The most impactful optimizations happen before an image ever touches your server. Every image you add to a website should go through these steps.
1. Resize to display dimensions
Never upload an image larger than its maximum display size. If an image displays at 800px wide on desktop, serving a 4000px original wastes bandwidth and processing time. Account for 2x DPR (device pixel ratio) for Retina displays: if the display size is 800px, serve a 1600px image. Going beyond 2x provides no visible benefit on any current display.
For responsive layouts, generate multiple sizes using srcset. Common breakpoints: 400px, 800px, 1200px, and 1600px. This ensures every device downloads only the pixels it needs.
Generate responsive image sizes
SammaPix Resize Pack generates multiple sizes from a single image for srcset. All processing runs in your browser.
Open Resize Pack2. Choose the right format
Format selection has a dramatic impact on file size. Use this decision tree:
- Photographs and complex images: WebP (lossy) as default. AVIF if you need maximum compression and your audience uses modern browsers.
- Screenshots, text, UI elements: PNG or WebP (lossless). These images have sharp edges that suffer under lossy compression.
- Logos and icons: SVG whenever possible. For raster logos, PNG with lossless WebP.
- Animated content: WebP animated (replaces GIF at 50-80% smaller file sizes).
Convert images to WebP
Batch convert JPG, PNG, and other formats to WebP with SammaPix. Reduce file sizes by 25-34% with no visible quality loss.
Open WebP Converter3. Compress at the right quality level
For lossy formats (JPEG, lossy WebP), quality 75-85 is the sweet spot. Below 75, artifacts become noticeable. Above 85, file size increases significantly with minimal visual improvement. Quality 80 is the best general-purpose setting, providing 60-70% file size reduction with imperceptible quality loss on screen-sized displays.
Compress images with precision
SammaPix Compress lets you set exact quality levels and see the file size reduction in real time. Browser-based, no upload.
Open Compress tool4. Strip EXIF and metadata
Every photo from a smartphone or camera contains EXIF metadata: GPS coordinates, device model, camera settings, timestamps, and sometimes even the owner's name. This data typically adds 10-50KB per image and creates privacy risks. A photo posted online with GPS data reveals the exact location where it was taken.
Strip all EXIF data before uploading images to any public-facing website. This reduces file size and eliminates privacy concerns in one step.
Remove EXIF data from photos
SammaPix EXIF Remover strips all metadata including GPS coordinates. Runs entirely in your browser for maximum privacy.
Open EXIF Remover5. Add descriptive alt text
Alt text serves three purposes: accessibility (screen readers), SEO (search engines use alt text to understand image content), and fallback display when images fail to load. Every informational image should have descriptive alt text under 125 characters. Decorative images should have an empty alt attribute (alt="").
Good alt text describes the content of the image, not the image itself. "Golden retriever catching a frisbee in a park" is better than "dog photo." Include relevant keywords naturally but never stuff keywords into alt text.
Generate alt text with AI
SammaPix AI Alt Text analyzes your images and generates descriptive, SEO-friendly alt text automatically.
Open AI Alt TextSection 2: HTML implementation — the code that serves your images
6. Use srcset and sizes for responsive images
The srcset attribute tells the browser which image sizes are available, and the sizes attribute tells it how large the image will display at each viewport width. Together, they allow the browser to select the optimal image for the user's device, downloading only the pixels needed.
A common pattern is to generate images at 400w, 800w, 1200w, and 1600w. The browser then selects the most appropriate size based on viewport width and device pixel ratio. This can reduce image downloads by 40-60% on mobile devices compared to serving a single large image.
7. Set explicit width and height
Always include width and height attributes on img elements. This prevents Cumulative Layout Shift (CLS) by allowing the browser to reserve space before the image loads. Combine with CSS max-width: 100%; height: auto; for responsive behavior while maintaining the aspect ratio reservation.
8. Implement lazy loading correctly
Add loading="lazy" to all images below the fold. This defers loading until the image is near the viewport, saving bandwidth and improving initial load time. Critical rule: never lazy load the LCP image (usually the hero image above the fold). Use loading="eager" and fetchpriority="high" for the LCP image to ensure it loads as fast as possible.
9. Use the picture element for format fallbacks
The HTML picture element allows you to serve modern formats (WebP, AVIF) with automatic fallback to JPEG for older browsers. The browser evaluates source elements in order and uses the first format it supports. This ensures every user gets the best format their browser can handle.
Section 3: Server and CDN delivery
10. Set appropriate cache headers
Images rarely change after upload. Set aggressive cache headers: Cache-Control: public, max-age=31536000, immutable for versioned image URLs (URLs that include a hash or version number). This tells browsers and CDN edge servers to cache the image for one year without revalidation, eliminating repeat downloads entirely.
11. Enable content negotiation
Configure your server or CDN to serve different image formats based on the browser's Accept header. When a browser sends Accept: image/webp, serve WebP. When it sends Accept: image/avif, serve AVIF. Fall back to JPEG otherwise. Cloudflare, AWS CloudFront, and most modern CDNs support this natively through image transformation features.
12. Serve images from a CDN
A Content Delivery Network serves images from edge servers geographically close to the user, dramatically reducing latency. For a user in Tokyo accessing a server in New York, a CDN can reduce image load time by 200-400ms. This directly improves LCP. Most CDNs also provide automatic image optimization (resize, format conversion, compression) at the edge.
Section 4: Monitoring and auditing
13. Run PageSpeed Insights regularly
Google PageSpeed Insights provides both lab data (Lighthouse) and field data (CrUX) for your pages. Check your key pages monthly at minimum. Pay attention to the image-specific opportunities: "Serve images in next-gen formats," "Properly size images," "Efficiently encode images," and "Defer offscreen images." Each of these directly corresponds to a step in this checklist.
14. Monitor Core Web Vitals in Search Console
Google Search Console provides a Core Web Vitals report showing real-world performance data from Chrome users. Monitor the LCP trend over time. If LCP degrades after a content update, it is almost always because new images were added without optimization. Set up a process to review CWV data weekly.
15. Automate image optimization in your workflow
For sites with frequent content updates, manual optimization is unsustainable. Integrate image optimization into your build pipeline using tools like sharp (Node.js), imagemin, or next/image (Next.js). For content teams without technical access, establish a pre-upload workflow using browser-based tools like SammaPix to ensure every image is optimized before it reaches the CMS.
The complete checklist (summary)
Here is every step in a single reference list. Bookmark this section for quick access.
Before upload
- Resize images to display dimensions (2x for Retina)
- Choose the correct format (WebP for photos, PNG for screenshots/logos, SVG for icons)
- Compress at quality 75-85 for lossy formats
- Strip all EXIF metadata (especially GPS data)
- Write descriptive alt text for every informational image
- Use SEO-friendly file names (descriptive, hyphen-separated)
HTML implementation
- Use srcset and sizes for responsive images
- Include width and height attributes on every img element
- Add loading="lazy" to below-fold images
- Use loading="eager" and fetchpriority="high" for the LCP image
- Use the picture element for format fallbacks (WebP with JPEG fallback)
- Include alt attributes on all img elements (empty for decorative images)
Server and CDN
- Set cache headers: Cache-Control: public, max-age=31536000, immutable
- Enable content negotiation for automatic format serving
- Serve images through a CDN for global edge delivery
- Enable HTTP/2 or HTTP/3 for parallel image downloads
Monitoring
- Run PageSpeed Insights on key pages monthly
- Monitor Core Web Vitals in Google Search Console weekly
- Audit new content for unoptimized images after every publish
- Automate image optimization in CI/CD for developer teams
FAQ
What percentage of page weight comes from images?
According to HTTP Archive data from 2025, images account for approximately 42% of total page weight on the median web page. On image-heavy sites like e-commerce or photography portfolios, this percentage can be 60-70%. This makes images the single largest contributor to page size and the highest-leverage optimization target.
What is the best image format for the web in 2026?
WebP is the best default format for web images in 2026. It offers 25-34% smaller file sizes than JPEG at equivalent quality, supports both lossy and lossless compression, handles transparency, and has 97%+ browser support. AVIF offers even smaller files but has slower decode times and 93% browser support. Use WebP as your default and consider AVIF for bandwidth-critical applications.
Should I strip EXIF data from images before uploading?
Yes, for two reasons. First, EXIF data can contain sensitive information including GPS coordinates, device serial numbers, and timestamps that reveal when and where photos were taken. Second, EXIF data adds unnecessary bytes to the file. A typical smartphone photo carries 10-50KB of EXIF metadata. Stripping it reduces file size and protects user privacy.
How do I write good alt text for images?
Good alt text describes the content and function of the image concisely. Keep it under 125 characters. Describe what the image shows, not what it is (say 'Golden retriever catching a frisbee in a park' not 'dog photo'). Include relevant keywords naturally but avoid keyword stuffing. For decorative images that add no informational content, use an empty alt attribute (alt='').
How often should I audit my website's images?
Run a full image audit quarterly using Google PageSpeed Insights and Lighthouse. After any major content update or redesign, run an immediate audit. Monitor Core Web Vitals in Google Search Console continuously, paying attention to LCP trends. Set up alerts if LCP exceeds 2.5 seconds. For large sites with frequent content updates, consider automated image optimization in your CI/CD pipeline.