Update /development to use webp

pages/development.php

@@ -51,7 +51,7 @@ $twitter_image = 'images/phd-app-2x.jpg';
 						<picture>
 							<source srcset="<?=$baseurl?>images/cb_demo-2x.webp" type="image/webp" />
 							<source srcset="<?=$baseurl?>images/cb_demo.jpg 1x, <?=$baseurl?>images/cb_demo-2x.jpg 2x" type="image/jpeg" />
-							<img class="rounded" srcset="<?=$baseurl?>images/phd-app.jpg" alt="Circular Bells" />
+							<img class="rounded" srcset="<?=$baseurl?>images/cb_demo.jpg" alt="Circular Bells" />
 						</picture>
 					</a>
 				</figure>
@@ -70,7 +70,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/phd-app-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/phd-app.jpg 1x, <?=$baseurl?>images/phd-app-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/phd-app-2x.webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/phd-app.jpg 1x, <?=$baseurl?>images/phd-app-2x.jpg 2x" type="image/jpeg" />
 							<img class="rounded" srcset="<?=$baseurl?>images/phd-app.jpg" alt="PhD app for iPad" />
 						</picture>
 					</a>
@@ -90,7 +91,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/table_2-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/table_2.jpg 1x, <?=$baseurl?>images/table_2-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/table_2-2x.webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/table_2.jpg 1x, <?=$baseurl?>images/table_2-2x.jpg 2x" type="image/jpeg" />
 							<img class="rounded" srcset="<?=$baseurl?>images/table_2.jpg" alt="PhD app for large tabletop" />
 						</picture>
 					</a>
@@ -110,7 +112,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/aranaboo-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/aranaboo.jpg 1x, <?=$baseurl?>images/aranaboo-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/aranaboo-2x.webp" type="image/webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/aranaboo.jpg 1x, <?=$baseurl?>images/aranaboo-2x.jpg 2x" type="image/jpeg" />
 							<img class="rounded" srcset="<?=$baseurl?>images/aranaboo.jpg" alt="Aranaboo" />
 						</picture>
 					</a>
@@ -130,7 +133,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/astronauta-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/astronauta.jpg 1x, <?=$baseurl?>images/astronauta-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/astronauta-2x.webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/astronauta.jpg 1x, <?=$baseurl?>images/astronauta-2x.jpg 2x" type="image/jpeg" />
 							<img class="rounded" srcset="<?=$baseurl?>images/astronauta.jpg" alt="Da grande voglio fare l'astronauta" />
 						</picture>
 					</a>
@@ -150,7 +154,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/bsc-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/bsc.jpg 1x, <?=$baseurl?>images/bsc-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/bsc-2x.webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/bsc.jpg 1x, <?=$baseurl?>images/bsc-2x.jpg 2x" type="image/jpeg" />
 							<img class="rounded" srcset="<?=$baseurl?>images/bsc.png" alt="CRUSADE Bleeding Score Calculator" />
 						</picture>
 					</a>
@@ -170,7 +175,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/doodle-2x.png">
 						<picture>
-							<source srcset="<?=$baseurl?>images/doodle.png 1x, <?=$baseurl?>images/doodle-2x.png 2x" />
+							<source srcset="<?=$baseurl?>images/doodle-2x.png" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/doodle.png 1x, <?=$baseurl?>images/doodle-2x.png 2x" type="image/png" />
 							<img class="rounded" srcset="<?=$baseurl?>images/doodle.png" alt="Doodle" />
 						</picture>
 					</a>
@@ -190,7 +196,8 @@ $twitter_image = 'images/phd-app-2x.jpg';
 				<figure>
 					<a href="#" data-featherlight="<?=$baseurl?>images/tofus-2x.jpg">
 						<picture>
-							<source srcset="<?=$baseurl?>images/tofus.jpg 1x, <?=$baseurl?>images/tofus-2x.jpg 2x" />
+							<source srcset="<?=$baseurl?>images/doodle-2x.webp" type="image/webp" />
+							<source srcset="<?=$baseurl?>images/doodle.png 1x, <?=$baseurl?>images/doodle-2x.png 2x" type="image/png" />
 							<img class="rounded" srcset="<?=$baseurl?>images/tofus.jpg" alt="tOfuS" />
 						</picture>
 					</a>