Responsive images generation

The right image size will be used by the browser based on the device of the user.

PICTURE tag

picture_redpanda.jpg

WebP and AVIF image sources with srcset created.

Red panda

picture_music.png

image too small -> no srcset

Girl listening to music

picture_screenshot.png

Girl listening to music

Picture tag with media sources

Image

IMG tag

JPEG image

beach

PNG image

First step image (@1066w) is bigger than original size WebP, so step is ignore. story.to.design screeshot

Image without [width] attribute

Girl listening to music

Image without [height] attribute

Girl listening to music

Jam SVG

Jam pot

Bass SVG

Green bass

Image with EXIF rotation should output correctly

Plane seats