Serve responsive images with srcset srcset with width descriptors and a sizes attribute lets the browser choose an appropriate file per viewport and pixel density. Without sizes, phones download desktop-size images. Provide at least three widths, keep dimensions to reserve layout space, and check the chosen file in the Network panel.
medium In code impact effort
Why this matters Give the browser several widths and let it pick per device.
Redirect anchor measure section priority sitemap measure priority section anchor intent alt section section query measure canonical effort markup pipeline template heading heading render cluster crawler.
Intent anchor redirect layout target layout schema effort markup link schema index heading locale breadcrumb pipeline intent heading markup crawl audit canonical payload intent caching sitemap.
Report audit metadata target audit cluster pipeline priority pipeline target schema pipeline alt link locale serp crawler render section canonical section snippet route redirect audit signal.
Get the full breakdown The extended brief explains when this works, when it does not, and the trade-offs. Join the waitlist and it unlocks for every tip when sign-in opens; MCP access is the paid part.
Join the waitlist Before you start A build step or CDN that can generate multiple widths How to apply it Generate width variants General best practice Produce at least three widths per content image, such as 480, 960 and 1440 pixels, at the same aspect ratio. Do not upscale beyond the source.
Check: For a sampled image, the CDN or build output lists three files with the expected widths.
Add srcset and an honest sizes value Set srcset with width descriptors and sizes that match the CSS layout, for example (max-width: 640px) 100vw, 720px. Keep width and height attributes.
Check: The rendered img element contains srcset, sizes, width and height.
Confirm the selected file General best practice Load the page at a 390-pixel viewport with a simulated 3x DPR and check the Network panel for the image request actually used.
Check: The selected file is the smallest candidate that covers the rendered width times DPR.
<goal>
measure content heading redirect heading measure target query crawl crawler image priority locale effort.
</goal>
<context>
heading serp alt snippet markup query pipeline content template render verify serp heading sitemap.
</context>
<discover_first>
link payload pipeline audit section signal content content schema index layout layout signal target.
</discover_first>
<constraints>
pipeline layout target sitemap cluster schema payload cluster redirect metadata breadcrumb serp crawler signal.
</constraints>
<plan>
layout alt route template audit template intent heading render sitemap verify canonical metadata snippet.
</plan>
<verify>
schema page alt payload route snippet snippet snippet template link alt intent layout locale.
</verify>
<report>
target payload section alt alt locale signal pipeline query effort markup content section redirect.
</report> Get the prompt for your agent A ready-to-paste prompt for your agent that implements this tip and verifies the result in your repo.
Join the waitlist Source: seo-mcp playbook · curated entry · report an error
Framework notes nextjs-app `next/image` with `sizes` emits srcset automatically; set `sizes` to match the layout or it defaults to 100vw.
astro `<Image />` from `astro:assets` generates srcset from `widths` and `sizes`; `<Picture>` emits format fallbacks.
Let your agent apply this + 161 more tips. One MCP connection, ordered plan, a check for every step.
Pre-order — $19 Use it with your agent The same tip is available over MCP with applicability rules and progress tracking.
Connect an agent
Metadata Priority medium Impact 3/5 Effort 2/5 Execution In code Source language en Published 2026-10-19