This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img src="myimage.jpg"> | |
<style> | |
img { | |
width: 100%; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
convert original.jpg -resize 2400x original_2400.jpg | |
convert original.jpg -resize 1500x original_1500.jpg | |
convert original.jpg -resize 800x original_800.jpg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img src="cat.jpg" alt="Example Cat"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img src="cat.jpg" | |
alt="Example Cat" | |
srcset="cat-600.jpg 600w, | |
cat-1200.jpg 1200w, | |
cat-1800.jpg 1800w, | |
cat-2400.jpg 2400w"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img sizes="[media query] [length], | |
[media query] [length], | |
... | |
[default length]"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img src="cat.jpg" | |
alt="Example Cat" | |
srcset="cat-600.jpg 600w, | |
cat-1200.jpg 1200w, | |
cat-1800.jpg 1800w, | |
cat-2400.jpg 2400w" | |
sizes="(min-width: 1600px) 33vw, | |
(min-width: 900px) 50vw, | |
90vw"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<picture> | |
<source media="(max-width: 600px)" | |
srcset="cropped_art_direction.jpg"> | |
<img src="art_direction.jpg" | |
alt="An example of art direction"> | |
</picture> |
OlderNewer