Image optimization

index.html

@@ -161,7 +161,7 @@
 			<div class="carousel-inner">
 				<div class="carousel-item active">
 					<div class="animate__animated animate__rubberBand bgimage"
-						style="background-image: url(images/esp-32.jpg);background-size: contain;"></div>
+						style="background-image: url(images/esp-32.avif);background-size: contain;"></div>
 					<div class="container">
 						<div class="carousel-caption bg animate__animated animate__flipInX animate__delay-1s">
 							<h1 class="carousel-caption-text">These are not centipedes.</h1>
@@ -264,7 +264,7 @@ <h2 class="featurette-heading">Our club's mission</h2>
 					</p>
 				</div>
 				<div class="col-md-5 order-md-1">
-					<img class="featurette-image img-fluid mx-auto" src="images/sensors.jpg"
+					<img class="featurette-image img-fluid mx-auto" src="images/sensors.avif"
 						alt="A collection of sensors and a screen shot of code in Arduino" width="500">
 				</div>
 			</div>
@@ -323,7 +323,7 @@ <h2 class="featurette-heading">What will you create? <span class="text-muted">Le
 						new skills, no prior experience necessary!
 				</div>
 				<div class="col-md-5 d-flex align-items-center justify-content-center">
-					<img class="featurette-image img-fluid mx-auto" src="images/meeting.jpeg"
+					<img class="featurette-image img-fluid mx-auto" src="images/meeting.avif"
 						alt="A photo from a Norse IoT club meeting." width="500">
 				</div>
 
@@ -365,7 +365,7 @@ <h2 class="featurette-heading">Listen In. <span class="text-muted">We're making
 				<div class="col-md-6 align-items-center justify-content-center">
 					<div id="audio">
 						<div style="display: flex;">
-							<img src="/cafe/file.jpg" alt="">
+							<img src="/cafe/file.avif" alt="">
 							<div id="mini-player">
 								<h3>Norse IoT Club: Making the Future </h3>
 								<span>Informatics Cafe - A Taste of Informatics</span>
@@ -509,7 +509,7 @@ <h3>Norse IoT Club: Making the Future </h3>
 			<h2>Current Leadership</h2>
 			<div class="row mt-5">
 				<div class="col-lg-3 officer">
-					<img src="images/president_sargent.jpg" alt="Photo of Zack Sargent">
+					<img src="images/president_sargent.avif" alt="Photo of Zack Sargent">
 					<h2 class="position">President</h2>
 					<span class="name">Zack Sargent</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -541,7 +541,7 @@ <h5 class="modal-title" id="exampleModalLabel">Zack Sargent</h5>
 				<!-- end .officer -->
 
 				<div class="col-lg-3 officer">
-					<img src="images/vp_milner.jpeg" alt="Photo of Aaron Milner">
+					<img src="images/vp_milner.avif" alt="Photo of Aaron Milner">
 					<h2 class="position">Vice President</h2>
 					<span class="name">Aaron Milner</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -571,7 +571,7 @@ <h5 class="modal-title" id="exampleModalLabel">Aaron Milner</h5>
 				</div>
 				<!-- end .officer -->
 				<div class="col-lg-3 officer">
-					<img src="images/sec_lunnemann.jpeg" alt="Photo of Samuel Lunnemann">
+					<img src="images/sec_lunnemann.avif" alt="Photo of Samuel Lunnemann">
 					<h2 class="position">Secretary</h2>
 					<span class="name">Samuel Lunnemann</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -604,7 +604,7 @@ <h2>Previous Leadership</h2>
 			<!-- Four columns of previous officers -->
 			<div class="row mt-5">
 				<div class="col-lg-3 officer">
-					<img src="images/president_godsted.jpg" alt="Photo of Cassian Godsted">
+					<img src="images/president_godsted.avif" alt="Photo of Cassian Godsted">
 					<h2 class="position">2023 President</h2>
 					<span class="name">Cassian Godsted</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -642,7 +642,7 @@ <h5 class="modal-title" id="exampleModalLabel">Cassian Godsted</h5>
 				<!-- end .officer -->
 
 				<div class="col-lg-3 officer">
-					<img src="images/vp_weberhorowitz.jpeg" alt="Photo of Riley Weber-Horowitz">
+					<img src="images/vp_weberhorowitz.avif" alt="Photo of Riley Weber-Horowitz">
 					<h2 class="position">2023 Vice President</h2>
 					<span class="name">Riley Weber-Horowitz</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -675,7 +675,7 @@ <h5 class="modal-title" id="exampleModalLabel">Riley Weber-Horowitz</h5>
 				</div>
 				<!-- end .officer -->
 				<div class="col-lg-3 officer">
-					<img src="images/sec_wilson.JPG" alt="Photo of Kristoffe Wilson">
+					<img src="images/sec_wilson.avif" alt="Photo of Kristoffe Wilson">
 					<h2 class="position">2023 Secretary/Treasurer</h2>
 					<span class="name">Kristoffe Wilson</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -704,7 +704,7 @@ <h5 class="modal-title" id="exampleModalLabel">Kristoffe Wilson</h5>
 				<!-- end .officer -->
 
 				<div class="col-lg-3 officer">
-					<img src="images/president_muscara.jpg" alt="Photo of Kevin Muscara">
+					<img src="images/president_muscara.avif" alt="Photo of Kevin Muscara">
 					<h2 class="position">2022 President</h2>
 					<span class="name">Kevin Muscara</span>
 					<span><a class="email" href="mailto:[email protected]">[email protected]</a></span>
@@ -733,7 +733,7 @@ <h5 class="modal-title" id="exampleModalLabel">Kevin Muscara</h5>
 				</div>
 				<!-- end .officer -->
 				<div class="col-lg-3 officer">
-					<img src="images/president_klaene.jpg" alt="Photo of Nick Klaene">
+					<img src="images/president_klaene.avif" alt="Photo of Nick Klaene">
 					<h2 class="position">2021 President</h2>
 					<span class="name">Nick Klaene</span>
 					<button class="btn btn-warning bio-button" onclick="openBio('nick-president-bio')">BIO</button>
@@ -765,7 +765,7 @@ <h5 class="modal-title" id="exampleModalLabel">Nick Klaene</h5>
 				</div>
 				<!-- end .officer -->
 				<div class="col-lg-3 officer">
-					<img src="images/vp_makunga.jpg" alt="Photo of Jonathan Makunga">
+					<img src="images/vp_makunga.avif" alt="Photo of Jonathan Makunga">
 					<h2 class="position">2021 Vice President</h2>
 					<span class="name">Jonathan Makunga</span>
 					<button class="btn btn-warning bio-button" onclick="openBio('jonathan-vp-bio')">BIO</button>
@@ -822,7 +822,7 @@ <h5 class="modal-title" id="exampleModalLabel">Jonathan Makunga</h5>
 					class="fa fa-linkedin"></i></a>
 			· <a class="social item" target="_blank"
 				href="https://nku.campusgroups.com/feeds?type=club&type_id=35576&tab=home"><img id="campusgroups"
-					style="height:28px;" src="images/cg.png" alt=""></a>
+					style="height:28px;" src="images/cg.avif" alt=""></a>
 		</p>
 	</footer>
 	<script src="js/bootstrap.bundle.min.js"

projects/index.html

@@ -151,7 +151,7 @@ <h2 class="featurette-heading">Automatic Cat Feeder</h2>
 						</p>
 					</div>
 					<div class="col-md-3">
-						<img src="../images/cat-feeder.jpg" style="margin-left:auto;margin-right:auto;display:block" class="featurette-image img-fluid mx-auto">
+						<img src="../images/cat-feeder.avif" style="margin-left:auto;margin-right:auto;display:block" class="featurette-image img-fluid mx-auto">
 					</div>
 				</div>	
 
@@ -170,7 +170,7 @@ <h2 class="featurette-heading">BLINK TANK Bus</h2>
 						</p>
 					</div>
 					<div class="col-md-5">
-						<img class="featurette-image img-fluid mx-auto" style="height: 100%; object-fit: cover; object-position: top;" src="../images/blinktank.jpg" width="">
+						<img class="featurette-image img-fluid mx-auto" style="height: 100%; object-fit: cover; object-position: top;" src="../images/blinktank.avif" width="">
 					</div>
 				</div>	
 
@@ -232,7 +232,7 @@ <h2 class="featurette-heading">Humidity Project</h2>
 						</p>
 					</div>
 					<div class="col-md-5 d-flex align-items-center justify-content-center">
-						<img class="featurette-image img-fluid mx-auto" src="../images/esp-32-temp.jpg" alt="A prototype of the Humidity Sensor used in Grifin Hall." width="500">
+						<img class="featurette-image img-fluid mx-auto" src="../images/esp-32-temp.avif" alt="A prototype of the Humidity Sensor used in Grifin Hall." width="500">
 					</div>
 				</div>
 
@@ -249,7 +249,7 @@ <h2 class="featurette-heading">Website Workshops</h2>
 						</p>
 					</div>
 					<div class="col-md-5 order-md-1">
-						<img style="height: 100%; object-fit: cover; object-position: top;" class="featurette-image img-fluid mx-auto" src="../images/websiteworkshop.png" alt="Flyer advertising the Website Workshop event." width="500">
+						<img style="height: 100%; object-fit: cover; object-position: top;" class="featurette-image img-fluid mx-auto" src="../images/websiteworkshop.avif" alt="Flyer advertising the Website Workshop event." width="500">
 					</div>
 				</div>
 
@@ -350,7 +350,7 @@ <h2 class="featurette-heading">Website Workshops</h2>
 				· <a class="social item" target="_blank" href="https://instagram.com/norseiot"><i class="fa fa-instagram"></i></a>
 				· <a class="social item" target="_blank" href="https://discord.gg/H5FjtpE3pH"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg></a>
 				· <a class="social item" target="_blank" href="https://www.linkedin.com/company/norse-iot/"><i class="fa fa-linkedin"></i></a>
-				· <a class="social item" target="_blank" href="https://nku.campusgroups.com/feeds?type=club&type_id=35576&tab=home"><img id="campusgroups" style="height:28px;" src="../images/cg.png" alt=""></a>
+				· <a class="social item" target="_blank" href="https://nku.campusgroups.com/feeds?type=club&type_id=35576&tab=home"><img id="campusgroups" style="height:28px;" src="../images/cg.avif" alt=""></a>
 			</p>
 		</footer>