Image Optimization

21.3.1. Format Selection

Image formats must be selected based on optimal compression efficiency and quality.

Format	Use Case	Priority
AVIF	Photos, complex images	Highest priority (when browser supports it)
WebP	Photos, complex images	Default
PNG	Images requiring transparency, icons	Fallback
JPEG	Photos without transparency	Fallback
SVG	Icons, logos, simple graphics	Vector images only

• WebP must be used as the default image format.
• AVIF must be served as the preferred format on browsers that support it.
• The <picture> tag must be used to provide format-specific fallbacks.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Main image" width="1200" height="600">
</picture>

• Using SVG format for icons and logos is recommended.

---

21.3.2. Lazy Loading

Images located outside the viewport must use lazy loading to improve initial loading performance.

• All images below the viewport must have the loading="lazy" attribute.
• Images displayed above the fold must not have loading="lazy" applied.
• The Intersection Observer API may be used when fine-grained control is required.

<!-- Below-the-fold image -->
<img src="/images/product.webp" alt="Product image" loading="lazy" width="400" height="300">

<!-- Above-the-fold image: lazy loading not applied -->
<img src="/images/hero.webp" alt="Main banner" width="1200" height="600" fetchpriority="high">

• Displaying skeleton UI or placeholders before image loading to ensure user experience is recommended.
• Applying Low-Quality Image Placeholders (LQIP) is recommended.

---

21.3.3. Responsive Images

Images appropriate to the device screen size and resolution must be provided to prevent unnecessary data transfer.

• The srcset and sizes attributes must be used to serve resolution-appropriate images.

<img
  srcset="
    /images/banner-480w.webp 480w,
    /images/banner-768w.webp 768w,
    /images/banner-1200w.webp 1200w,
    /images/banner-1920w.webp 1920w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/images/banner-1200w.webp"
  alt="Banner image"
  width="1200"
  height="400"
>

• Images for high-resolution displays with DPR (Device Pixel Ratio) of 2x or higher must be provided.
• Appropriate sizes values must be set to prevent large desktop images from loading on mobile devices.
• Using an image CDN to apply dynamic resizing based on request parameters is recommended.

---

21.3.4. Size Limits

Image file sizes must not exceed the following thresholds by use case.

Use Case	Maximum Size	Notes
Icons	10KB	SVG format recommended
Thumbnails	100KB	Images used in lists, cards, etc.
General content images	300KB	Images embedded in body content
Hero images	500KB	Main banners, full-screen images

• The above thresholds are based on file size after compression.
• All <img> tags must have explicit width and height attributes to prevent CLS.
• Automatically validating image sizes in the CI pipeline is recommended.
• Images exceeding the thresholds must be compressed or resized before deployment.
• Applying automatic image optimization plugins (vite-plugin-imagemin, etc.) during the build process is recommended.