chore: convert photo images to jpg for smaller size

index.html

@@ -251,22 +251,22 @@
                         <div class="relative flex items-end justify-end w-full h-full overflow-hidden"
                             id="photos-image">
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_building.png" data-section-image="photos"
+                                alt="" src="./static/assets/photos/photo_building.jpg" data-section-image="photos"
                                 data-slide="0" data-photo="photo_building" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_dandelion.png" data-section-image="photos"
+                                alt="" src="./static/assets/photos/photo_dandelion.jpg" data-section-image="photos"
                                 data-slide="1" data-photo="photo_dandelion" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_flowers.png" data-section-image="photos"
+                                alt="" src="./static/assets/photos/photo_flowers.jpg" data-section-image="photos"
                                 data-slide="2" data-photo="photo_flowers" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_plush.png" data-section-image="photos" data-slide="3"
+                                alt="" src="./static/assets/photos/photo_plush.jpg" data-section-image="photos" data-slide="3"
                                 data-photo="photo_plush" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_tower.png" data-section-image="photos" data-slide="4"
+                                alt="" src="./static/assets/photos/photo_tower.jpg" data-section-image="photos" data-slide="4"
                                 data-photo="photo_tower" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5"
+                                alt="" src="./static/assets/photos/photo_trains.jpg" data-section-image="photos" data-slide="5"
                                 data-photo="photo_trains" />
                             <p class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end">PHOTOS</p>
                         </div>