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 / responsive-images-15.html
Created Sep 19, 2018
Uploadcare GIF to WebM and MP4 example
View responsive-images-15.html
<video width=”384” height=”216” autoplay loop muted webkit-playsinline playsinline>
<source src=”https://ucarecdn.com/:uuid/gif2video/-/format/webm/road.gif”
type=”video/webm”>
<source src=”https://ucarecdn.com/:uuid/gif2video/-/format/mp4/road.gif”
type=”video/mp4”>
</video>
View responsive-images-14.html
<video width=”384” height=”216” autoplay loop muted webkit-playsinline playsinline>
<source src=”https://ucarecdn.com/:uuid/gif2video/-/format/mp4/road.gif”
type=”video/mp4”>
</video>
@uploadcare-user
uploadcare-user / responsive-images-13.sh
Created Sep 19, 2018
CLI formatting of GIF image to MP4 video
View responsive-images-13.sh
ffmpeg -i input.gif output.mp4
@uploadcare-user
uploadcare-user / responsive-images-12.html
Created Sep 19, 2018
Uploadcare simplified WebP formatting and variable resolution (no <picture> tag)
View responsive-images-12.html
<img src="https://ucarecdn.com/:uuid/-/format/auto/"
srcset="https://ucarecdn.com/:uuid/-/format/auto/-/resize/300x/ 300w,
https://ucarecdn.com/:uuid/-/format/auto/-/resize/600x/ 600w"
sizes="300px">
@uploadcare-user
uploadcare-user / responsive-images-11.html
Created Sep 19, 2018
Uploadcare automatic image formatting
View responsive-images-11.html
<img src="https//ucarecdn.com/:uuid/-/format/auto/">
View responsive-images-10.html
<img src="https//ucarecdn.com/:uuid/-/format/jpeg/">
@uploadcare-user
uploadcare-user / responsive-images-9.html
Created Sep 19, 2018
Example of implementing the WebP image format in the <picture> tag
View responsive-images-9.html
<picture>
<source type="image/webp"
srcset="example-300.webp 300w,
example-600.webp 600w"
sizes="300px">
<img src="example.jpg"
srcset="example-300.jpg 300w,
example-600.jpg 600w"
sizes="300px">
@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>
@uploadcare-user
uploadcare-user / responsive-images-7.html
Last active Sep 19, 2018
Example of using responsive image techniques to implement Art Direction
View responsive-images-7.html
<picture>
<source media="(max-width: 600px)"
srcset="cropped_art_direction.jpg">
<img src="art_direction.jpg"
alt="An example of art direction">
</picture>
@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">
You can’t perform that action at this time.