Fluid images, srcset/sizes, art-direction with <picture>, and tidy grid thumbnails.

/* ========= CSS: Responsive Product Images ========= */

/* 1) Fluid image utility */
.img-fluid { max-width:100%; height:auto; display:block; }

/* 2) Catalog/grid thumbnail with consistent ratio */
.prod-thumb { aspect-ratio: 4 / 3; border-radius:12px; overflow:hidden; background:#f6f8fb; }
.prod-thumb > img { width:100%; height:100%; object-fit:cover; display:block; }

/* 3) Contained image (no crop) variant, if needed */
/* .prod-contain > img { object-fit:contain; background:#fff; } */

/* ========= HTML patterns ========= */

/* A) Simple responsive photo (default) */
<img
  class="img-fluid"
  src="images/products/camera-800.webp"
  srcset="images/products/camera-400.webp 400w,
          images/products/camera-600.webp 600w,
          images/products/camera-800.webp 800w,
          images/products/camera-1200.webp 1200w"
  sizes="(max-width:576px) 100vw, (max-width:992px) 50vw, 33vw"
  width="800" height="800"
  alt="Mirrorless camera front view"
  loading="lazy" decoding="async">

/* B) Art-direction with <picture> (mobile crop vs desktop), AVIF/WebP + JPEG fallback */
<picture>
  <source type="image/avif"
          srcset="images/products/shoes-mobile.avif 480w,
                  images/products/shoes-desktop.avif 1200w"
          sizes="(max-width: 576px) 100vw, 1200px">
  <source type="image/webp"
          srcset="images/products/shoes-mobile.webp 480w,
                  images/products/shoes-desktop.webp 1200w"
          sizes="(max-width: 576px) 100vw, 1200px">
  <img
    src="images/products/shoes-desktop.jpg"
    width="1200" height="800"
    alt="Running shoes angled view"
    loading="lazy" decoding="async">
</picture>

/* C) Grid thumbnail (tidy cards, no weird crops) */
<div class="prod-thumb">
  <img src="images/products/bag-600.webp" width="600" height="450" alt="Leather bag, front view">
</div>

/* D) Product page hero (prioritize LCP) */
<img
  src="images/products/sofa-1200.webp"
  srcset="images/products/sofa-800.webp 800w,
          images/products/sofa-1000.webp 1000w,
          images/products/sofa-1200.webp 1200w"
  sizes="(max-width:576px) 100vw, (max-width:992px) 80vw, 1200px"
  width="1200" height="900"
  alt="Blue fabric sofa, front view"
  loading="eager" fetchpriority="high" decoding="async">

/* Notes:
- Prefer WebP for photos; JPEG only as a fallback if needed.
- Use PNG for transparency or crisp UI/line art; SVG for logos/icons/diagrams.
- Always include width/height to prevent layout shift.
- Keep above-the-fold images <~150 KB if possible. */