Image Optimization Checklist Before a Site Redesign

A redesign is the most common way a site quietly loses its image traffic. New theme, new filenames, new CDN — and hundreds of images that Google had indexed for years suddenly return 404s or load as 3 MB PNGs. Before you push the new design live, walk through this checklist.

1. Inventory every image that currently earns traffic

Before touching the design, pull a baseline. In Google Search Console, open the Performance report and filter queries or pages where image results appear. Export the top image URLs. Then crawl the live site with any crawler you already use and export every <img> src, plus the page it sits on.

You now have two lists: images Google associates with your site, and images your site actually serves. The gap is where redesign damage happens.

2. Decide the fate of each URL before you rebuild

For every image in the inventory, pick one of three outcomes and write it down:

• Keep the same URL. No work needed beyond re-uploading the same file.
• Move to a new URL. You must 301-redirect the old image URL to the new one.
• Delete it. Only delete if the image has no inbound links and no image-search traffic. Otherwise, redirect it to the most relevant surviving page.

Image URLs are indexable assets. A 301 from /wp-content/uploads/2021/06/blue-widget.png to its new location preserves the signal; a 404 throws it away. If your redesign changes your image folder structure — which most CMS migrations do — this step is not optional.

3. Lock in filenames and alt text before the CMS import

Redesigns are the moment filenames like IMG_4471-final-v2.jpg get baked in for another five years. Fix them now.

• Filenames: lowercase, hyphenated, descriptive. leather-laptop-sleeve-brown.jpg, not DSC_0092.jpg.
• Alt text: describe the image's purpose in the context of the page, not the file. A product photo's alt should name the product; a decorative divider should have empty alt (alt="") so screen readers skip it.

If your team is importing hundreds of images from a spreadsheet, add filename and alt-text columns to that sheet. It is far cheaper to get this right at import than to run a second pass later.

4. Match the format and dimensions to how the image is displayed

Two mistakes dominate redesign launches:

• Serving a 3000 px-wide hero image into a 1200 px container.
• Serving PNG for photographic content.

For photos and complex imagery, modern formats like WebP or AVIF deliver far smaller files than JPEG or PNG at comparable quality, and browser support is now broad. For flat graphics, logos, and icons, SVG stays sharp at any size and is usually the smallest option. For images that must stay PNG (transparency with photographic detail), run them through a lossless compressor.

Set explicit width and height attributes on every <img> in the new templates. This is the single most reliable way to prevent layout shift as images load — which feeds directly into your Cumulative Layout Shift score.

5. Plan the loading strategy per image, not site-wide

A common redesign trap is applying loading="lazy" to every image via a global template. That is fine for below-the-fold content and actively harmful for the image that is your Largest Contentful Paint element — usually the hero or the first product photo.

• Hero / above-the-fold image: load eagerly, preload it if it is the LCP element, and do not lazy-load it.
• Everything below the fold: lazy-load.
• Use srcset and sizes so the browser picks an appropriately sized file for the viewport rather than downloading the desktop version on a phone.

If you are unsure which image is your LCP element, check it in PageSpeed Insights or your browser's performance panel after the redesign is staged.

6. Re-check structured data and social previews

If your site uses ImageObject markup, product images, or Open Graph tags, the redesign almost certainly changed the URLs those reference. Update them in the same commit as the template change. Validate with Google's Rich Results Test and the Schema Markup Validator — not the retired Structured Data Testing Tool.

Then paste a few key page URLs into a social preview debugger. A redesign that ships with broken og:image tags kills click-through on every share for months.

7. Test on a staging domain before DNS flips

Run a crawl of the staging site and compare it against your baseline inventory. You are looking for:

• Images that return 404 or 500 on staging but existed in production.
• Images with no alt attribute at all.
• Images over roughly 200–300 KB that are not hero assets.
• Any image still served from the old CDN or old domain.

Fix these on staging. Once DNS points at the new site, every hour of broken images is an hour of lost image-search traffic and a worse experience for visitors.

8. Monitor for two weeks after launch

Redirects and image indexing do not settle overnight. For the first two weeks after go-live:

• Watch Search Console's Pages report for new 404s on image URLs.
• Watch Core Web Vitals for regressions in LCP and CLS.
• Spot-check a handful of high-traffic pages in an incognito window on mobile.

If something slipped through, you will catch it while the fix is still a one-line template change rather than a full re-audit.

Run the audit before you ship, not after

A redesign is a controlled demolition of your existing site. The images are usually the part nobody assigns an owner to. Before you publish, run a free audit on the staging URL to catch missing alt text, oversized files, and layout-shift risks while they are still cheap to fix. For more pre-launch checklists covering the rest of a redesign, browse the guides library.

More guides · Compare audit tools · Run a free website audit