Check if your images are responsive ready

SiteCurl checks each <img> tag on your page for a srcset field. This field tells the browser which image sizes exist so it can pick the right one for the user's screen size.

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

The bar is lenient since not each image needs srcset. Small icons, logos, and decorative shots under 10 KB gain little from many sizes. The check focuses on catching pages where most content shots are served at desktop size to all devices.

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

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

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

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

Shots are often 50-80% of a page's total weight. Serving the right size to each device is the single largest way to cut page weight for mobile users. The bandwidth savings are direct and clear.

Google's Lighthouse audits check for right-sized shots and flags any image whose fetched size is much larger than its shown size. Fixing this directly lifts your Lighthouse speed score.

Mobile data is not free for many users. In markets with metered plans, wasting 1 MB of extra image downloads costs the user money. Right-sized shots are a signal that you respect your users' bandwidth and devices.

Content sites with large hero shots and inline photos need this the most. A blog post with 5 inline photos at 1200px wide forces mobile readers to fetch 5 desktop-sized files they never see at full size.

Online stores with product galleries serve many shots per product. If a product page shows 6 shots, responsive markup can save hundreds of kilobytes per page on mobile.

Marketing sites with full-width background shots in each section often use the same 2000px image for all screen sizes. Making 3-4 size versions and using srcset cuts the download size for mobile users 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.

Making too few sizes. Two sizes (small and large) leave a gap. A tablet user may grab the large one since the small one is too low grade. Three to four sizes covers the common range without too much work.

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

Using srcset with the same file. Listing the same file at new widths does not help. The browser grabs one, but it is still the same large file. Each srcset entry must point to a real smaller version.

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

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

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

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