uploadcare-user

<img sizes="[media query] [length],
            [media query] [length],
            ...
            [default length]">

uploadcare-user

<img src="cat.jpg"
     alt="Example Cat"
     srcset="cat-600.jpg 600w,
             cat-1200.jpg 1200w,
             cat-1800.jpg 1800w,
             cat-2400.jpg 2400w">

uploadcare-user

<img src="cat.jpg" alt="Example Cat">

uploadcare-user

<img src="https://ucarecdn.com/:uuid/original.jpg"
     alt="An example of a responsive image"
     srcset="https://ucarecdn.com/:uuid/-/resize/3000x/orignal_3000.jpg 3000w,
             https://ucarecdn.com/:uuid/-/resize/2400x/original_2400.jpg 2400w,
             https://ucarecdn.com/:uuid/-/resize/1500x/original_1500.jpg 1500w,
             https://ucarecdn.com/:uuid/-/resize/800x/original_800.jpg 800w"
     sizes="(min-width: 1600px) 80vw, 100vw">

uploadcare-user

convert original.jpg -resize 2400x original_2400.jpg
convert original.jpg -resize 1500x original_1500.jpg
convert original.jpg -resize 800x original_800.jpg

uploadcare-user

<picture>
    <source
        srcset="myimage@1000.jpg 1000w, myimage@2000.jpg 2000w"
        sizes="(min-width: 1000px) 60vw, 100vw"
	media="(orientation: landscape)">
    <source
	srcset="myimage@450.jpg 1x, myimage@900.jpg 2x"
	sizes="(min-width: 450px) 450px, 100vw"
	media="(orientation: landscape)">
    <source

uploadcare-user

<img src="myimage.jpg"
    srcset="myimage@400.jpg 400w,
            myimage@500.jpg 500w,
            myimage@1000.jpg 1000w"
    sizes="(max-width: 500px) calc(100vw - 30px), 500px">

uploadcare-user

<img src="myimage.jpg">
<style>
    img {
        width: 100%;
    }
</style>