Skip to content

Instantly share code, notes, and snippets.

Uploadcare uploadcare-user

Block or report user

Report or block uploadcare-user

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@uploadcare-user
uploadcare-user / ri_codeblock_1.html
Created Nov 2, 2016
codeblock #1 responsive images
View ri_codeblock_1.html
<img src="myimage.jpg">
<style>
img {
width: 100%;
}
</style>
@uploadcare-user
uploadcare-user / ri_codeblock_2.html
Last active Nov 2, 2016
codeblock #2 responsive images
View ri_codeblock_2.html
<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
uploadcare-user / ri_codeblock_3.html
Last active Nov 2, 2016
codeblock #3 responsive images
View ri_codeblock_3.html
<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
uploadcare-user / responsive-images-1.sh
Created Sep 19, 2018
Command line image generation
View responsive-images-1.sh
convert original.jpg -resize 2400x original_2400.jpg
convert original.jpg -resize 1500x original_1500.jpg
convert original.jpg -resize 800x original_800.jpg
View responsive-images-2.html
<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">
View responsive-images-3.html
<img src="cat.jpg" alt="Example Cat">
@uploadcare-user
uploadcare-user / responsive-images-4.html
Created Sep 19, 2018
Basic responsive image using `srcset`
View responsive-images-4.html
<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
uploadcare-user / responsive-images-5.html
Created Sep 19, 2018
<img> attribute `sizes` syntax
View responsive-images-5.html
<img sizes="[media query] [length],
[media query] [length],
...
[default length]">
@uploadcare-user
uploadcare-user / responsive-images-6.html
Created Sep 19, 2018
Basic responsive image example using `srcset` and `sizes`
View responsive-images-6.html
<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">
@uploadcare-user
uploadcare-user / responsive-images-8.html
Last active Sep 19, 2018
Art Direction combined with variable resolution
View responsive-images-8.html
<picture>
<source media="(max-width: 600px)"
srcset="cropped_art_direction_300.jpg 300w,
cropped_art_direction_600.jpg 600w"
sizes="300px">
<img src="art_direction.jpg" alt="An example of art direction"
srcset="art_direction_600.jpg 600w,
art_direction_1200 1200w"
sizes="600px">
</picture>
You can’t perform that action at this time.