PNG to WEBP for faster loading times

This commit is contained in:
Michał Gdula 2022-06-11 18:58:02 +01:00
parent eecac9b558
commit e153e5bfb3
53 changed files with 99 additions and 62 deletions

View file

@ -14,6 +14,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap">
</head>
<body>
<!-- To professional web developers, please forgive me if I could've done all this better. -->
<!-- Navigation Root -->
<nav>
<img src="images/dv8.png" alt="DV8 logo" class="logo">
@ -31,13 +32,13 @@
<!-- Root of all the text sections -->
<main>
<header>
<img src="images/wiggleBefore.png">
<img src="images/wiggleBefore.png" alt="3 colourful wiggly lines">
<h1>Welcome to DV8's Game Event!</h1>
<img src="images/wiggleAfter.png">
<img src="images/wiggleAfter.png" alt="3 colourful wiggly lines">
</header>
<!-- Teams -->
<!-- To professional web developers, please forgive me if I could've done all this better. -->
<!-- Some of these games are genuely really cool, I wish more people submitted their games to show up on here -->
<section id="team">
<h2>The Teams</h2>
<!-- Foragers Haven -->
@ -46,25 +47,33 @@
<span></span>
<div class="teamInfo">
<h3>Foragers Haven</h3>
<p>Team:</p>
<p>- Farley Barker | 3D Environment Art, Game Design, Programming</p>
<p>- Ben Easton | 3D Art, Story Development</p>
<p>- Hannah Burfoot | Character Art, UI Design</p>
<p>- Sasha Guerrier Gregory | Level Design, Game Design</p>
<p>- Toby Pettman | Programming</p>
<p>- Russell Charlwood | 3D Environment Art, Level Design, Programming </p>
<p>- Farley Barker
<span class="gray">3D Environment Art, Game Design, Programming</span></p>
<p>- Ben Easton
<span class="gray">3D Art, Story Development</span></p>
<p>- Hannah Burfoot
<span class="gray">Character Art, UI Design</span></p>
<p>- Sasha Guerrier Gregory
<span class="gray">Level Design, Game Design</span></p>
<p>- Toby Pettman
<span class="gray">Programming</span></p>
<p>- Russell Charlwood
<span class="gray">3D Environment Art, Level Design, Programming</span></p>
<p>About: Foragers Haven is a peaceful, cute, stylized adventure walking simulator. Explore a humble little forest, follow the quest line, craft potions and harvest plants, flowers and items around you.<p>
</div>
</div>
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/foragersHaven/1.png" loading="lazy">
<img src="images/gallery/foragersHaven/2.png" loading="lazy">
<img src="images/gallery/foragersHaven/3.png" loading="lazy">
<img src="images/gallery/foragersHaven/4.png" loading="lazy">
<img src="images/gallery/foragersHaven/5.png" loading="lazy">
<img src="images/gallery/foragersHaven/6.png" loading="lazy">
<img src="images/gallery/foragersHaven/1.webp" loading="lazy" alt="Path surrounded by trees going towards a cave">
<img src="images/gallery/foragersHaven/2.webp" loading="lazy" alt="Path surrounded by trees streatching away into the distance">
<img src="images/gallery/foragersHaven/3.webp" loading="lazy" alt="Camping spot, containing a tent, fireplace and table surrounded by trees">
<img src="images/gallery/foragersHaven/4.webp" loading="lazy" alt="Forest full of trees">
<img src="images/gallery/foragersHaven/5.webp" loading="lazy" alt="A dark cave with a distance exit">
<img src="images/gallery/foragersHaven/6.webp" loading="lazy" alt="Hut located in a forest with a path going away from the entrace to it">
</div>
</div>
@ -81,9 +90,9 @@
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/mugunghwa/1.png" loading="lazy">
<img src="images/gallery/mugunghwa/2.png" loading="lazy">
<img src="images/gallery/mugunghwa/3.png" loading="lazy">
<img src="images/gallery/mugunghwa/1.webp" loading="lazy" alt="Small area surrounded by trees and bushes of different sizes">
<img src="images/gallery/mugunghwa/2.webp" loading="lazy" alt="A South Korean hut next to large trees">
<img src="images/gallery/mugunghwa/3.webp" loading="lazy" alt="A Mugunghwa infront of a large boulder">
</div>
</div>
@ -100,10 +109,10 @@
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/again/1.png" loading="lazy">
<img src="images/gallery/again/2.png" loading="lazy">
<img src="images/gallery/again/3.png" loading="lazy">
<img src="images/gallery/again/4.png" loading="lazy">
<img src="images/gallery/again/1.webp" loading="lazy" alt="Rooftops of Brazilian houses, with signs directing the player where to go">
<img src="images/gallery/again/2.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
<img src="images/gallery/again/3.webp" loading="lazy" alt="Rooftops of Brazilian Favella houses, with a large mono-coloured brick building in the center">
<img src="images/gallery/again/4.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
</div>
</div>
@ -120,10 +129,10 @@
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/rainforestRunner/1.png" loading="lazy">
<img src="images/gallery/rainforestRunner/2.png" loading="lazy">
<img src="images/gallery/rainforestRunner/3.png" loading="lazy">
<img src="images/gallery/rainforestRunner/4.png" loading="lazy">
<img src="images/gallery/rainforestRunner/1.webp" loading="lazy" alt="Wooden bridge, taking the player over a large lake">
<img src="images/gallery/rainforestRunner/2.webp" loading="lazy" alt="A path, taking the player through a rainforest with logs and trees to dodge">
<img src="images/gallery/rainforestRunner/3.webp" loading="lazy" alt="Sandy beach with palmtrees and sand dunes to dodge">
<img src="images/gallery/rainforestRunner/4.webp" loading="lazy" alt="Player going through wooden bridge about to enter a rainforest full of trees">
</div>
</div>
@ -140,9 +149,9 @@
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/desperateConflicts/1.png" loading="lazy">
<img src="images/gallery/desperateConflicts/2.png" loading="lazy">
<img src="images/gallery/desperateConflicts/3.png" loading="lazy">
<img src="images/gallery/desperateConflicts/1.webp" loading="lazy">
<img src="images/gallery/desperateConflicts/2.webp" loading="lazy">
<img src="images/gallery/desperateConflicts/3.webp" loading="lazy">
</div>
</div>
@ -158,11 +167,11 @@
<div class="gallery">
<h3>Game screenshots</h3>
<div>
<img src="images/gallery/atrophy/1.png" loading="lazy">
<img src="images/gallery/atrophy/2.png" loading="lazy">
<img src="images/gallery/atrophy/3.png" loading="lazy">
<img src="images/gallery/atrophy/4.png" loading="lazy">
<img src="images/gallery/atrophy/5.png" loading="lazy">
<img src="images/gallery/atrophy/1.webp" loading="lazy">
<img src="images/gallery/atrophy/2.webp" loading="lazy">
<img src="images/gallery/atrophy/3.webp" loading="lazy">
<img src="images/gallery/atrophy/4.webp" loading="lazy">
<img src="images/gallery/atrophy/5.webp" loading="lazy">
</div>
</div>
@ -254,7 +263,6 @@
<div class="contactInformation">
<h3>Contact Information</h3>
<p>DV8Expo@gmail.com</p>
<p>michal-gdula@pm.me</p>
</div>
<div class="locations">
@ -275,29 +283,31 @@
</footer>
</body>
<!--
Hi! If you found this congrats, you have too much time, and this isnt the only thing that is hidden on this page!
But for now, have this ASCII maned wolf art :3-->
<!--..../|/|..............-->
<!--.../0 0 \.............-->
<!--(III....\________,....-->
<!--....\__......./ \|\,..-->
<!--.......||-----| |.\ \.-->
<!--.......||.....|/...\|.-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--.......||.....||......-->
<!--......cc/....cc/.......-->
Hi! If you found this congrats, you have too much time,
and this isnt the only thing that is hidden on this page!
But for now, have this ASCII maned wolf art :3
-->
<!--. . /|/| . . . . . . .-->
<!--.. /0 0 \ . . . . . ..-->
<!--(III% . \________, . .-->
<!--.. .\_, .%###%/ \'\,..-->
<!--. . . .||#####| |'\ \.-->
<!--.. . . ||. . .|/. .\V.-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . .|| . . || . . .-->
<!--.. . . ||. . .||. . ..-->
<!--. . . cc/ . .cc/ . . .-->
</html>