Image Optimisation Checklist — Every Step for Faster Pages and Better Rankings in 2026

Poor image optimisation costs websites in three ways simultaneously — slow loading that drives visitors away, failed Core Web Vitals that hurt Google rankings, and missed image search traffic from images with no alt text or descriptive file names. This complete image optimisation checklist covers every step you need to take for every image on every page — format selection, compression, correct dimensions, alt text, lazy loading, structured data, and performance verification. Work through this checklist once for your existing images and apply it to every new image you add, and your website will load faster, rank better, and look more professional on every device.

Why Every Item on This Checklist Matters

Most website owners optimise some images some of the time — they compress a few images here, add alt text to a few images there, but never apply a consistent process to every image across the entire site. Inconsistent optimisation produces inconsistent results. One unoptimised hero image at 3MB can push an entire page’s loading time from fast to slow regardless of how well the other nine images on that page are optimised.

According to the HTTP Archive Web Almanac, images account for approximately 50 percent of total page weight on the median website. Google uses Core Web Vitals — Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint — as direct ranking signals. Two of those three metrics directly connect to how images load and display. Every item on this checklist addresses at least one measurable ranking or performance factor.

Apply this checklist to your most important pages first — homepage, top blog posts, best product pages. Measure the improvement with Google PageSpeed Insights after each batch. Then systematically work through the rest of your site.

Section 1 — Format Checklist

Getting format right is the highest-impact single decision for image file size. The wrong format makes every other optimisation step less effective from the start.

✅ Use WebP for All Web Images

WebP produces files 25 to 34 percent smaller than JPG at equivalent visual quality and 26 percent smaller than PNG in lossless mode. Every modern browser supports WebP — Chrome, Firefox, Safari 14+, Edge, and Opera cover over 96 percent of global browser usage in 2026.

Convert all JPG photographs to WebP using our free JPG to WebP converter. Convert all PNG photographs to WebP using our PNG to WebP converter. Both converters support batch upload — process entire folders of images simultaneously.

Check each image type and confirm it uses the correct format:

Image Type	Correct Format	Why
Photograph on website	WebP lossy	Smallest files at best quality
Logo on website	SVG	Scales perfectly, tiny file size
Icon on website	SVG or WebP	Sharp at all sizes
Screenshot with text	WebP lossless or PNG	Preserves sharp text edges
Transparent graphic for web	WebP lossless	Smaller than PNG, same quality
Image for email	JPG	Universal email client support
Image for print	JPG 90%+ or PNG	Accepted by all print services
Working design file	PNG	Zero quality loss on re-save

✅ Never Use PNG for Photographs on Websites

PNG photographs are 5 to 10 times larger than equivalent WebP or JPG files with no visible quality benefit at screen viewing sizes. If your site currently uses PNG for any photographic content, convert those images immediately — this single change produces the most dramatic immediate file size reduction available.

✅ Use SVG for Logos and Icons

SVG files for simple logos and icons are typically 10 to 50 times smaller than equivalent PNG files at retina resolution. SVG scales to any screen size without quality loss — a single SVG file serves standard monitors, retina MacBooks, 4K displays, and large-format print from the same file. No need to maintain multiple resolution variants.

If your logo currently exists only as a JPG or PNG, check with your designer for the original vector file. Most logos originate in vector tools — the SVG export is a straightforward step from the original source. Our guide on how to convert JPG to SVG covers converting raster logos to vector when the original vector file is not available.

✅ Implement WebP With JPG Fallback Using the Picture Element

For the 4 percent of visitors on older browsers that don’t support WebP, implement the HTML picture element to serve JPG as an automatic fallback:

html

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

Modern browsers use the WebP source. Older browsers automatically use the JPG fallback. WordPress 6.1 and later handles this automatically for uploaded images.

Section 2 — File Size Checklist

Correct format gets you most of the way to small file sizes. Compression gets you the rest of the way.

✅ Compress All Images to Target File Sizes

Apply compression to every image using appropriate quality settings. The professional standard for web images is 80 to 85 percent lossy quality — at these settings, compression is genuinely invisible at normal screen viewing sizes and distances.

Target file sizes for every web image type:

Image Type	Target File Size	Format
Hero / full-width banner	Under 200 KB	WebP lossy
Blog featured image	Under 150 KB	WebP lossy
Product image	Under 150 KB	WebP lossy
Inline blog image	Under 100 KB	WebP lossy
Thumbnail	Under 30 KB	WebP lossy
Logo (raster)	Under 20 KB	WebP or SVG
Background image	Under 300 KB	WebP lossy
Icon	Under 5 KB	SVG preferred

Use our free Image Compressor to compress any image to these targets. The compressor applies smart quality settings automatically — upload your images, check the output sizes, and download the compressed versions. Batch upload handles multiple images simultaneously.

✅ Strip Unnecessary Metadata

EXIF metadata — camera model, lens information, GPS coordinates, shooting settings — adds 10 to 100KB per image with zero visual benefit for website visitors. Strip all metadata from web images before uploading. Our Image Compressor removes unnecessary metadata automatically during compression.

Keep the ICC colour profile (sRGB) — this 2 to 4KB file ensures accurate colour display across different monitors and browsers. Remove everything else.

✅ Never Re-Compress an Already-Compressed JPG

Opening a JPG, editing it, and saving it again as JPG applies another round of lossy compression on top of the previous round — compounding quality loss through generation loss. Always compress from the original lossless source (PNG, TIFF, or RAW camera file). Keep lossless originals permanently. Export to JPG or WebP only at the final delivery step.

✅ Check File Sizes After Uploading to Your CMS

Some content management systems apply their own compression to uploaded images. WordPress compresses uploaded JPEGs to 82 percent quality by default. This compounds with any compression you already applied — potentially degrading quality more than intended.

Check whether your CMS applies compression by comparing the file size before and after upload. For WordPress, control this behaviour by adding to functions.php:

php

// Set WordPress JPEG quality to 90 percent
add_filter('jpeg_quality', function($arg){ return 90; });

Or upload WebP instead of JPG — WordPress applies less automatic processing to WebP uploads.

Section 3 — Dimensions Checklist

Correct dimensions eliminate the most wasteful category of image data — excess pixels that the browser downloads and immediately discards because they exceed the display space.

✅ Resize Every Image to Its Correct Display Dimensions

Find the actual display dimensions for every image slot on your website. Right-click any image on your site, select Inspect Element, and look at the rendered dimensions in the browser developer tools. The image file dimensions should match these rendered dimensions — not be larger.

A 4000 × 3000 pixel image displayed at 800 × 600 pixels downloads 25 times more data than the browser shows. Resize all images to match their display dimensions before uploading. Our free Image Resizer handles exact dimension targeting with batch support.

✅ Upload at 2× Dimensions for Retina Sharpness

Retina and high-DPI screens — all iPhones, MacBooks, many Windows laptops, and most modern Android phones — use 2 physical pixels per CSS pixel. An image displayed at 400px CSS width needs 800 actual pixels to look sharp on a retina display.

Upload images at 2× the display dimensions for retina sharpness. Combine with WebP compression to keep file sizes manageable at doubled dimensions. A product image displayed at 400 × 400px CSS should use an 800 × 800px file — at WebP 82 percent quality this produces approximately 45KB, well within the 150KB target.

✅ Define Width and Height Attributes on Every Image Tag

Missing width and height attributes on image tags cause Cumulative Layout Shift — one of Google’s Core Web Vitals ranking metrics. Without defined dimensions, browsers don’t know how much space to reserve for images before they load. When images finally load, they push page content downward — causing the page to jump visually.

Every image tag needs explicit width and height:

html

<img 
  src="product.webp" 
  alt="Descriptive alt text"
  width="800" 
  height="800"
  loading="lazy">

Add this CSS to keep images responsive without sacrificing the layout hint:

css

img {
  max-width: 100%;
  height: auto;
}

The width and height attributes tell the browser the aspect ratio before the image loads — reserving correct space and eliminating layout shifts.

✅ Implement srcset for Responsive Image Delivery

The srcset attribute lets browsers choose the most appropriate image size for each device — serving a 480px version to mobile visitors and a 1920px version to desktop visitors from the same HTML.

html

<img 
  srcset="image-480.webp 480w, image-1200.webp 1200w, image-1920.webp 1920w"
  sizes="100vw"
  src="image-1920.webp"
  alt="Descriptive alt text"
  width="1920"
  height="1080">

WordPress generates srcset automatically for uploaded images. Custom websites need srcset implemented manually or through an image delivery service. Mobile visitors — over 60 percent of global web traffic — download significantly less data when srcset serves correctly-sized images for their viewport.

Section 4 — Alt Text Checklist

Alt text is the most important image SEO signal. Google reads alt text as the primary indicator of what an image shows and which search queries it answers.

✅ Write Descriptive Alt Text for Every Meaningful Image

Every image that contributes content to a page needs descriptive alt text. Write alt text that describes what the image actually shows — specifically and concisely. Good alt text reads naturally as a description, not as a keyword list.

Good alt text examples:

• alt="Blue Nike Air Max running shoes on white background" — specific, descriptive
• alt="Screenshot of Google Analytics showing organic traffic spike" — explains exactly what the screenshot shows
• alt="Chef slicing fresh sourdough bread on wooden board" — concrete and clear

Poor alt text examples:

• alt="shoes" — too vague
• alt="buy cheap running shoes free shipping" — keyword stuffing
• alt="image" or alt="photo" — describes format, not content
• alt="" on a meaningful image — treats informational content as decorative

✅ Keep Alt Text Under 125 Characters

Screen readers cut off alt text at approximately 125 characters. Most images need between 50 and 100 characters to describe accurately. For complex infographics or charts that need longer descriptions, use the longdesc attribute or provide a text description in the surrounding page content instead.

✅ Use Empty Alt Text for Decorative Images

Purely decorative images — dividers, background patterns, abstract shapes that add no information — should use empty alt text: alt="". This tells both screen readers and Google that the image contains no meaningful content worth indexing. Missing the alt attribute entirely is technically incorrect — empty alt text is the correct way to mark decorative images.

✅ Include Primary Keywords Naturally in Alt Text

Since the keyword is applicable to the content of the image, the alt text will contain the keyword. For example, an image of image compression settings will have alt text as “screenshot of image compression settings in Photoshop,” which will naturally include the phrase “image compression.” This is because the image contains “image compression settings.” The keyword should never be forced on alt text of unrelated images.

Section 5 — File Names Checklist

File names provide Google with an additional contextual signal about image content — a secondary signal after alt text but worth getting right since it costs nothing.

✅ Use Descriptive File Names With Hyphens

Rename every image file with a descriptive, keyword-relevant name before uploading. Use hyphens to separate words — Google treats hyphens as word separators, so blue-running-shoes.webp registers as two separate words while blue_running_shoes.webp may register as one term.

Good file names:

• blue-running-shoes-side-view.webp
• paris-eiffel-tower-sunset.webp
• chocolate-protein-powder-500g.webp

Poor file names:

• IMG_4829.jpg — camera default name, no descriptive value
• image1.png — generic, no contextual information
• photo.jpg — format label, not a description

✅ Use Lowercase Letters Only

Uppercase characters in URLs require encoding that creates unnecessary complexity. All lowercase file names work universally across all server configurations and operating systems. Blue-Shoes.webp should be blue-shoes.webp.

✅ Keep File Names Concise

Two to five descriptive words work best. red-leather-handbag-closeup.webp is ideal. red-luxury-leather-designer-handbag-closeup-professional-product-photography.webp is excessive and may look like keyword stuffing. Describe the image accurately in as few words as necessary.

✅ Rename Before First Upload

File names cannot change after upload without creating broken URLs — unless you set up redirects. The image URL forms part of the image sitemap and any external links to that image. Rename files correctly before the first upload to avoid this problem entirely.

Section 6 — Loading Performance Checklist

Format, size, and dimensions determine how large images are. Loading performance determines when and how the browser fetches them — equally important for user experience and Core Web Vitals.

✅ Add Lazy Loading to All Below-Fold Images

Lazy loading delays image downloads until the visitor scrolls near them — reducing initial page payload by 20 to 50 percent on image-heavy pages and directly improving loading speed.

Add loading="lazy" to every image below the fold:

html

<img src="content-image.webp" alt="Description" width="800" height="600" loading="lazy">

WordPress automatically adds lazy loading to all images since version 5.5. Custom HTML pages need the attribute added manually.

✅ Never Lazy Load Above-Fold Images

This is the most common lazy loading mistake — and it directly and significantly hurts Largest Contentful Paint scores. The hero image, logo, and any image visible without scrolling must load immediately. Adding loading="lazy" to these images instructs the browser to delay loading content the visitor can already see.

The rule is simple: lazy load everything below the fold. Never lazy load anything above the fold.

✅ Preload the LCP Image

The Largest Contentful Paint element on most pages is the hero image or primary featured photograph. Preloading this image tells the browser to start downloading it as early as possible — before it would normally discover it in the HTML.

Add this in the document <head> for the LCP image:

html

<link rel="preload" as="image" href="hero.webp" type="image/webp">

For responsive LCP images with srcset:

html

<link 
  rel="preload" 
  as="image"
  imagesrcset="hero-480.webp 480w, hero-1200.webp 1200w, hero-1920.webp 1920w"
  imagesizes="100vw">

Only preload the single most important above-fold image. Preloading multiple images competes for bandwidth and hurts performance for other critical resources.

✅ Enable CDN Delivery for Images

Content Delivery Network delivers images from servers near the location of each user, thereby cutting down on latency times from 200 milliseconds for international users to 15 to 20 milliseconds. The total latency saved in one page with 10 images is 1.8 seconds per page load for international users.

CloudFlare has a free CDN delivery service for any website. For WordPress websites, they use Jetpack CDN (free), WP Rocket with CDN service, or CloudFlare. Shopify has automatic CDN delivery via Fastly.

✅ Set Long Cache Expiration for Image Files

Browser caching stores downloaded images locally so returning visitors load images from their device cache rather than re-downloading them. Set one-year cache expiration for all image files — returning visitors load them in zero time on subsequent visits.

For Apache (.htaccess):

apache

<FilesMatch "\.(webp|jpg|jpeg|png|svg|gif)$">
  Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

Use version numbers or content hashes in file names (logo-v2.webp, hero-a3f9.webp) to force cache refresh when images change — browsers treat different URLs as different resources and download fresh.

Section 7 — Core Web Vitals Checklist

Google uses Core Web Vitals as direct ranking signals. Images affect two of the three metrics — Largest Contentful Paint and Cumulative Layout Shift. Every item in this section directly influences rankings.

✅ Achieve Good LCP — Under 2.5 Seconds

LCP measures how quickly the largest visible content element loads. Google targets under 2.5 seconds for a Good rating. For most pages, the LCP element is a hero image or large featured photograph.

Actions that directly improve LCP:

• Convert hero image to WebP — smaller file downloads faster
• Resize hero image to correct display dimensions — eliminates excess pixel data
• Preload the hero image — browser starts downloading it earlier
• Serve hero image from CDN — reduces latency for all visitors
• Never lazy load the hero image — loading=”lazy” delays the LCP element

✅ Achieve Good CLS — Under 0.1

CLS measures visual stability — how much the page layout shifts as content loads. Images without defined dimensions cause layout shifts when they load and push surrounding content downward.

Actions that directly improve CLS:

• Add width and height attributes to every image tag — reserves correct space before loading
• Specify aspect ratios in CSS where HTML attributes cannot be added
• Avoid inserting images above existing content after page load
• Check CLS in Google Search Console and fix flagged pages

✅ Run Google PageSpeed Insights on Key Pages

Go to pagespeed.web.dev and run both mobile and desktop tests on your homepage, top blog posts, and best product pages. The Opportunities section shows every image-related issue with estimated improvement for each fix.

Common image-related warnings and their fixes:

Warning	Fix
Serve images in next-gen formats	Convert JPG and PNG to WebP
Properly size images	Resize to correct display dimensions
Efficiently encode images	Compress to target file sizes
Defer offscreen images	Add loading=”lazy” to below-fold images
Preload Largest Contentful Paint image	Add <link rel="preload"> to head
Image elements do not have explicit width and height	Add width and height attributes

Work through every flagged item on every important page and re-run the test after each batch of fixes.

Section 8 — Image SEO Checklist

Performance optimisation makes pages load faster. Image SEO signals help Google understand what images show and rank them in image search — driving additional organic traffic.

✅ Include Images in Your XML Sitemap

An image sitemap tells Google about every image on your website — ensuring comprehensive indexing including images loaded by JavaScript or on pages with complex rendering. Add image sitemap entries for every significant image:

xml

<url>
  <loc>https://example.com/product-page/</loc>
  <image:image>
    <image:loc>https://example.com/product.webp</image:loc>
    <image:title>Product name and brief description</image:title>
    <image:caption>Descriptive caption about the image content</image:caption>
  </image:image>
</url>

Yoast SEO and Rank Math generate image sitemaps automatically for WordPress. Submit your sitemap to Google Search Console under Sitemaps to ensure Google discovers and processes it.

✅ Add Captions to Important Images

Image captions — text immediately below images in page content — provide additional context signals to Google about image content and relevance. Captions are visible text that Google reads as part of the surrounding content context for each image.

Captions don’t need to appear under every image — prioritise product images, infographics, charts, and any image where additional context adds genuine value for the reader.

✅ Ensure Surrounding Content Relates to Each Image

Google uses the text surrounding each image — headings, body text, captions — to understand image context and relevance. Place images within content that directly relates to what they show. An image of running shoes performs better in image search when surrounded by content about running shoes than when placed in an unrelated blog post.

✅ Add Structured Data for Product and Article Images

Structured data — schema markup — tells Google explicitly about the context of images. Product schema associating images with product data unlocks rich results in both web search and Google Image Search. Article schema with featured image markup helps Google understand the article’s primary visual.

For product pages:

json

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "image": ["https://example.com/product-1.webp", "https://example.com/product-2.webp"],
  "description": "Product description"
}

✅ Optimise Open Graph Images

Open Graph images — the images appearing when a page gets shared on social media — don’t directly affect Google rankings but drive social sharing click-through rates, which generates traffic and engagement signals that correlate with stronger search performance.

Add Open Graph image meta tags to every important page:

html

<meta property="og:image" content="https://example.com/page-preview.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive text for the preview image">

Use 1200 × 630px images — the standard Open Graph size that works correctly on Facebook, LinkedIn, Twitter, and most other platforms.

Section 9 — WordPress-Specific Checklist

WordPress powers over 43 percent of all websites. These WordPress-specific items address platform-specific optimisation steps that apply on top of the general checklist.

✅ Upload Images at Correct Dimensions From the Start

WordPress generates multiple thumbnail sizes from every uploaded image. Starting with a correctly-sized upload ensures all generated sizes are also correct — rather than generating small thumbnails from oversized source files that then get poorly resampled.

✅ Enable WebP Support and Delivery

WordPress 5.8+ accepts WebP uploads. WordPress 6.1+ automatically generates WebP versions of uploaded JPEG images. Verify WebP support under Dashboard > Tools > Site Health > Info > Media Handling — check that your server supports WebP in GD or Imagick.

Upload images as WebP directly for full control over output quality rather than relying on WordPress’s automatic conversion.

✅ Control WordPress’s Automatic JPEG Compression

WordPress compresses uploaded JPEGs to 82 percent quality by default. Add this to your theme’s functions.php file to control the quality setting:

php

add_filter('jpeg_quality', function($arg){ return 90; });

Or upload WebP images — WordPress applies less automatic processing to WebP, giving you full control over the compression you applied before uploading.

✅ Clean Up Unused Image Sizes

WordPress generates multiple sizes for every uploaded image — default sizes plus any sizes registered by your active theme and plugins. These accumulate over time and waste server storage. The Regenerate Thumbnails plugin lets you remove sizes your current theme doesn’t use and regenerate only the sizes it actually needs.

✅ Use a Performance Plugin for Automation

Performance plugins automate several checklist items — WebP serving, browser caching, CDN delivery, and lazy loading. WP Rocket, Imagify, ShortPixel, and Smush all handle image-specific optimisation automatically. After manual optimisation of existing images, a performance plugin maintains these standards automatically for future uploads. Our comprehensive guide on WebP images for WordPress covers the complete WordPress WebP workflow including plugin configuration.

Section 10 — Ongoing Maintenance Checklist

Optimising existing images is a one-time project. Maintaining optimisation as new content gets added requires a consistent process.

✅ Apply This Checklist to Every New Image Before Uploading

Build image optimisation into your content creation workflow — not as an afterthought after uploading. Before uploading any image to your website, run through this quick pre-upload checklist:

• ✅ Correct format — WebP for web, JPG for email/print, PNG for logos and transparent graphics
• ✅ Correct pixel dimensions — resized to actual display size, not camera resolution
• ✅ Correct file size — under 150KB for most images as WebP at 80 to 85 percent
• ✅ Descriptive file name — hyphens, lowercase, keyword-relevant
• ✅ Alt text prepared — descriptive, specific, under 125 characters
• ✅ Width and height attributes noted — ready to add to the img tag

✅ Run PageSpeed Insights Monthly on Key Pages

Run Google PageSpeed Insights on your homepage, top five blog posts, and top five product pages once per month. New images added to high-traffic pages without following the checklist show up as warnings in PageSpeed reports. Monthly audits catch problems before they accumulate into significant performance issues.

✅ Monitor Core Web Vitals in Google Search Console

Check the Core Web Vitals report in Google Search Console under Experience > Core Web Vitals at least monthly. The report shows which pages fail LCP and CLS thresholds — and often identifies new pages where image optimisation is needed. Pages flagged as Poor or Needs Improvement in Core Web Vitals affect rankings until fixed.

✅ Check Image Search Performance in Google Search Console

Go to Performance > Search Type > Image in Google Search Console to see which images generate search impressions and clicks. Pages with well-optimised images accumulate image search traffic over time. This report shows which queries trigger your images in image search and which pages generate the most image traffic — informing where to focus future optimisation effort.

✅ Audit New Pages Within 24 Hours of Publishing

Run PageSpeed Insights on every new page within 24 hours of publishing. New content pages often contain images that haven’t been through the full optimisation workflow — catching and fixing these issues immediately prevents them from affecting rankings from the moment Google first crawls the page.

The Master Pre-Upload Checklist — Quick Reference

Print this and use it for every image you add to your website:

Format:

• ✅ WebP for all web photographs and complex images
• ✅ SVG for logos and icons
• ✅ PNG for graphics needing transparency in non-web contexts
• ✅ JPG for email and print

File Size:

• ✅ Under 200KB for hero images
• ✅ Under 150KB for product and featured images
• ✅ Under 100KB for inline content images
• ✅ Under 30KB for thumbnails
• ✅ Metadata stripped

Dimensions:

• ✅ Resized to correct display dimensions — not camera resolution
• ✅ 2× dimensions for retina sharpness
• ✅ Width and height attributes added to img tag

File Name:

• ✅ Descriptive — 2 to 5 words
• ✅ Hyphens not underscores
• ✅ All lowercase

Alt Text:

• ✅ Describes actual image content specifically
• ✅ Under 125 characters
• ✅ No keyword stuffing
• ✅ Empty alt text for decorative images

Loading:

• ✅ loading=”lazy” on below-fold images
• ✅ No loading=”lazy” on above-fold images
• ✅ Preload added for LCP image

Verification:

• ✅ PageSpeed Insights run — no image warnings
• ✅ Visual quality checked at 100 percent zoom

Frequently Asked Questions

1. What is the most important image optimisation step?

Format conversion produces the biggest single impact for most websites. Switching from PNG photographs to WebP eliminates 50 to 80 percent of file size immediately. Switching from JPG to WebP eliminates another 25 to 34 percent. If your website currently uses PNG for photographic content, converting to WebP is the highest-impact single change available — even before resizing or compressing.

2. How do I know if my images need optimisation?

Run your website through Google PageSpeed Insights at pagespeed.web.dev. The tool flags every image-specific problem — wrong format, oversized dimensions, insufficient compression, missing lazy loading, unpreloaded LCP images, missing dimensions. If any image-related items appear in the Opportunities section, those images need optimisation.

3. How long does image optimisation take?

A thorough audit and optimisation of an existing 20-page website with 100 images typically takes 2 to 4 hours — longer for larger sites. Using batch conversion and compression tools reduces this significantly. For new images added going forward, applying the pre-upload checklist takes 2 to 3 minutes per image — fast enough to build into every content creation workflow.

4. Do I need to optimise images already on my website or just new ones?

Both. Existing unoptimised images actively hurt current page loading speed and Core Web Vitals scores — they need fixing. New images need the full checklist applied at upload time to prevent the problem from recurring. Start by optimising the most-visited pages first — homepage, top blog posts, best product pages — where the performance improvement delivers the most visitor and ranking benefit.

5. What is the best image compression quality setting?

80 to 85 percent quality for most web images using lossy compression (JPG or WebP). At these settings, compression is genuinely invisible at normal screen viewing sizes — the removed data falls in perceptual categories human eyes detect least accurately. Below 70 percent, visible compression artefacts appear. Above 90 percent, file sizes grow significantly with negligible quality benefit for screen viewing.

6. Does image optimisation actually improve Google rankings?

Yes — through three direct mechanisms. Better image compression improves page loading speed, which Google uses as a ranking factor. Faster loading improves Core Web Vitals scores — specifically LCP and CLS — which Google uses as direct ranking signals. Descriptive alt text and file names improve image search rankings, driving additional organic traffic. All three mechanisms are measurable and have direct ranking impact.

7. How important is alt text for image SEO?

Alt text is the single most important image SEO signal. Google reads alt text as the primary indicator of what an image shows and which queries it answers. Pages with descriptive alt text on every image consistently outperform equivalent pages with poor or missing alt text in both web search and image search. It also provides accessibility benefits for visually impaired users — screen readers read alt text aloud to describe images.

8. Should I optimise images for mobile separately?

The srcset attribute handles mobile optimisation automatically — serving smaller images to mobile viewport sizes without creating separate image files to manage. Implement srcset on all major images and the browser selects the appropriate size for each device automatically. The only mobile-specific design consideration is ensuring images look good cropped to mobile viewport proportions — particularly for hero images and featured images.

9. What causes Cumulative Layout Shift from images?

Missing width and height attributes on image tags cause CLS. When browsers start rendering a page before images load, undefined image dimensions mean the browser reserves no space for them. When images load later, they push surrounding content downward — causing the layout shift that Google measures as CLS. Adding width and height to every img tag tells the browser the aspect ratio before loading, preventing the shift.

10. How do I check if my images are indexed in Google?

Go to Google Search Console, navigate to Performance > Search type > Image. This report shows impressions and clicks from Google Image Search — indicating which images Google has indexed and which queries trigger them. For a more direct check, search Google Images for your brand name or specific image content — indexed images appear in results. Images without alt text, on slow-loading pages, or blocked by robots.txt may not get indexed.

Conclusion

Image optimisation is not a one-time thing but a continual process done for each image on each page. Everything included on the above checklist impacts performance or ranking factors. Conversion removes any unnecessary size from files even before compression. Dimension optimisation removes unnecessary pixels from images. Compression removes invisible data in order to attain target sizes. Alt text informs Google about images. File naming confirms the message. Lazy loading makes the payload smaller initially. Defined dimensions remove layout shifting. CDN delivery improves global speed. And finally, the monthly check keeps tabs on new potential issues.

Go over the checklist for the existing pages that get high traffic first. Go over the pre-upload checklist for each new image from now on. Check PageSpeed Insight monthly for any oversight. The result is cumulative for your page’s loading speeds, Core Web Vitals, and image rankings.

Use our free Image Compressor to compress images to target file sizes and our free Image Resizer to resize to correct display dimensions — both support batch processing, work on any device, require no sign-up, and are completely free.