Examples

Responsive Hero

<picture>
  <source
    type="image/avif"
    srcset="
      https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=720&f=avif&q=80 720w,
      https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=1440&f=avif&q=82 1440w
    "
  >
  <img
    src="https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=960&f=webp&q=82"
    width="960"
    height="540"
    alt="Responsive example"
  >
</picture>

Product Grid

https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=480&h=600&fit=cover&p=center&f=webp&q=80

Smart Crop

https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=640&h=360&fit=cover&p=attention&f=avif&q=82

Visual Effects

https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=800&filter=sepia&con=15&sharp=3&f=webp&q=84

Shape And Background

https://demo.skymage.net/v1/daudau.cc/images/crab.png?w=400&h=400&fit=cover&shape=circle&bg=ffffff&f=webp

External Storage

https://demo.skymage.net/v1/ex/product-images/catalog/item-001.jpg?w=600&h=600&fit=contain&f=webp&q=84

Build additional combinations in the playground.