P1Issue #61
Image over 100kb
ā What does it mean?
ā What does it mean?
When an image file size exceeds 100 KB, it is considered too heavy for web performance. While not all images can stay under 100 KB (like banners or product shots), unnecessarily large images slow down a website and negatively affect SEO.
šØ Why is it important for SEO?
šØ Why is this a problem for SEO?
Slower Page Speed ā Large images delay rendering and increase load time.
Core Web Vitals Impact ā Heavy images hurt LCP (Largest Contentful Paint), an important ranking factor.
Mobile Performance Issues ā On slower connections, large images significantly increase bounce rate.
Crawl Budget Waste ā Search engines may struggle with slow-loading, image-heavy pages.
ā How to Fix It
ā
Best Practices to Fix
Compress images using tools like TinyPNG, Squoosh, or ImageOptim.
Convert images to next-gen formats (WebP or AVIF).
Use responsive images with srcset to serve smaller sizes on mobile.
Define width and height attributes for images to avoid layout shifts.
Use a CDN with image optimization to automatically resize and compress.
ā Bad Example
š Example
ā Bad (Unoptimized Large Image ā 850 KB JPG):
<img src="/images/product-large.jpg" alt="Smartphone Image">
š The image is 850 KB, slowing down the page.
ā Good Example
ā
Good (Optimized Image ā 85 KB WebP with Responsive Sizes):
<picture>
<source srcset="/images/product.webp" type="image/webp">
<img src="/images/product.jpg" alt="Smartphone Image" width="600" height="400" loading="lazy">
</picture>
š The WebP version is only 85 KB while keeping quality intact.
ā” Result
ā” SEO & UX Impact of Fixing
Faster load times ā Better Core Web Vitals (LCP, FID, CLS).
Improved rankings ā Page speed is a Google ranking factor.
Better mobile experience ā Lighter images = faster browsing.
Higher conversions ā Users stay engaged on fast websites.
š Rule of thumb:
Icons/Thumbnails ā under 50 KB
Product/Content images ā under 100 KB
Hero banners ā under 200 KB (optimized & compressed)