Largest Contentful Paint (LCP) measures how long the biggest visible element, usually a hero image or banner, takes to appear. Google considers 2.5 seconds or less good. To improve LCP with images, make the hero image as small as possible in file size (right dimensions, modern format like WebP, sensible compression), never lazy-load it, give it high fetch priority, and avoid hiding it behind sliders or JavaScript. On most small business websites, fixing the hero image alone is the biggest single speed win.
- LCP under 2.5 seconds is “good” in Google’s Core Web Vitals.
- The LCP element on most pages is the top image or banner.
- Resize, convert to WebP and compress the hero image first.
- Do not lazy-load the hero image. Lazy-load the images below it.
- Shrink images for free with the Image Compressor.
A beautiful homepage nobody waited for
Picture a resort in Cox’s Bazar with a stunning homepage: a full-width sunset photo straight from the photographer’s camera, 6,000 pixels wide and 9 MB. On office Wi-Fi it looks fine. On a phone with mobile data, visitors stare at a blank white space for six or seven seconds. Many of them hit the back button and book somewhere else.
The fix took twenty minutes: resize the photo to the width it is actually shown at, convert it to WebP, compress it to about 250 KB and stop the slider plugin from loading it late. The same sunset now appears in about two seconds.
What LCP measures
| LCP time | Google’s rating |
|---|---|
| 2.5 seconds or less | Good |
| 2.5 to 4 seconds | Needs improvement |
| Over 4 seconds | Poor |
Google measures it at the 75th percentile of real visits, so the experience of people on slower phones and networks counts. Check yours in PageSpeed Insights or the Core Web Vitals report in Google Search Console.
Image fixes that improve LCP
- Find the LCP elementRun PageSpeed Insights. It tells you which element is the LCP. Often it is the hero image.
- Resize to display sizeA banner shown at 1600 pixels wide does not need a 6,000 pixel file. Provide a smaller version for mobile too.
- Use WebP or AVIFConvert with the image converter. WebP is usually far smaller than JPG at similar quality.
- Compress sensiblyQuality around 75 to 80 for hero images. Aim for well under 300 KB where possible.
- Do not lazy-load itLazy-loading delays the image the visitor sees first. Lazy-load only images further down.
- Raise its priorityAdd fetchpriority=”high” to the hero image. Recent WordPress versions try to do this automatically for the first large image.
- Avoid CSS background and slider tricksImages loaded through JavaScript sliders or CSS backgrounds are discovered late by the browser.
Other things that slow LCP
- Slow server response: cheap hosting or no page caching.
- Render-blocking CSS and JavaScript: heavy themes and plugins.
- Web fonts: large font files delaying a text-based LCP element.
- Pop-ups and cookie banners that cover or delay the main content.
WordPress quick wins
- Use a caching plugin and a CDN.
- Upload images at the right size instead of relying on the theme to shrink them in the browser.
- Make sure your optimisation plugin does not lazy-load the first image.
- Read our full WordPress image optimisation guide.
Need hands-on help?
If your site still feels slow after fixing images, the cause is often the theme, hosting or plugins. Book a call and we can look at your Core Web Vitals together. Learn more about choosing image dimensions in ideal image sizes for websites.
Sources
Frequently asked questions
What is a good LCP score?
Google rates LCP of 2.5 seconds or less as good, 2.5 to 4 seconds as needs improvement, and over 4 seconds as poor.
What is usually the LCP element?
On most pages it is the hero image, banner or a large heading near the top.
Should I lazy-load my hero image?
No. Lazy-loading delays the image visitors see first. Only lazy-load images further down the page.
Does WebP improve LCP?
Often yes, because WebP files are usually much smaller than JPG at similar quality, so they download faster.
How do I check my LCP?
Use Google PageSpeed Insights or the Core Web Vitals report in Google Search Console.
Shrink photos for websites, email and forms in seconds, privately in your browser.
Guides for this tool
Guide · 3 min readLossy vs Lossless Compression: Which Should You Use for Images?
Guide · 3 min readHow to Email Large Photos: Make Images Small Enough to Send
Guide · 3 min readHow to Send High-Quality Photos on WhatsApp (HD and Original)
Guide · 3 min readWordPress Image Optimisation: Speed Up Your Website (2026 Guide)Want a tool, website or app like this for your business?
Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.
- 650+ projects
- 7+ years
- 4.9★ rating
- Govt. registered freelancer
