Check if your images are responsive ready

SiteCurl checks every <img> tag on your page for a srcset attribute. This attribute tells the browser which image sizes are available so it can pick the right one for the visitor's screen size.

If 5 or fewer images are missing srcset, the check passes. More than 5 triggers a warning. The finding shows how many images lack srcset and lists up to 5 example URLs so you know which files to address.

The threshold is forgiving because not every image needs srcset. Small icons, logos, and decorative images under 10 KB benefit little from multiple sizes. The check focuses on catching pages where most content images are served at desktop resolution to all devices.

A standard <img> tag points to one file. Every device downloads that same file. If it is an 1800px-wide hero image at 400 KB, a phone with a 390px screen downloads the full 400 KB and then the browser scales it down to fit. The visitor waited for a file four times larger than what they needed.

The srcset attribute solves this by listing multiple versions of the same image at different widths. The browser picks the smallest version that still looks sharp on the visitor's screen. A phone might download the 400px version (50 KB) while a desktop gets the 1200px version (200 KB). Same image, right size for each device.

The sizes attribute works with srcset to tell the browser how wide the image will be displayed. Without sizes, the browser assumes the image fills the full viewport width, which may lead to it choosing a larger file than needed.

This matters more as image counts grow. A page with 10 images at 200 KB each loads 2 MB. If responsive images cut that to 80 KB per image on mobile, the page loads 800 KB instead. That is a 60% reduction in image data for mobile visitors.

Images are typically 50-80% of a page's total weight. Serving correctly sized images to each device is the single largest opportunity to reduce page weight for mobile visitors. The bandwidth savings are direct and measurable.

Google's Lighthouse audits check for properly sized images and flags any image whose downloaded size is significantly larger than its displayed size. Fixing responsive images directly improves your Lighthouse performance score.

Mobile data is not free for many visitors. In markets with metered connections, wasting 1 MB of extra image downloads costs the visitor money. Responsive images are a signal that you respect your visitors' bandwidth and devices.

Content sites with large hero images and inline photography need responsive images the most. A blog post with 5 inline photos at 1200px wide forces mobile readers to download 5 desktop-sized images they never see at full resolution.

E-commerce sites with product galleries serve multiple images per product. If a product page shows 6 images of a product, responsive markup can save hundreds of kilobytes per page on mobile.

Marketing sites with full-width background images in every section often use the same 2000px image for all viewports. Creating 3-4 size variants and using srcset cuts the download size for mobile visitors by half.

Step 1: Identify images missing srcset. Run a SiteCurl scan. The responsive images finding shows which images lack srcset and how many there are.

Step 2: Create multiple image sizes. For each content image, generate 3-4 sizes. A common set: 400px, 800px, 1200px, and 1600px wide. Use an image tool like ImageMagick: convert original.jpg -resize 800x800\> image-800.jpg. Or use your CMS, which often generates sizes automatically.

Step 3: Add srcset and sizes to the img tag. Example: <img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="Description">. The browser picks the best match for the visitor's screen.

Step 4: Use your CMS or CDN features. WordPress generates multiple sizes on upload and can add srcset automatically via wp_get_attachment_image(). Cloudinary and imgix generate sizes on the fly from a single upload. Check your platform before creating sizes manually.

Step 5: Skip srcset for small images. Icons, logos, and decorative images under 10 KB do not benefit from multiple sizes. The overhead of multiple files outweighs the savings. Focus on content images that are 50 KB or larger.

Creating too few sizes. Two sizes (small and large) leave a gap. A tablet visitor may download the large version because the small one is too low quality. Three to four sizes covers the common viewport range without excessive complexity.

Forgetting the sizes attribute. Without sizes, the browser assumes the image fills the full viewport width. If your image only fills half the page, the browser may download a file twice as large as needed. Always pair srcset with sizes.

Using srcset with identical files. Listing the same file at different widths does not help. The browser downloads one, but it is still the same oversized file. Each srcset entry must point to a genuinely different-sized version.

Upscaling small images. If your original image is 600px wide, do not create a 1200px version. Upscaling adds file size without adding detail. Only create sizes smaller than or equal to the original.

After adding srcset, run another SiteCurl scan. The finding should show fewer images missing srcset. You can also verify in Chrome dev tools: open the Network tab, filter by 'Img,' and set the device toolbar to a mobile viewport. Reload the page. The images should download smaller files than on desktop.

Compare total image bytes on mobile vs. desktop. Open the Network tab summary at the bottom. If responsive images are working, the mobile total should be noticeably lower than desktop.

Responsive images serve the right file size to each device. Mobile visitors get smaller files, desktop visitors get full resolution, and no one downloads more than they need. Add srcset and sizes to content images over 50 KB for the biggest speed gains on mobile.