fosc/fosc.space
1
0
Fork 0
Code Issues Releases Activity

Webp ALL. THE. THINGS.

Browse Source
This commit is contained in:
Pablo Moyano 2020-03-13 21:53:21 +01:00
parent a6cbc56c75
commit 871f37f3dd
1 changed files with 91 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
index.html
View File

@ -34,10 +34,9 @@
<div class="brand"> <div class="brand">
<picture> <picture>
<source type="image/webp" srcset="img/Logo-invert.webp"> <source type="image/webp" srcset="img/Logo-invert.webp">
<source type="image/jpeg" srcset="img/Logo-invert.png"> <source type="image/png" srcset="img/Logo-invert.png">
<img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;"> <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
</picture> </picture>
</div> </div>
<nav> <nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
@ -128,33 +127,105 @@
<div class="bgallery"> <div class="bgallery">
<div class="gallery"> <div class="gallery">
<div class="column-gallery"> <div class="column-gallery">
<img class="lazy" data-src="img/junction2018.jpg"> <picture>
<img class="lazy" data-src="img/santi.jpg"> <source type="image/webp" srcset="img/junction2018.webp">
<img class="lazy" data-src="img/kids.jpg"> <source type="image/jpeg" srcset="img/junction2018.jpg">
<img class="lazy" data-src="img/sec.jpg"> <img class="lazy" data-src="img/junction2018.jpg">
<img class="lazy" data-src="img/junction2018-1.jpg"> </picture>
<picture>
<source type="image/webp" srcset="img/santi.webp">
<source type="image/jpeg" srcset="img/santi.jpg">
<img class="lazy" data-src="img/santi.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/kids.webp">
<source type="image/jpeg" srcset="img/kids.jpg">
<img class="lazy" data-src="img/kids.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/sec.webp">
<source type="image/jpeg" srcset="img/sec.jpg">
<img class="lazy" data-src="img/sec.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2018-1.webp">
<source type="image/jpeg" srcset="img/junction2018-1.jpg">
<img class="lazy" data-src="img/junction2018-1.jpg">
</picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<img class="lazy" data-src="img/app.jpg"> <picture>
<img class="lazy" data-src="img/bitup.jpg"> <source type="image/webp" srcset="img/app.webp">
<img class="lazy" data-src="img/soldadura.jpg"> <source type="image/jpeg" srcset="img/app.jpg">
<img class="lazy" data-src="img/hacking.jpg"> <img class="lazy" data-src="img/app.jpg">
<img class="lazy" data-src="img/junction2019-1.jpg"> </picture>
<picture>
<source type="image/webp" srcset="img/bitup.webp">
<source type="image/jpeg" srcset="img/bitup.jpg">
<img class="lazy" data-src="img/bitup.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/soldadura.webp">
<source type="image/jpeg" srcset="img/soldadura.jpg">
<img class="lazy" data-src="img/soldadura.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/hacking.webp">
<source type="image/jpeg" srcset="img/hacking.jpg">
<img class="lazy" data-src="img/hacking.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2019-1.webp">
<source type="image/jpeg" srcset="img/junction2019-1.jpg">
<img class="lazy" data-src="img/junction2019-1.jpg">
</picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<img class="lazy" data-src="img/pepemod.jpg"> <picture>
<img class="lazy" data-src="img/atresmedia.jpg"> <source type="image/webp" srcset="img/pepemod.webp">
<img class="lazy" data-src="img/junction2019.jpg"> <source type="image/jpeg" srcset="img/pepemod.jpg">
<img class="lazy" data-src="img/printer3d.jpg"> <img class="lazy" data-src="img/pepemod.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/atresmedia.webp">
<source type="image/jpeg" srcset="img/atresmedia.jpg">
<img class="lazy" data-src="img/atresmedia.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/junction2019.webp">
<source type="image/jpeg" srcset="img/junction2019.jpg">
<img class="lazy" data-src="img/junction2019.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/printer3d-1.webp">
<source type="image/jpeg" srcset="img/printer3d-1.jpg">
<img class="lazy" data-src="img/printer3d-1.jpg">
</picture>
</div> </div>
<div class="column-gallery"> <div class="column-gallery">
<img class="lazy" data-src="img/flp1.jpg"> <picture>
<img class="lazy" data-src="img/soldadura1.jpg"> <source type="image/webp" srcset="img/flp1.webp">
<img class="lazy" data-src="img/nn1.jpg"> <source type="image/jpeg" srcset="img/flp1.jpg">
<img class="lazy" data-src="img/fosc2.jpg"> <img class="lazy" data-src="img/flp1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/soldadura1.webp">
<source type="image/jpeg" srcset="img/soldadura1.jpg">
<img class="lazy" data-src="img/soldadura1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/nn1.webp">
<source type="image/jpeg" srcset="img/nn1.jpg">
<img class="lazy" data-src="img/nn1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="img/fosc2-1.webp">
<source type="image/jpeg" srcset="img/fosc2-1.jpg">
<img class="lazy" data-src="img/fosc2-1.jpg">
</picture>
</div> </div>
</div> </div>
</div> </div>