Picture Tag Builder

You exported the same photo as avif, webp and jpg to save bandwidth, and now you have to recall the picture and source syntax, which format goes first, and where alt and classes belong. Getting the order wrong throws no error at all: the browser quietly serves the heaviest file while you assume the optimization landed.

The browser reads the sources top to bottom and stops at the first type it can decode, falling back to the img if none match. That is why the tool writes avif first, webp next and img last, smallest format to most compatible one. Leave the avif or the webp field blank and that line simply does not appear in the output.

The img is not just the backup plan, it is the element that actually renders, so width, height, classes and loading equals lazy all belong there rather than on picture. Adding width and height reserves the space and keeps the page from jumping. The alt text is copied verbatim, so a double quote inside it will break the attribute. Art direction, meaning a different crop per breakpoint, needs a media attribute on each source, which this form does not write.