Uploadcare uploadcare-user
uploadcare-user
/ responsive-images-15.html
Created
September 19, 2018 18:26
Uploadcare GIF to WebM and MP4 example
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
| <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> |
uploadcare-user
/ responsive-images-14.html
Created
September 19, 2018 18:24
Uploadcare gif2video example
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
| <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
/ responsive-images-13.sh
Created
September 19, 2018 18:23
CLI formatting of GIF image to MP4 video
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
| ffmpeg -i input.gif output.mp4 |
uploadcare-user
/ responsive-images-12.html
Created
September 19, 2018 18:20
Uploadcare simplified WebP formatting and variable resolution (no <picture> tag)
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/-/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
/ responsive-images-11.html
Created
September 19, 2018 18:19
Uploadcare automatic image formatting
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/-/format/auto/"> |
uploadcare-user
/ responsive-images-10.html
Created
September 19, 2018 18:18
Uploadcare JPEG formatting
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/-/format/jpeg/"> |
uploadcare-user
/ responsive-images-9.html
Created
September 19, 2018 17:49
Example of implementing the WebP image format in the <picture> tag
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 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
/ responsive-images-8.html
Last active
September 19, 2018 17:41
Art Direction combined with variable resolution
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_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
/ responsive-images-7.html
Last active
September 19, 2018 17:43
Example of using responsive image techniques to implement Art Direction
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> |
uploadcare-user
/ responsive-images-6.html
Created
September 19, 2018 17:34
Basic responsive image example using `srcset` and `sizes`
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"> |
NewerOlder