Skip to content

Instantly share code, notes, and snippets.

@webjp1
Created January 5, 2020 05:36
Show Gist options
  • Save webjp1/d0ce4e6646466e6d7f12adb9c5c4fb91 to your computer and use it in GitHub Desktop.
Save webjp1/d0ce4e6646466e6d7f12adb9c5c4fb91 to your computer and use it in GitHub Desktop.
<picture data-type="picture" data-method="click" data-trigger="#pictureLoad">
<source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 1280px)" data-srcset="./assets/images/compressed/chrome-wallpaper.jpg" type="image/jpg">
<source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 1152px)" data-srcset="./assets/images/compressed/size-90/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 1088px)" data-srcset="./assets/images/compressed/size-85/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 1024px)" data-srcset="./assets/images/compressed/size-80/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 1024px)" data-srcset="./assets/images/compressed/size-80/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 960px)" data-srcset="./assets/images/compressed/size-75/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 960px)" data-srcset="./assets/images/compressed/size-75/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 896px)" data-srcset="./assets/images/compressed/size-70/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 896px)" data-srcset="./assets/images/compressed/size-70/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 832px)" data-srcset="./assets/images/compressed/size-65/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 832px)" data-srcset="./assets/images/compressed/size-65/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 768px)" data-srcset="./assets/images/compressed/size-60/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 768px)" data-srcset="./assets/images/compressed/size-60/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 704px)" data-srcset="./assets/images/compressed/size-55/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 704px)" data-srcset="./assets/images/compressed/size-55/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 640px)" data-srcset="./assets/images/compressed/size-50/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 640px)" data-srcset="./assets/images/compressed/size-50/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 576px)" data-srcset="./assets/images/compressed/size-45/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 576px)" data-srcset="./assets/images/compressed/size-45/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 512px)" data-srcset="./assets/images/compressed/size-40/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 512px)" data-srcset="./assets/images/compressed/size-40/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 448px)" data-srcset="./assets/images/compressed/size-35/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 448px)" data-srcset="./assets/images/compressed/size-35/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 384px)" data-srcset="./assets/images/compressed/size-30/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 384px)" data-srcset="./assets/images/compressed/size-30/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 320px)" data-srcset="./assets/images/compressed/size-25/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 320px)" data-srcset="./assets/images/compressed/size-25/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 256px)" data-srcset="./assets/images/compressed/size-20/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 256px)" data-srcset="./assets/images/compressed/size-20/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 192px)" data-srcset="./assets/images/compressed/size-15/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 192px)" data-srcset="./assets/images/compressed/size-15/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 128px)" data-srcset="./assets/images/compressed/size-10/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 128px)" data-srcset="./assets/images/compressed/size-10/chrome-wallpaper.jpeg" type="image/jpeg">
<source media="(min-width: 64px)" data-srcset="./assets/images/compressed/size-5/chrome-wallpaper.webp" type="image/webp">
<source media="(min-width: 64px)" data-srcset="./assets/images/compressed/size-5/chrome-wallpaper.jpeg" type="image/jpeg">
<img data-src="./assets/images/compressed/chrome-wallpaper.jpg" data-webp="./assets/images/compressed/chrome-wallpaper.webp" alt="{{ Add Your Alt Text Here }}" title="{{ Add Your Title Text Here }}" />
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment