Most website launches have image problems. Not because the team was careless, but because images span too many concerns at once—performance, SEO, accessibility, design fidelity—and no single person owns all of them.
A five-minute pre-launch image pass catches the issues that take an hour to fix after the site is live.
Performance Checks
1. No image is larger than 500KB above the fold
Hero images, feature section images, and header backgrounds that load in the first viewport are the biggest LCP risk. Run your staging URL through PageSpeed Insights and look at “Avoid enormous network payloads.” Any above-the-fold image over 500KB needs compression.
2. WebP or AVIF is served where supported
If your stack still serves JPEG and PNG only, you’re leaving 20–40% file size reduction on the table for supported browsers. Confirm your <picture> elements or image CDN is serving modern formats to Chrome and Firefox while falling back to JPEG/PNG for Safari (for AVIF) or older browsers.
3. Images below the fold have loading="lazy"
Every <img> that isn’t in the initial viewport should have loading="lazy". Scan your HTML for <img tags and confirm lazy loading is applied. Common miss: images inside CMS-managed sections that bypass the component defaults.
4. Hero image has fetchpriority="high"
The single most impactful image on your LCP should have <img fetchpriority="high"> or <link rel="preload" as="image">. Check that this is in place and not accidentally applied to multiple images (where it loses its effectiveness).
5. No images are scaled down more than 2× in the browser
Open DevTools, inspect any large image, and compare its natural dimensions to its rendered dimensions. An image displayed at 400×300 that’s actually 3000×2000 is wasting 50× the bandwidth. Serve images at close to their display size.
Quality and Format Checks
6. No JPEG artifacts visible at display size
Open the production build and zoom into large images on a retina display. Block artifacts around edges or color bleeding in shadows indicate over-compression. Recompress at a higher quality setting (typically 80–85% is the minimum for images with fine detail).
7. No transparency artifacts on PNG/WebP images
Transparent images placed over colored backgrounds can show halos, fringing, or incorrect blending. Check PNGs on every background color they appear against—especially dark backgrounds for images originally designed for light backgrounds.
8. Retina images are served for 2× displays
Icons, logos, and images with fine detail should have 2× versions for HiDPI displays. Confirm srcset with 2x descriptor or CSS media queries for high-DPI are in place. Pixelated logos on retina MacBook screens are immediately visible to users and reviewers.
9. All images load successfully (no broken paths)
Run a crawl of the staging URL with a tool like Screaming Frog, Ahrefs crawler, or a simple Node.js script, and check for 404 responses on image paths. Broken images that slip through staging to production are embarrassing and affect SEO.
SEO and Metadata Checks
10. Every content image has a non-empty alt attribute
<img alt=""> is acceptable for decorative images. <img> without any alt attribute is not. Images that contribute meaning to the page need descriptive alt text. Run grep -r 'img ' --include="*.html" or use a browser extension to surface missing alt attributes.
11. Alt text describes the image, not the URL
“image.jpg” and “photo1234” are not alt text. Alt text should describe what the image shows: “Product team meeting in a glass-walled conference room” or “Close-up of the charging port on the device’s left side.” Screen readers read alt text literally.
12. Image file names are descriptive
DSC04821.jpg contributes nothing to SEO. team-photo-product-launch-2026.jpg tells crawlers what the image contains. Rename images before uploading, using lowercase hyphens, no spaces, no special characters.
13. Open Graph and Twitter Card images are set and correct
Check the og:image meta tag on every page type (homepage, blog post, product page). Open each URL in the LinkedIn post inspector, Facebook Debugger, or Card Validator to confirm the image appears correctly. Common problems: image too small (minimum 1200×630 for OG), image URL not absolute, wrong aspect ratio cropped awkwardly.
Accessibility and Legal Checks
14. No text is embedded in images where it could be HTML
Text baked into images is invisible to search engines, untranslatable, inaccessible to screen readers, and unselectable by users. If you see image files containing headlines, quotes, or instructions, convert them to HTML text with CSS styling. Acceptable use of text in images: data visualizations, charts, screenshots, diagrams.
15. No images use unlicensed assets
Before launch, verify every image has a confirmed license. Common risk areas: images added by content contributors who used Google Image Search, stock photos purchased for one project reused in another, AI-generated images from tools with unclear commercial terms. Create a brief image asset register for the project with license confirmation for each source.
Running the Checklist Efficiently
Don’t do this manually on every page individually. Automate what you can:
- Broken images: crawl with Screaming Frog or similar
- Missing alt text: accessibility audit in Chrome Lighthouse
- LCP and image sizes: PageSpeed Insights
- OG images: a single API call to each platform’s debugger
Manual checks you can’t automate: JPEG artifact quality, transparency accuracy, alt text meaningfulness, license verification.
Assign ownership: one person runs automated checks, a designer reviews visual quality, a content editor reviews alt text and legal status. The entire pass takes under 30 minutes for most sites.
Ready to compress your images to pass the file size checks? Use the free Image Compressor — drag in any image, download a web-ready version instantly.