web: right-size card images and load the first ones eagerly

web/src/components/venues/VenueItem.tsx

@@ -3,7 +3,14 @@ import styles from "./venueItem.module.scss";
 import Link from "next/link";
 import { Image } from "@/components/general/Image";
 
-export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
+export const VenueItem = ({
+  venue,
+  priority,
+}: {
+  venue: VenueFragment;
+  // above the fold: load the image right away
+  priority?: boolean;
+}) => {
   const featuredImage: any = venue.featuredImage;
 
   const { capacitySitting, capacityStanding, usedFor } = venue;
@@ -27,6 +34,8 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
             width={0}
             height={0}
             sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 35vw"
+            loading={priority ? "eager" : undefined}
+            fetchPriority={priority ? "high" : undefined}
           />
         )}
       </div>