Technical SEO
Core Web Vitals, crawlability, XML sitemaps and mobile-first indexing explained.
Read guideImages are both a ranking opportunity and a performance liability. Optimised correctly they boost rankings, improve Core Web Vitals, and drive traffic from Google Images. Neglected, they silently suppress your site's entire performance.
Images play a dual role in SEO: they are a ranking opportunity (Google Images drives significant traffic for visual queries) and a performance factor (unoptimised images are the leading cause of poor LCP scores, which directly affect rankings through Core Web Vitals). Most websites treat images as an afterthought — a significant missed opportunity, particularly for e-commerce, photography, food, travel, and fashion websites where visual search is a primary discovery channel.
The file name of an image is the first information a search engine receives about its content — set before the image is uploaded. Most cameras produce uninformative names like IMG_4892.jpg. These tell Google nothing about the image's content or relevance.
Before uploading any image, rename it descriptively using lowercase letters and hyphens: seo-keyword-research-guide-diagram.webp rather than IMG_4892.jpg. Include your primary keyword where it genuinely describes the image content. Use hyphens (not underscores) to separate words. This simple habit, applied consistently, provides meaningful keyword signals to Google Images while adding virtually no extra time to your publishing workflow.
Alt text serves two critical purposes: it describes images to visually impaired users who rely on screen readers, and it tells search engines what an image depicts. Both are important — accessibility is both ethically correct and an E-E-A-T quality signal.
Bad: alt="" on a meaningful image
Bad: alt="SEO SEO tips SEO guide SEO 2026 best SEO"
Good: alt="Diagram showing the three stages of Google crawling and indexing"
Good: alt="Screenshot of Google Search Console Core Web Vitals report showing LCP score of 1.8 seconds"
Keep alt text under 125 characters. Do not begin with "Image of" or "Picture of." Use empty alt="" for purely decorative images.
WebP is Google's open-source image format providing superior compression vs both JPEG and PNG, typically reducing file sizes by 25–35% at equivalent visual quality. All modern browsers support WebP. For any website in 2026, WebP should be your default format for all photographs and complex graphics. PNG remains appropriate for images requiring transparent backgrounds or lossless quality.
Use the HTML <picture> element with srcset to serve WebP to supported browsers and JPEG as a fallback, future-proofing your delivery while maintaining compatibility. Most image optimisation WordPress plugins (ShortPixel, Imagify, EWWW Image Optimizer) handle WebP conversion and fallback delivery automatically without manual intervention.
Even the best format is useless without appropriate compression. For most web images, 80% quality WebP or JPEG provides imperceptible quality loss compared to 100% while reducing file size by 60–70%. Tools for compression: Squoosh (free Google tool, excellent for one-off images with live quality preview), ImageOptim (free Mac app for batch processing), ShortPixel (bulk API compression, WordPress plugin), and Cloudinary (cloud CDN handling compression, format conversion, and responsive delivery automatically for high-volume image sites). Always compress before uploading — recompressing already-optimised images degrades quality.
Responsive images ensure mobile users download appropriately sized images rather than full-size desktop images displayed at a fraction of their resolution. Use the srcset attribute to provide multiple image sizes and let the browser select the most appropriate for the device and screen resolution. This can reduce mobile image payload by 60–80% for a typical page.
Lazy loading defers loading of off-screen images until users scroll near them, reducing initial page weight and improving LCP. In modern HTML this is as simple as adding loading="lazy" to any img tag. Crucially: never lazy-load your above-the-fold hero image — that image should be eagerly loaded (or preloaded with a <link rel="preload"> tag) to maximise LCP performance. Apply lazy loading to all images below the fold only.
Adding ImageObject schema helps Google understand and surface your images in visual search results. Product schema includes image properties automatically. Article schema includes image properties for editorial content. Recipe schema includes dish photo metadata. Ensure all images referenced in schema are high quality, clearly relevant to the page content, and ideally 1200×630px or larger for best rich result display. Validate all schema using Google's free Rich Results Test. For e-commerce sites, well-implemented Product schema with images is one of the most direct paths to Google Shopping organic listings and image-rich results for product queries. See our full Schema Markup guide for complete implementation details.
Question 1 of 5