View index.html
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width,Downlink,ECT"> | |
| </head> | |
| <body></body> | |
| </html> |
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"> |
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 |
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'/> |
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
/ 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 |