Converting to webp (#76)

* converted the all images and added to there own folder

* updated general images

still need to fix the banners for #74

* updated the side shows to webp

The slide show will not run on KAi OS we should have a color background instead

about.html

@@ -15,10 +15,10 @@
 			<!-- The sliding background images -->
 			<div class="slideshow-container">
 				<div class="slideshow">					
-					<div class="slide" style="background-image: url('images/DSCF8086.JPG');"></div>
-					<div class="slide" style="background-image: url('images/2015-01-12_12-33-00_714.jpg');"></div>
-					<div class="slide" style="background-image: url('images/2015-09-25 19.11.53.jpg');"></div>
-					<div class="slide" style="background-image: url('images/2015-04-29\ 09.25.54.JPG');"></div>
+					<div class="slide" style="background-image: url('images/webp/DSCF8086.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/2015-01-12_12-33-00_714.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/2015-09-25 19.11.53.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/2015-04-29\ 09.25.54.webp');"></div>
 
 
 				</div>
@@ -77,7 +77,7 @@ <h2>Our History</h2>
 								</p>
 							</b>
 							</div>
-							<span class="image"><img src="images/history.jpg" alt="ISC ELB 184B Room Photo" /></span>
+							<span class="image"><img src="images/webp/history.webp" alt="images/history.jpg"alt="ISC ELB 184B Room Photo" /></span>
 						</div>
 						<footer class="major">
 							<ul class="actions special">
@@ -213,7 +213,8 @@ <h2>Contact</h2>
 						<p><li><a href="https://www.openrobotics.org/blog/tag/ROS+2" class='fas fa-robot' style='font-size:32px'></a>&nbsp;&nbsp;Ros2 News</p></li>
 					</ul>
 				</section>
-				<img src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
+				<img src="images/webp/CECS_marketing_white_HEX_LOGO.webp" style="height: 50%; width: 50%; object-fit: contain" 
+				alt="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
 				<p class="copyright">&copy; Intelligent Systems Club. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 			</footer>
 

current-teams.html

@@ -15,10 +15,10 @@
 			<!-- The sliding background images -->
 			<div class="slideshow-container">
 				<div class="slideshow">					
-					<div class="slide" style="background-image: url('images/IMG_20240416_164259.jpg');"></div>
-					<div class="slide" style="background-image: url('images/20240610_205732.jpg');"></div>
-					<div class="slide" style="background-image: url('images/20240521_171511.jpg');"></div>
-					<div class="slide" style="background-image: url('images/PXL_20240827_220951128.png');"></div>
+					<div class="slide" style="background-image: url('images/webp/IMG_20240416_164259.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/20240610_205732.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/20240521_171511.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/PXL_20240827_220951128.webp');"></div>
 				</div>
 			</div>
 
@@ -58,7 +58,7 @@ <h2>TinyKart</h2>
 						<div class="image-container">
 							<!-- Image Wrapper -->
 							<div class="image-wrapper">
-							  <img src="images/20240610_205732.jpg" alt="TinyKart Teaser Image" />
+							  <img src="images/webp/20240610_205732.webp" alt="images/20240610_205732.jpg" alt="TinyKart Teaser Image" />
 							</div>
 						  </div>
 						<h2>TinyKart</h2>
@@ -80,7 +80,7 @@ <h2>Phoenix</h2>
 						<div>
 							<tr>
 								<td>
-									<img src="images/phnx_night_overhead.jpg" class="sponsor-logo"/>
+									<img src="images/webp/phnx_night_overhead.webp" alt="images/phnx_night_overhead.jpg" class="sponsor-logo"/>
 								</td>
 							</tr>
 						</div>
@@ -142,7 +142,8 @@ <h2>Contact</h2>
 					</ul>
 
 				</section>
-				<img src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
+				<img src="images/webp/CECS_marketing_white_HEX_LOGO.webp" style="height: 50%; width: 50%; object-fit: contain"
+				alt="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
 				<p class="copyright">&copy; Intelligent Systems Club. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 			</footer>
 

index.html

@@ -18,10 +18,10 @@
       <!-- The sliding background images -->
       <div class="slideshow-container">
 				<div class="slideshow">			
-          <div class="slide" style="background-image: url('images/team_arms.jpg');"></div>		
-					<div class="slide" style="background-image: url('images/Frankenstein\ Lidar\ in\ progress.jpg');"></div>
-					<div class="slide" style="background-image: url('images/IAVS_first_meet.jpg');"></div>
-					<div class="slide" style="background-image: url('images/20221207_123731.jpg');"></div>
+          <div class="slide" style="background-image: url('images/webp/team_arms.webp');"></div>		
+					<div class="slide" style="background-image: url('images/webp/Frankenstein-Lidar-in-progress.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/IAVS_first_meet.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/20221207_123731.webp');"></div>
 				</div>
 			</div>
       <!-- Header -->
@@ -78,7 +78,8 @@ <h2>About</h2>
             </div>
             <span class="image"
               ><img
-                src="images/The%20dome.png"
+                src="images/webp/The dome.webp"
+                alt="images/The%20dome.png"
                 alt="Team KiloOhm under the dome"
             /></span>
           </div>
@@ -162,7 +163,8 @@ <h2>Sponsors</h2>
               />
               <img
                 class="sponsor-logo"
-                src="images/yaz-logo-full-color.png"
+                src="images/webp/yaz-logo-full-color.webp"
+                alt="images/yaz-logo-full-color.png"
                 alt="Yazaki logo"
               />
               <img
@@ -245,7 +247,9 @@ <h2>Contact</h2>
           </ul>
         </section>
         <img
-          src="images/CECS_marketing_white_HEX_LOGO.png"
+          src="images/webp/CECS_marketing_white_HEX_LOGO.webp"
+          style="height: 50%; width: 50%; object-fit: contain"
+          alt="images/CECS_marketing_white_HEX_LOGO.png"
           style="height: 50%; width: 50%; object-fit: contain"
           alt="University of Michigan-Dearborn CECS Logo"
         />

join.html

@@ -31,10 +31,10 @@
 			<!-- The sliding background images -->
 			<div class="slideshow-container">
 				<div class="slideshow">					
-					<div class="slide" style="background-image: url('images/IMG_20240522_182047.jpg');"></div>
-					<div class="slide" style="background-image: url('images/yeti_squad.jpg');"></div>
-					<div class="slide" style="background-image: url('images/team_arms.jpg');"></div>
-					<div class="slide" style="background-image: url('images/Phoenix.jpg');"></div>
+					<div class="slide" style="background-image: url('images/webp/IMG_20240522_182047.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/yeti_squad.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/team_arms.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/Phoenix.webp');"></div>
 				</div>
 			</div>
 
@@ -91,7 +91,8 @@ <h2>We are happy you are interested!</h2>
 					</section>
 				</section>
 
-                <img src="images/IAVS_topdown_compressed.jpg" style="height: 100%; width: 100%; object-fit: contain" alt="Working in lab-space">
+                <img src="images/webp/IAVS_topdown_compressed.webp" style="height: 100%; width: 100%; object-fit: contain"
+				alt src="images/IAVS_topdown_compressed.jpg" style="height: 100%; width: 100%; object-fit: contain" alt="Working in lab-space">
 			</div>
 
 			<!-- Footer -->
@@ -134,7 +135,8 @@ <h2>Contact</h2>
 						</li>
 					</ul>
 				</section>
-				<img src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
+				<img src="images/webp/CECS_marketing_white_HEX_LOGO.webp" style="height: 50%; width: 50%; object-fit: contain"
+				alt src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
 				<p class="copyright">&copy; Intelligent Systems Club. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 			</footer>
 

past-teams.html

@@ -16,10 +16,10 @@
 			<!-- The sliding background images -->
 			<div class="slideshow-container">
 				<div class="slideshow">					
-					<div class="slide" style="background-image: url('images/IGVC.png');"></div>
-					<div class="slide" style="background-image: url('images/yeti_squad.jpg');"></div>
-					<div class="slide" style="background-image: url('images/DSC_0165.JPG');"></div>
-					<div class="slide" style="background-image: url('images/DSCN3633.JPG');"></div>
+					<div class="slide" style="background-image: url('images/webp/IGVC.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/yeti_squad.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/DSC_0165.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/DSCN3633.webp');"></div>
 				</div>
 			</div>
 
@@ -56,7 +56,7 @@ <h1>Intelligent Systems Club</h1>
 						<header class="major">
 							<h1>Team Yeti</h1>
 						</header>
-						<span class="image main"><img src="images/yeti.jpg" alt="" /></span>
+						<span class="image main"><img src="images/webp/yeti.webp" alt="images/yeti.jpg" /></span>
 						<h2>Autonomous Snowplow Competition</h2>
 						<p>
 							The purpose of this competition is to challenge university and college students, as well as the general public,
@@ -80,7 +80,7 @@ <h2>Robot</h2>
 							<header class="major">
 								<h1>Team Ohm</h1>
 							</header>
-							<span class="image main"><img src="images/hot_robots_in_your_area.jpg" alt="" /></span>
+							<span class="image main"><img src="images/webp/hot_robots_in_your_area.webp" alt="images/hot_robots_in_your_area.jpg" /></span>
 							<h2>Intelligent Ground Vehicle Competition</h2>
 							<p>
 								Ohm is an autonomous platform that competes in the annual Intelligent Ground Vehicle Competition (IGVC).
@@ -140,7 +140,8 @@ <h2>Contact</h2>
 					</ul>
 
 				</section>
-				<img src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
+				<img src="images/webp/CECS_marketing_white_HEX_LOGO.webp" style="height: 50%; width: 50%; object-fit: contain" 
+				alt src="images/CECS_marketing_white_HEX_LOGO.png" style="height: 50%; width: 50%; object-fit: contain" alt="University of Michigan-Dearborn CECS Logo"> 
 				<p class="copyright">&copy; Intelligent Systems Club. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 			</footer>
 

sponsors.html

@@ -5,7 +5,7 @@
 		<title>Sponsors</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="icon" type="image/png" href="images/flavicon.png" />
+		<link rel="icon" type="image/webp" image="images/webp/flavicon.webp" alt type="image/png" href="images/flavicon.png" />
 		<link rel="stylesheet" href="sass/bin/main.css" />
 		<noscript><link rel="stylesheet" href="sass/bin/noscript.css" /></noscript>
 	</head>
@@ -17,17 +17,17 @@
 			<!-- The sliding background images -->
 			<div class="slideshow-container">
 				<div class="slideshow">					
-					<div class="slide" style="background-image: url('images/IMG_8270.JPG');"></div>
-					<div class="slide" style="background-image: url('images/2024_Phoenix_TeamPhoto.jpg');"></div>
-					<div class="slide" style="background-image: url('images/team_arms.jpg');"></div>
-					<div class="slide" style="background-image: url('images/IAVS_topdown_compressed.jpg');"></div>
+					<div class="slide" style="background-image: url('images/webp/IMG_8270.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/2024_Phoenix_TeamPhoto.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/team_arms.webp');"></div>
+					<div class="slide" style="background-image: url('images/webp/IAVS_topdown_compressed.webp');"></div>
 				</div>
 			</div>
 
 			<!-- Header -->
 			<header id="header" class="alt">
 				<span class="logo">
-					<a href="index.html"><img src="images/logo.svg" alt="" /> </a>
+					<a href="index.html"><img src="images/webp/logo.webp" alt="images/logo.svg" /> </a>
 				</span>
 				<h1>Intelligent Systems Club</h1>
 				<p id="splash-text" style="white-space: pre">Sometimes the things we build are smart.</p>
@@ -168,7 +168,8 @@ <h2>Sponsorship Levels</h2>
 						</footer>
 						<div style="text-align: center;">
 						<!-- QR Code -->
-						<img src="images/qr_code_giving.jpg" style="height: 30%; width: 30%; object-fit: contain" alt="Giving Portal">
+						<img src="images/webp/qr_code_giving.webp" style="height: 30%; width: 30%; object-fit: contain"
+						alt="images/qr_code_giving.jpg" style="height: 30%; width: 30%; object-fit: contain" alt="Giving Portal">
 
 							<!-- iFrames are no longer permitted/supported by giving page
 							<iframe src="https://leadersandbest.umich.edu/find/#!/give/basket/fund/326936" style="border-width:0; min-width: 100%" height="1100"></iframe>
@@ -179,8 +180,11 @@ <h2>Sponsorship Levels</h2>
 							</p>
 							<!-- <img class="sponsor-logo" src="images/ford-logo-2017.png" alt="Ford logo"> As of 2024 Ford is not a sponsor -->
 							<img class="sponsor-logo" src="images/magna-logo.svg" alt="Magna logo">
-							<img class="sponsor-logo" src="images/yaz-logo-full-color.png" alt="Yazaki logo">
-							<img class="sponsor-logo" src="images/toyota-logo.svg" alt="Toyota logo">
+							<img class="sponsor-logo" src="images/webp/yaz-logo-full-color.webp" 
+							alt="images/yaz-logo-full-color.png" 
+							alt="Yazaki logo">
+							<img class="sponsor-logo" src="images/toyota-logo.svg" 
+							alt="Toyota logo">
 						</div>
 					</section>
 				</div>