← All Tools

srcset & <picture> Builder

Build responsive image markup — srcset with width (w) or density (x) descriptors, sizes media queries, and full <picture> elements with art direction and format fallbacks (AVIF → WebP → JPEG).

Tip: include {w} or {x} in the URL template — it will be replaced with each descriptor value.

Output

      
    

  


  

    
Descriptor cheat sheet

    

      w descriptor — tells the browser the actual pixel width of each candidate. Requires a sizes
      attribute describing the layout width. The browser picks based on viewport and DPR.

      x descriptor — tells the browser each candidate's density multiplier (1x, 2x, 3x). Use when the image
      always renders at a fixed CSS size.

      <picture> — use for art direction (different crop per breakpoint) or format fallbacks
      (image/avif, image/webp). The browser picks the first matching source.
    

  





Copied!