Image Optimization Checklist for Faster Websites

14 specific checks covering format, compression, dimensions, lazy loading, CLS prevention, alt text, and SEO. Work through it once on your existing pages, then use it every time you publish.

Daniel Osei·May 6, 2026·13 min read

Most image optimization guides tell you what to do in theory. This one is a working checklist: specific checks, specific fixes, and specific tools for each one. Work through it once on your existing pages, then use it as a reference every time you publish new content.

Images can account for a substantial part of a page's transferred bytes and are frequently the Largest Contentful Paint element. The exact proportions change with the measured dataset and date. Use the current HTTP Archive Web Almanac and your own PageSpeed report for current evidence. The checklist below covers format, compression, dimensions, loading behavior, layout stability, file naming, alt text, metadata, and delivery.

Before You Upload: The File Preparation Checks

These happen on your computer before an image ever touches your CMS or hosting.

Check 1: Convert from HEIC if you shot on an iPhone

HEIC is the default camera format on iPhones since iOS 11. Browsers do not render HEIC natively. CMS platforms reject it. If your image file ends in .heic or .HEIC, convert it before anything else. The HEIC to JPG converter handles this in the browser with nothing uploaded. Ten seconds. Do this first.

Check 2: Choose the right format for the image type

The format decision matters more than any compression setting. The rule is simple:

For photographs and product images: compare AVIF and WebP, then retain a fallback if your audience or downstream tools need it. Savings depend on the source, encoder, and quality target. Google's WebP study and Netflix's AVIF evaluation provide measured examples rather than universal guarantees.

For logos, icons, and simple illustrations: SVG if the image is vector-based. A logo that is 45KB as PNG is typically 3-5KB as SVG.

For screenshots and images with text: PNG or WebP lossless. Text edges need pixel-perfect sharpness and lossy compression creates visible artifacts at those edges.

For other web images, WebP is a useful candidate. Keep JPEG or PNG where a browser, embedded viewer, CMS, or recipient requires it.

The guide on best image formats for SEO in 2026 covers the reasoning behind each of these choices with browser support data if you want the full picture.

Check 3: Resize to the actual display dimensions before uploading

This is the most impactful single step and the most frequently skipped. Your camera produces images at 4000 to 6000 pixels wide. Your blog content column is probably 800 to 1200 pixels wide. Uploading the full-resolution original and letting the browser scale it down means every visitor downloads 4-12 times as many pixels as they need.

File size scales roughly with the square of the dimensions. Halving the width and height quarters the pixel count and reduces file size to approximately one quarter before you have touched a compression setting. A 3MB photo resized to match a 1200px content column typically compresses to under 200KB with no visible quality difference at display size.

The resize image tool handles exact pixel dimensions. For common targets, the specific tools save time: 1920x1080 for hero images, 1280x720 for standard wide images, 1080x1080 for square crops. Resize first. Compress second. Always in that order.

The guide on best image sizes for blogs and websites has a full reference for each image type: hero images, featured images, thumbnails, Open Graph, product photos.

Check 4: Compress to the right file size target

After resizing, compress. The targets depend on the image type:

Hero and banner images at 1920x1080: under 200KB as WebP or AVIF. Featured blog images at 1200x630: under 100KB. Inline content images at column width: under 150KB. Thumbnails at 300-400px: under 30KB.

If you are compressing to a specific KB target for a form, portal, or size constraint, the target-specific tools handle this directly: compress to 100KB, compress to 200KB, compress to 500KB. For tighter requirements, compress to 50KB or compress to 20KB.

For JPEG and WebP photographs, 75 to 85 is a useful starting range, not a quality floor. Encoder scales are not equivalent, and visible artifacts depend on the source and display size. The guide on lossy versus lossless compression explains the tradeoff.

Check 5: Strip EXIF metadata

Many smartphone photos contain EXIF fields such as device model, capture time, camera settings, and, when location recording is enabled, GPS coordinates. Metadata size varies and may be negligible or substantial depending on the file.

More importantly, EXIF data includes GPS coordinates that identify exactly where a photo was taken. Sharing photos without stripping that data means the location travels with every download. All compression tools at ImgTweak strip EXIF automatically during processing. If you are using a different tool, verify it handles metadata removal. The guide on what EXIF data contains explains exactly what is inside that metadata and why removing it matters.

Check 6: Name the file descriptively before uploading

Google recommends short, descriptive image filenames. Rename generic names such as IMG_0238.jpg when a natural description is useful, without keyword stuffing. See Google Images SEO guidance.

Rules for filenames: lowercase only, hyphens not underscores, no spaces, no special characters, no numbers-only names. The extension should match the actual format. A file renamed to .jpg but still containing PNG data will fail format validators on many upload systems. Use a converter to change format, not a rename.

In Your HTML: The Markup Checks

These live in your page code and affect how the browser requests, prioritizes, and renders images.

Check 7: Never lazy load the LCP image

Lazy loading is a browser instruction to defer loading an image until it is near the viewport. For images below the fold, this is correct and recommended. For the hero image, it is a performance error that directly increases your LCP time.

The LCP image is already in the viewport. Adding loading="lazy" to it tells the browser to deprioritize it until after layout completes, which delays the largest visible element. On constrained mobile connections, this can add hundreds of milliseconds to LCP. Google's engineers measured test cases where removing lazy loading from the LCP image improved LCP from 2.6 seconds to 1.9 seconds.

The specific mistake to watch for: WordPress and many page builders apply loading="lazy" to all images by default, including hero images. Check your rendered HTML. If your hero <img> tag has loading="lazy", remove it.

For all other images below the fold, loading="lazy" is correct and reduces initial page load weight by deferring images the visitor has not scrolled to yet.

Check 8: Add fetchpriority="high" to your LCP image

fetchpriority="high" tells the browser to request this specific image at the highest network priority. Combined with removing loading="lazy", it ensures the browser starts fetching the hero image as early as possible during page load. Google documented a 200-700ms LCP improvement from adding this single attribute to the LCP image.

Use it on exactly one image per page. Marking every image as high priority defeats the purpose because the browser has nothing to deprioritize. One image, one fetchpriority="high".

<img
  src="hero.webp"
  alt="Descriptive alt text"
  width="1920"
  height="1080"
  fetchpriority="high"
/>

Check 9: Always set explicit width and height attributes

Missing width and height attributes on <img> tags cause Cumulative Layout Shift. When a browser starts rendering a page, it reads the HTML to determine where to place elements. Without explicit dimensions, it does not know how much vertical space to reserve for an image before it loads. When the image arrives, it pushes surrounding content down. That content jump is a CLS event.

The width and height values in the HTML do not need to match the exact display size in CSS. The browser uses them to calculate the aspect ratio and reserve the correct proportional space. What matters is that the ratio is correct:

<!-- Correct: aspect ratio lets browser reserve space -->
<img src="product.webp" alt="..." width="800" height="600" loading="lazy" />
 
<!-- Wrong: browser can't reserve space, causes CLS -->
<img src="product.webp" alt="..." loading="lazy" />

Check 10: Use the picture element with format fallbacks

Serving AVIF or WebP with JPEG fallback requires no server-side logic. The HTML <picture> element handles it natively:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Descriptive alt text" width="1200" height="630" />
</picture>

Modern browsers request AVIF. Browsers that support WebP but not AVIF request WebP. Older browsers fall through to JPEG. Every visitor gets the smallest file their browser can render. For the LCP image, add fetchpriority="high" to the <img> tag inside the <picture> element.

Check 11: Use srcset for responsive images

If your layout serves different image widths on mobile versus desktop, srcset tells the browser which file to download for each viewport:

<img
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
  src="image-1200.webp"
  alt="..."
  width="1200"
  height="800"
/>

A mobile visitor downloading a 1200px image displayed at 400px is downloading nine times as many pixels as necessary. Responsive images solve this at the HTML level with no JavaScript.

The SEO Checks

Check 12: Write meaningful alt text for every image

Alt text helps search engines and assistive technology understand an image's purpose. Google recommends useful, context-aware alt text and warns against keyword stuffing. See Google Images SEO guidance.

Effective alt text describes what is in the image accurately and naturally. A photo of a black leather notebook on a wooden desk: alt="Black leather notebook on wooden desk". Not alt="notebook notebook leather desk buy notebook". Not alt="". Not alt="image".

Decorative images that add no informational value can use alt="", which tells screen readers to skip them. Every image that conveys information needs descriptive alt text.

Check 13: Verify images are in your sitemap

Google discovers images during crawls, but images embedded in JavaScript components may be missed. An image sitemap, or including image tags in your existing XML sitemap, ensures Google can find and index images that are not in static HTML.

If you use Next.js, WordPress, or another framework where images are rendered client-side, check your sitemap configuration to confirm images are included. Google Search Console shows which images from your site have been indexed under the Coverage report. If pages with important images show no image impressions in the Images tab, the images may not be indexed.

Check 14: Check for images blocking crawl

Images hosted on domains or subdomains not covered by your robots.txt allowed rules will not be indexed. Images behind authentication or served from localhost references in production will not be indexed. Images referenced in CSS background properties rather than <img> tags may not be discovered.

Run your key pages through Google's URL Inspection tool in Search Console and check that the rendered HTML shows the actual image src attributes, not JavaScript variables or data attributes that have not been evaluated yet.

The Audit: How to Find Problems on Existing Pages

Once you know what to check, running the audit against your existing content is the practical step.

PageSpeed Insights (free, at pagespeed.web.dev) runs a full Lighthouse audit on any URL and flags specific images by filename under "Properly size images," "Serve images in next-gen formats," and "Efficiently encode images." It tells you exactly which files are the problem and estimates the potential savings in kilobytes for each one.

The Images tab in Google Search Console shows which images are generating impressions in Google Images, which have clicks, and which have been indexed at all. If a page with many images shows no image impressions, that is a signal that indexing, alt text, or format issues need attention.

The image info tool shows the metadata inside any image file before you upload it: dimensions, format, file size, EXIF data, and GPS status. Use it to verify that compression and metadata stripping worked correctly on an output file before publishing.

For a broader look at how image weight connects to actual ranking outcomes, the guide on how image compression affects SEO and page speed covers the Core Web Vitals connection with specific data on what the performance thresholds mean in practice.

The One-Page Reference

If you want a single quick reference to keep alongside your CMS, here is the full checklist compressed:

Before upload: convert HEIC to JPEG, choose the right format for the image type, resize to display dimensions, compress to the file size target, strip EXIF metadata, and name the file descriptively.

In HTML: no loading="lazy" on the LCP image, add fetchpriority="high" to the LCP image, set explicit width and height on every <img>, use <picture> with AVIF and WebP sources, use srcset for responsive variants.

For SEO: write descriptive alt text for every informational image, verify images appear in your sitemap, check that no robots rules are blocking image crawling.

None of these steps is technically complex. Collectively, they represent the difference between a site where images help performance and rankings and one where images are the primary bottleneck for both. The tools to handle the file preparation steps are free, run in the browser, and require no software installation. The HTML attributes take minutes to add. The SEO checks take one session in Search Console.

Run through it once and the habit takes a few minutes per image going forward.

Written by

Daniel Osei

Web Performance Engineer

Daniel has spent 6 years optimizing images and web assets for publishers and e-commerce brands. He writes about image formats, compression techniques, and web performance at ImgTweak.

View author profile and editorial background