Skip to content

Instantly share code, notes, and snippets.

Avatar

imghaste imghaste

View GitHub Profile
@imghaste
imghaste / index.html
Last active Jun 6, 2020
How to Opt-in for Client Hints
View index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width,Downlink,ECT">
</head>
<body></body>
</html>
@imghaste
imghaste / Simplified using client hints
Last active Jun 1, 2020
Simplified Picture Element
View Simplified using client hints
<img class="img-fluid" src="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920/app/uploads/2020/06/pipinaKoumantou.png" width="758" size="(max-width: 375px) 345px, (max-width:768px) 530px, (max-width: 992px) 635px, 758px">
@imghaste
imghaste / Bootstrap 3 Picture tag
Last active Jun 1, 2020
Bootstrap 3 Picture tag
View Bootstrap 3 Picture tag
<picture class="text-center">
<!--[if IE 9]><audio><![endif]-->
<source sizes="758px" type="image/webp" media="(min-width: 1200px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1920_webp/app/uploads/2020/06/pipinaKoumantou.png">
<source sizes="635px" type="image/webp" media="(min-width: 992px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_1200_webp/app/uploads/2020/06/pipinaKoumantou.png">
<source sizes="530px" type="image/webp" media="(min-width: 768px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_992_webp/app/uploads/2020/06/pipinaKoumantou.png">
<source sizes="345px" type="image/webp" media="(min-width: 375px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_375_webp/app/uploads/2020/06/pipinaKoumantou.png">
<source sizes="345px" type="image/webp" media="(min-width: 0px)" srcset="https://cdn.imghaste.com/fb42dc7935cc71996662001b/article_0_webp/app/uploads/2020/06/pipinaKoumantou.png">
<source sizes="758px" type="im
@imghaste
imghaste / URL Inline Examples
Last active Jun 28, 2020
URL Inline Examples
View URL Inline Examples
<!-- WebP: -->
<img src='https://cdn.imghaste.com/imghaste.com/webp/images/docs/peacocks.jpg' alt='convert to webP'/>
<!-- JPG: -->
<img src='https://cdn.imghaste.com/imghaste.com/jpeg/images/docs/peacocks.jpg' alt='convert to jpeg'/>
<!-- PNG: -->
<img src='https://cdn.imghaste.com/imghaste.com/png/images/docs/peacocks.jpg' alt='convert to png'/>
@imghaste
imghaste / Convert an image to webp
Last active May 30, 2020
Convert an image to webp
View Convert an image to webp
<!-- Original Image -->
<img src="https://images.imghaste.com/wp-content/uploads/2020/03/webp.caniuse.2020-03-08.jpg" class="img-fluid rounded-top" alt="What is WebP and Why You Should Care about it?" lading="lazy">
<!-- Webp as querystring -->
<img src="https://images.imghaste.com/wp-content/uploads/2020/03/webp.caniuse.2020-03-08.jpg?webp" class="img-fluid rounded-top" alt="What is WebP and Why You Should Care about it?" lading="lazy">
<!-- Webp using System Presets -->
<img src="https://images.imghaste.com/webp=true/wp-content/uploads/2020/03/webp.caniuse.2020-03-08.jpg" class="img-fluid rounded-top" alt="What is WebP and Why You Should Care about it?" lading="lazy">
View imghaste how to greyscale image
<img src='https://images.imghaste.com/wp-content/uploads/2020/03/merylin.jpg' alt='Merylin'>
<img src='https://images.imghaste.com/wp-content/uploads/2020/03/merylin.jpg?greyscale' alt='Greyscaled Merylin'>
@imghaste
imghaste / Picture Element Example for Orientation
Last active May 30, 2020
Picture Element Example for Orientation
View Picture Element Example for Orientation
<picture>
<!--[if IE 9]><audio><![endif]-->
<source sizes="600px" type="image/webp" media="(min-width: 991px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/webp,690/photos/spiggos%20fruit1574774933.jpg">
<source sizes="375px" type="image/webp" media="(max-width: 990px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/webp,345/photos/quality_fruit_center_mweb.png 1x, https://cdn.imghaste.com/tbOwLxpdo5/webp,690/photos/quality_fruit_center_mweb.png 2x">
<source sizes="600px" type="image/png" media="(min-width: 991px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/690/photos/spiggos%20fruit1574774933.jpg">
<source sizes="375px" type="image/png" media="(max-width: 990px)" srcset="https://cdn.imghaste.com/tbOwLxpdo5/345/photos/quality_fruit_center_mweb.png 1x, https://cdn.imghaste.com/tbOwLxpdo5/690/photos/quality_fruit_center_mweb.png 2x">
<!--[if IE 9]></audio><![endif]-->
<img src="https://cdn.imghaste.com/tbOwLxpdo5/photos/spiggos%20fruit1574774933.jpg" loading="lazy" width="" height="" alt="Quality Fruit Ban