Mike Engel mike-engel
👻
mike-engel
/ pictureCloud.html
Last active
October 15, 2015 02:30
A simple picture demo using cloudinary
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="https://res.cloudinary.com/beardfury/image/upload/c_scale,w_1024/v1444865801/forest.jpg 1024w, | |
| https://res.cloudinary.com/beardfury/image/upload/c_scale,w_5000/v1444865801/forest.jpg 5000w" | |
| media="(min-width: 1024px)"> | |
| <source srcset="https://res.cloudinary.com/beardfury/image/upload/c_scale,w_320/v1444865801/forest.jpg 320w, | |
| https://res.cloudinary.com/beardfury/image/upload/c_scale,w_768/v1444865801/forest.jpg 768w" | |
| media="(min-width: 320px)"> | |
| <img src="https://res.cloudinary.com/beardfury/image/upload/c_scale,w_1000/v1444865801/forest.jpg" alt="Green forest scene"> | |
| </picture> |
mike-engel
/ srcsetSizesCloud.html
Last active
March 24, 2017 23:57
A simple srcset & sizes using cloudinary
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://res.cloudinary.com/beardfury/image/upload/c_scale,w_1000/v1444865801/forest.jpg" | |
| srcset="https://res.cloudinary.com/beardfury/image/upload/c_scale,w_320/v1444865801/forest.jpg 320w, | |
| https://res.cloudinary.com/beardfury/image/upload/c_scale,w_768/v1444865801/forest.jpg 768w, | |
| https://res.cloudinary.com/beardfury/image/upload/c_scale,w_1024/v1444865801/forest.jpg 1024w, | |
| https://res.cloudinary.com/beardfury/image/upload/c_scale,w_5000/v1444865801/forest.jpg 5000w" | |
| sizes="(min-width: 1024px) 50vw, 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
| <picture> | |
| <source srcset="desktop-1024.jpg 1024w, desktop-5000.jpg 5000w" media="(min-width: 1024px)> | |
| <source srcset="mobile-320.jpg 320w, mobile-768.jpg 768w" media="(min-width: 320px)> | |
| <img src="fallback.jpg"> | |
| </picture> |
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="fallback.jpg" | |
| srcset="small.jpg 320w, | |
| medium.jpg 768w, | |
| large.jpg 1024w, | |
| superHuge.jpg 5000w" | |
| sizes="(min-width: 1024px) 50vw, 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
| ### Keybase proof | |
| I hereby claim: | |
| * I am mike-engel on github. | |
| * I am beardfury (https://keybase.io/beardfury) on keybase. | |
| * I have a public key whose fingerprint is F7D1 CC36 4FE8 7DB6 7509 C004 013C 1DD2 F998 EEC9 | |
| To claim this, I am signing this object: |
NewerOlder