--- title: "Optimize website images to speed up pages and rank in image search" description: "Pick WebP or AVIF, compress and resize, serve responsive images, lazy-load the right ones, and fix the LCP and CLS problems that images cause." canonical: "https://scalewithsearch.com/articles/image-optimization-ux-seo" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Optimize website images to speed up pages and rank in image search. A contractor uploads a new hero photo straight from the camera. The file is 6,000 pixels wide and several megabytes. On a phone over a mobile network, the page shows a blank space for seconds. Then the photo appears and pushes the text down the screen. PageSpeed Insights now reports a poor Largest Contentful Paint and a poor Cumulative Layout Shift. Images are often the heaviest files on a page. The largest image above the fold is often the element that sets Largest Contentful Paint (LCP). An image with no reserved space causes layout shift. A good image also brings traffic from Google Images, but only if Google can find it and understand it. This article covers format choice, compression, responsive delivery, lazy loading, the Core Web Vitals fixes, and the markup that helps Google index each image. ## Measure before you change anything Start with one template, such as the homepage or a product page. Run it in PageSpeed Insights and write down four things: 1. The LCP time and the LCP element. The report names the element. If it is an image, that image is your first target. 2. The Cumulative Layout Shift (CLS) score and the elements that shift. 3. The image audits: "Properly size images", "Serve images in next-gen formats", "Efficiently encode images", and "Defer offscreen images". 4. The total image bytes in the network summary. Then open Chrome DevTools, select the `Network` tab, and filter by `Img`. Sort by size. The largest files are usually the fastest wins. The [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide) explains how field data and lab data differ, so you know which numbers to trust. ## Choose the format for each image Use the format that fits the content: | Format | Use it for | Notes | |---|---|---| | AVIF | Photos and complex images | Usually the smallest files at a given visual quality. Encoding is slower. | | WebP | Photos and graphics, and the fallback when AVIF is not available | Smaller than JPEG and PNG at similar quality. Supports transparency. | | JPEG | Final fallback for photos | Universal support. Larger files. | | PNG | Screenshots and graphics that need exact pixels or transparency, when WebP is not possible | Lossless, often large. | | SVG | Logos, icons, and simple illustrations | Vector, scales to any size. Minify it and remove editor metadata. | As of 2024, current versions of Chrome, Edge, Firefox, and Safari all display WebP and AVIF. Keep a JPEG or PNG fallback for older browsers and for tools that cannot read the new formats. Google Search publishes the list of image formats it indexes in its image SEO documentation. JPEG, PNG, WebP, GIF, and SVG are on that list. In August 2024, Google added AVIF to the list, for Google Images and other places that show images in Google Search. Serve the best format that each browser accepts with the `` element: ```html Roofing crew installing architectural shingles on a two-story house ``` The browser takes the first `` it supports. The `` element supplies the fallback, the alt text, and the dimensions. ## Resize and compress ### Resize to the largest size you display Never send a 6,000-pixel image to a slot that displays at 800 pixels. Find the largest width the image ever displays, across all breakpoints, and multiply by 2 for high-density screens. That is the largest file you need. A full-width hero on a desktop layout rarely needs more than 2,400 pixels. ### Compress with a quality setting, then look Lossy compression removes detail the eye does not notice. A quality setting between 70 and 85 is a common starting point for JPEG and WebP. AVIF often looks the same at a lower number. Do not trust a number alone. Compare the output with the original at 100 percent zoom, and check skin tones, text, and fine patterns. Use a tool that you can repeat: - Squoosh for single images and side-by-side comparison. - `sharp` in Node.js, or ImageMagick, in a build script. - `cwebp` and `avifenc` on the command line. Strip metadata such as camera data and embedded thumbnails unless you need it. The photo keeps its look and loses bytes. ### Automate it Manual compression fails the first time someone uploads a photo in a hurry. Put the work in the pipeline. Most frameworks and CMS platforms offer an image component or plugin that resizes and converts on upload or at build time. An image CDN such as Cloudinary, imgix, or Cloudflare Images can resize, convert, and cache on request. The [CDN configuration guide](/articles/cdn-configuration-seo) covers cache headers for those files. ## Serve responsive images A phone and a desktop need different files. Give the browser a set of widths with `srcset`, and tell it the display size with `sizes`: ```html Renovated kitchen with white shaker cabinets and a quartz island ``` The `w` value is the real pixel width of each file. The `sizes` value says the image fills the screen width on small screens and half of it on larger ones. The browser then picks the smallest file that looks sharp on that device. Combine `srcset` with `` to serve responsive AVIF and WebP files. ## Fix the Core Web Vitals problems ### Largest Contentful Paint If the LCP element is an image, make that image arrive early: 1. Do not lazy-load it. Remove `loading="lazy"` from any image above the fold. 2. Mark it as high priority with `fetchpriority="high"`. Browsers that do not support the attribute ignore it. 3. Put it in the HTML as an ``. Do not load it from JavaScript or from a CSS background, because the browser finds those late. 4. Resize and compress it with the rules above. 5. Serve it from your own domain or a fast CDN, with long cache headers. ```html ... ``` If the image is chosen by CSS or JavaScript and cannot move into the HTML, preload it: ```html ``` LCP must be 2.5 seconds or less for a good score. ### Cumulative Layout Shift An image with no size makes the page jump when it loads. Always set `width` and `height` on ``. The browser uses the ratio to reserve the space before the file arrives. For a flexible layout, keep the attributes and let CSS scale the image: ```css img { max-width: 100%; height: auto; } ``` For containers, `aspect-ratio` in CSS does the same job. CLS must be 0.1 or less for a good score. ### Interaction to Next Paint Images rarely cause poor Interaction to Next Paint (INP) directly. Heavy image carousels and scripts that decode many large images can. Keep carousel scripts light, and load slides after the first one only when they are needed. ## Lazy-load the right images Native lazy loading defers images until the user scrolls near them: ```html ... ``` Use `loading="lazy"` on images below the fold, such as galleries, long article images, and footer logos. Never use it on the LCP image or on anything visible on first load. Googlebot supports native lazy loading and renders pages with a tall viewport. Content that loads only on a scroll event or a click can still be missed. The [lazy loading implementation guide](/articles/lazy-loading-seo-implementation) shows safe patterns for JavaScript galleries. ## Help Google understand each image Speed brings users. Context brings image search traffic. Write alt text that describes the image for someone who cannot see it. "Roofing crew installing architectural shingles on a two-story house" helps both accessibility and search. "Roofing roofer roof repair" helps neither. Use an empty `alt=""` for decorative images, so screen readers skip them. Use descriptive file names: `kitchen-shaker-cabinets.webp`, not `IMG_4032.webp`. Place each image near the text that explains it. Google reads the surrounding text, the page title, and the caption to understand the image. Use `` for content images. Google does not index images set as CSS backgrounds. For a large image library, list images in your sitemap with the image extension: ```xml https://example.com/projects/kitchen-remodel https://example.com/img/kitchen-1600.webp ``` In 2022, Google deprecated the `image:caption`, `image:title`, `image:geo_location`, and `image:license` tags. Use `image:loc` only. Put captions and titles on the page instead. ## Work through one hero image Suppose a service business has a hero photo exported from a camera. It is a 6,000-pixel JPEG with full metadata, loaded as a CSS background. It has no dimensions, and a plugin added `loading="lazy"` to it. PageSpeed Insights names it as the LCP element. 1. Move the image from the CSS background into an `` element in the HTML. 2. Export four widths: 640, 1,024, 1,600, and 2,400 pixels. 3. Encode each width as AVIF and WebP, with a JPEG fallback. Start at quality 75, then compare with the original. 4. Strip the camera metadata. 5. Serve the files with ``, `srcset`, and `sizes="100vw"`. 6. Remove `loading="lazy"`, add `fetchpriority="high"`, and set `width` and `height`. 7. Write alt text that names what the photo shows. 8. Run PageSpeed Insights again and compare LCP, CLS, and total image bytes with your first measurement. Then repeat the same steps for each template. Record the results, and set a budget for image bytes per page so the next upload cannot undo the work. The [performance budgets guide](/articles/performance-budgets-seo) shows how to enforce that limit in the build. ## Check every image before release - The format is AVIF or WebP with a fallback, or SVG for vector art. - The file is no wider than twice its largest display width. - The image is compressed and has no unneeded metadata. - `srcset` and `sizes` are set for images wider than a phone screen. - `width` and `height` are set on every ``. - The LCP image is not lazy-loaded and has `fetchpriority="high"`. - Images below the fold use `loading="lazy"`. - Alt text describes the image, or is empty for decoration. - The file name describes the content. - Content images use ``, not CSS backgrounds. ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```