Add WebP versions of photos

3d-printers/index.html

@@ -82,15 +82,24 @@
 				<h1>3D Printers</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/3d-printers-1-1024x768.webp 1024w, /assets/3d-printers-1.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/3d-printers-1-1024x768.jpg" srcset="/assets/3d-printers-1-1024x768.jpg 1024w, /assets/3d-printers-1.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="3D printer in the printer village" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/3d-printers-2-1024x768.webp 1024w, /assets/3d-printers-2.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/3d-printers-2-1024x768.jpg" srcset="/assets/3d-printers-2-1024x768.jpg 1024w, /assets/3d-printers-2.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="3D printer equipment" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/3d-printers-3-1024x768.webp 1024w, /assets/3d-printers-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/3d-printers-3-1024x768.jpg" srcset="/assets/3d-printers-3-1024x768.jpg 1024w, /assets/3d-printers-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="3D printer in operation" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<p></p>

contact/index.html

@@ -158,7 +158,10 @@
 					</ul>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/FrontProto-1024x455.webp 1024w, /assets/FrontProto.webp 1112w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="455" src="/assets/FrontProto-1024x455.jpg" srcset="/assets/FrontProto-1024x455.jpg 1024w, /assets/FrontProto.jpg 1112w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Exterior of the Protospace makerspace" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<hr />

electronics-lab/index.html

@@ -82,11 +82,17 @@
 				<h1>Electronics Lab</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/electronics-lab-2-1024x768.webp 1024w, /assets/electronics-lab-2.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/electronics-lab-2.jpg" srcset="/assets/electronics-lab-2-1024x768.jpg 1024w, /assets/electronics-lab-2.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Electronics lab equipment" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/electronics-lab-3-1024x768.webp 1024w, /assets/electronics-lab-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/electronics-lab-3-1024x768.jpg" srcset="/assets/electronics-lab-3-1024x768.jpg 1024w, /assets/electronics-lab-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Electronics workbench and equipment" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 				</div>
 			</main>

index.html

@@ -94,10 +94,22 @@
 							and all skill levels are welcome. Membership is $55 / month for 24/7 access.
 						</p>
 						<div class="home-gallery">
+							<picture>
+								<source type="image/webp" srcset="/assets/painting-miniatures-640x480.webp 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 								<img width="640" height="480" src="/assets/painting-miniatures-640x480.jpg" srcset="/assets/painting-miniatures-640x480.jpg 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Member painting a project at a Protospace work table" loading="lazy" decoding="async" />
+							</picture>
+							<picture>
+								<source type="image/webp" srcset="/assets/building-wooden-project-640x504.webp 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 								<img width="640" height="504" src="/assets/building-wooden-project-640x504.jpg" srcset="/assets/building-wooden-project-640x504.jpg 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Member working on a wooden project with power tools" loading="lazy" decoding="async" />
+							</picture>
+							<picture>
+								<source type="image/webp" srcset="/assets/using-embroidery-machine-640x480.webp 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 								<img width="640" height="480" src="/assets/using-embroidery-machine-640x480.jpg" srcset="/assets/using-embroidery-machine-640x480.jpg 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Member using an industrial embroidery machine" loading="lazy" decoding="async" />
+							</picture>
+							<picture>
+								<source type="image/webp" srcset="/assets/grinding-metal-640x480.webp 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 								<img width="640" height="480" src="/assets/grinding-metal-640x480.jpg" srcset="/assets/grinding-metal-640x480.jpg 640w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Member grinding metal in the metal shop" loading="lazy" decoding="async" />
+							</picture>
 						</div>
 						<p>
 							We are a quirky, fun community where artists, makers and geeks come together to share our

laser-cutters/index.html

@@ -82,13 +82,19 @@
 				<h1>Laser Cutters</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/laser-cutters-1-1024x768.webp 1024w, /assets/laser-cutters-1.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/laser-cutters-1-1024x768.jpg" srcset="/assets/laser-cutters-1-1024x768.jpg 1024w, /assets/laser-cutters-1.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Laser cutter in the laser cutting area" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<p>Our laser cutting area also includes two mini desktop CNC mills:</p>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/laser-cutters-3-1024x768.webp 1024w, /assets/laser-cutters-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/laser-cutters-3-1024x768.jpg" srcset="/assets/laser-cutters-3-1024x768.jpg 1024w, /assets/laser-cutters-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Laser cutter and CNC equipment" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 				</div>
 			</main>

metal-shop/index.html

@@ -82,15 +82,24 @@
 				<h1>Metal Shop</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/metal-shop-1-1024x768.webp 1024w, /assets/metal-shop-1.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/metal-shop-1-1024x768.jpg" srcset="/assets/metal-shop-1-1024x768.jpg 1024w, /assets/metal-shop-1.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Metalworking equipment in the metal shop" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/metal-shop-2-1024x768.webp 1024w, /assets/metal-shop-2.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/metal-shop-2-1024x768.jpg" srcset="/assets/metal-shop-2-1024x768.jpg 1024w, /assets/metal-shop-2.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Metalworking lathe in the metal shop" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/metal-shop-3-1024x768.webp 1024w, /assets/metal-shop-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/metal-shop-3-1024x768.jpg" srcset="/assets/metal-shop-3-1024x768.jpg 1024w, /assets/metal-shop-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Metal shop equipment and tools" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 				</div>
 			</main>

sewing-room/index.html

@@ -82,19 +82,31 @@
 				<h1>Sewing Room</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/sewing-room-2-1024x768.webp 1024w, /assets/sewing-room-2.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/sewing-room-2.jpg" srcset="/assets/sewing-room-2-1024x768.jpg 1024w, /assets/sewing-room-2.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Industrial embroidery machine in the sewing room" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/sewing-room-3-1024x768.webp 1024w, /assets/sewing-room-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/sewing-room-3-1024x768.jpg" srcset="/assets/sewing-room-3-1024x768.jpg 1024w, /assets/sewing-room-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Sewing room equipment and workspace" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/sewing-room-4-1024x768.webp 1024w, /assets/sewing-room-4.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/sewing-room-4-1024x768.jpg" srcset="/assets/sewing-room-4-1024x768.jpg 1024w, /assets/sewing-room-4.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Industrial sewing machine" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/sewing-room-5-1024x768.webp 1024w, /assets/sewing-room-5.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/sewing-room-5-1024x768.jpg" srcset="/assets/sewing-room-5-1024x768.jpg 1024w, /assets/sewing-room-5.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Sewing and textile equipment" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 				</div>
 			</main>

styles.css

@@ -281,6 +281,11 @@ footer p {
 	background: linear-gradient(transparent, #000b);
 	content: "";
 }
+.area-card picture {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
 .area-card img {
 	width: 100%;
 	height: 100%;

the-space/index.html

@@ -89,12 +89,48 @@
 					<p>Select an area to view:</p>
 
 					<div class="area-grid">
-						<a class="area-card" href="/wood-shop/"><img width="1024" height="768" src="/assets/wood-shop-4-1024x768.jpg" srcset="/assets/wood-shop-4-1024x768.jpg 1024w, /assets/wood-shop-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Wood Shop" loading="lazy" decoding="async" /><span>Wood Shop</span></a>
+						<a class="area-card" href="/wood-shop/">
-						<a class="area-card" href="/metal-shop/"><img width="1024" height="768" src="/assets/metal-shop-4-1024x768.jpg" srcset="/assets/metal-shop-4-1024x768.jpg 1024w, /assets/metal-shop-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Metal Shop" loading="lazy" decoding="async" /><span>Metal Shop</span></a>
+							<picture>
-						<a class="area-card" href="/laser-cutters/"><img width="1024" height="768" src="/assets/laser-cutters-2-1024x768.jpg" srcset="/assets/laser-cutters-2-1024x768.jpg 1024w, /assets/laser-cutters-2.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Laser Cutters" loading="lazy" decoding="async" /><span>Laser Cutters</span></a>
+								<source type="image/webp" srcset="/assets/wood-shop-4-1024x768.webp 1024w, /assets/wood-shop-4.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
-						<a class="area-card" href="/sewing-room/"><img width="1024" height="768" src="/assets/sewing-room-1-1024x768.jpg" srcset="/assets/sewing-room-1-1024x768.jpg 1024w, /assets/sewing-room-1.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Sewing Room" loading="lazy" decoding="async" /><span>Sewing Room</span></a>
+								<img width="1024" height="768" src="/assets/wood-shop-4-1024x768.jpg" srcset="/assets/wood-shop-4-1024x768.jpg 1024w, /assets/wood-shop-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Wood Shop" loading="lazy" decoding="async" />
-						<a class="area-card" href="/electronics-lab/"><img width="1024" height="768" src="/assets/electronics-lab-1-1024x768.jpg" srcset="/assets/electronics-lab-1-1024x768.jpg 1024w, /assets/electronics-lab-1.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Electronics Lab" loading="lazy" decoding="async" /><span>Electronics Lab</span></a>
+							</picture>
-						<a class="area-card" href="/3d-printers/"><img width="1024" height="768" src="/assets/3d-printers-4-1024x768.jpg" srcset="/assets/3d-printers-4-1024x768.jpg 1024w, /assets/3d-printers-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="3D Printers" loading="lazy" decoding="async" /><span>3D Printers</span></a>
+							<span>Wood Shop</span>
+						</a>
+						<a class="area-card" href="/metal-shop/">
+							<picture>
+								<source type="image/webp" srcset="/assets/metal-shop-4-1024x768.webp 1024w, /assets/metal-shop-4.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
+								<img width="1024" height="768" src="/assets/metal-shop-4-1024x768.jpg" srcset="/assets/metal-shop-4-1024x768.jpg 1024w, /assets/metal-shop-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Metal Shop" loading="lazy" decoding="async" />
+							</picture>
+							<span>Metal Shop</span>
+						</a>
+						<a class="area-card" href="/laser-cutters/">
+							<picture>
+								<source type="image/webp" srcset="/assets/laser-cutters-2-1024x768.webp 1024w, /assets/laser-cutters-2.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
+								<img width="1024" height="768" src="/assets/laser-cutters-2-1024x768.jpg" srcset="/assets/laser-cutters-2-1024x768.jpg 1024w, /assets/laser-cutters-2.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Laser Cutters" loading="lazy" decoding="async" />
+							</picture>
+							<span>Laser Cutters</span>
+						</a>
+						<a class="area-card" href="/sewing-room/">
+							<picture>
+								<source type="image/webp" srcset="/assets/sewing-room-1-1024x768.webp 1024w, /assets/sewing-room-1.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
+								<img width="1024" height="768" src="/assets/sewing-room-1-1024x768.jpg" srcset="/assets/sewing-room-1-1024x768.jpg 1024w, /assets/sewing-room-1.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Sewing Room" loading="lazy" decoding="async" />
+							</picture>
+							<span>Sewing Room</span>
+						</a>
+						<a class="area-card" href="/electronics-lab/">
+							<picture>
+								<source type="image/webp" srcset="/assets/electronics-lab-1-1024x768.webp 1024w, /assets/electronics-lab-1.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
+								<img width="1024" height="768" src="/assets/electronics-lab-1-1024x768.jpg" srcset="/assets/electronics-lab-1-1024x768.jpg 1024w, /assets/electronics-lab-1.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="Electronics Lab" loading="lazy" decoding="async" />
+							</picture>
+							<span>Electronics Lab</span>
+						</a>
+						<a class="area-card" href="/3d-printers/">
+							<picture>
+								<source type="image/webp" srcset="/assets/3d-printers-4-1024x768.webp 1024w, /assets/3d-printers-4.webp 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" />
+								<img width="1024" height="768" src="/assets/3d-printers-4-1024x768.jpg" srcset="/assets/3d-printers-4-1024x768.jpg 1024w, /assets/3d-printers-4.jpg 1280w" sizes="(max-width: 560px) calc(100vw - 56px), 367px" alt="3D Printers" loading="lazy" decoding="async" />
+							</picture>
+							<span>3D Printers</span>
+						</a>
 					</div>
 
 					<p id="facilities">Facilities available to members include (training may be required):</p>

wood-shop/index.html

@@ -82,15 +82,24 @@
 				<h1>Wood Shop</h1>
 				<div class="entry">
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/wood-shop-1-1024x768.webp 1024w, /assets/wood-shop-1.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/wood-shop-1-1024x768.jpg" srcset="/assets/wood-shop-1-1024x768.jpg 1024w, /assets/wood-shop-1.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Woodworking table saw and work surface" decoding="async" fetchpriority="high" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/wood-shop-2-1024x768.webp 1024w, /assets/wood-shop-2.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/wood-shop-2-1024x768.jpg" srcset="/assets/wood-shop-2-1024x768.jpg 1024w, /assets/wood-shop-2.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Woodworking tools and project workspace" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 
 					<figure>
+						<picture>
+							<source type="image/webp" srcset="/assets/wood-shop-3-1024x768.webp 1024w, /assets/wood-shop-3.webp 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" />
 							<img width="1024" height="768" src="/assets/wood-shop-3-1024x768.jpg" srcset="/assets/wood-shop-3-1024x768.jpg 1024w, /assets/wood-shop-3.jpg 1280w" sizes="(max-width: 760px) calc(100vw - 24px), 750px" alt="Member using a woodworking power tool" loading="lazy" decoding="async" />
+						</picture>
 					</figure>
 				</div>
 			</main>