Image Optimization for Web Performance

1
<img
2
  src="small.jpg"
3
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
4
  sizes="(max-width:600px) 100vw, 50vw"
5
  alt="Example"
6
/>

1
<img
2
  src="hero.jpg"
3
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
4
  sizes="
5
    (max-width: 600px) 100vw,
6
    (max-width: 1200px) 50vw,
7
    33vw
8
  "
9
  alt="Hero image"
10
/>

1
<picture>
2
  <!-- Art direction: different crop for mobile -->
3
  <source media="(max-width: 768px)" srcset="hero-mobile-400.jpg 400w, hero-mobile-600.jpg 600w" type="image/jpeg" />
4

5
  <!-- Format negotiation: AVIF for supported browsers -->
6
  <source srcset="hero-800.avif 800w, hero-1200.avif 1200w" type="image/avif" />
7

8
  <!-- Format negotiation: WebP fallback -->
9
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w" type="image/webp" />
10

11
  <!-- Final fallback -->
12
  <img
13
    src="hero-800.jpg"
14
    srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
15
    sizes="(max-width: 768px) 100vw, 50vw"
16
    alt="Hero image"
17
  />
18
</picture>

1
<picture>
2
  <!-- Scenario 1: Mobile + AVIF support -->
3
  <source media="(max-width: 768px)" srcset="mobile.avif 400w, mobile-2x.avif 800w" type="image/avif" />
4

5
  <!-- Scenario 2: Mobile + no AVIF support -->
6
  <source media="(max-width: 768px)" srcset="mobile.webp 400w, mobile-2x.webp 800w" type="image/webp" />
7

8
  <!-- Scenario 3: Desktop + AVIF support -->
9
  <source srcset="desktop.avif 800w, desktop-2x.avif 1600w" type="image/avif" />
10

11
  <!-- Scenario 4: Desktop + no AVIF support -->
12
  <source srcset="desktop.webp 800w, desktop-2x.webp 1600w" type="image/webp" />
13

14
  <!-- Scenario 5: No format support or older browser -->
15
  <img src="desktop.jpg" srcset="desktop.jpg 800w, desktop-2x.jpg 1600w" alt="Desktop image" />
16
</picture>

1
<!-- Critical above-the-fold image -->
2
<img src="hero.jpg" loading="eager" decoding="async" fetchpriority="high" alt="Hero Image" />
3

4
<!-- Below-the-fold image -->
5
<img src="gallery.jpg" loading="lazy" decoding="async" fetchpriority="auto" alt="Gallery Image" />

1
<img class="lazy" data-src="image-high.jpg" src="image-low.jpg" loading="lazy" alt="Lazy loaded image" />

1
const io = new IntersectionObserver(
2
  (entries, obs) => {
3
    entries.forEach(({ isIntersecting, target }) => {
4
      if (!isIntersecting) return
5

6
      const img = target
7
      img.src = img.dataset.src
8

9
      // Decode image asynchronously
10
      img
11
        .decode()
12
        .then(() => {
13
          img.classList.add("loaded")
14
        })
15
        .catch((err) => {
16
          console.error("Image decode failed:", err)
17
        })
18

19
      obs.unobserve(img)
20
    })
21
  },
22
  {
23
    rootMargin: "200px", // Start loading 200px before image enters viewport
24
    threshold: 0.1, // Trigger when 10% of image is visible
25
  },
26
)
27

28
document.querySelectorAll("img.lazy").forEach((img) => io.observe(img))

1
<img src="hero.webp" decoding="async" alt="Hero" />

1
async function loadDecoded(url) {
2
  const img = new Image()
3
  img.src = url
4

5
  try {
6
    await img.decode()
7
    document.body.append(img)
8
  } catch (error) {
9
    console.error("Failed to decode image:", error)
10
  }
11
}
12

13
loadDecoded("hero.webp")

1
<img src="lcp.jpg" fetchpriority="high" loading="eager" decoding="async" alt="LCP Image" />

1
<picture>
2
  <source srcset="photo.avif" type="image/avif" />
3
  <source srcset="photo.webp" type="image/webp" />
4
  <img src="photo.jpg" alt="Photograph" />
5
</picture>

1
<picture>
2
  <source srcset="logo.avif" type="image/avif" />
3
  <source srcset="logo.webp" type="image/webp" />
4
  <img src="logo.png" alt="Logo" />
5
</picture>

1
<picture>
2
  <source srcset="hero.avif" type="image/avif" />
3
  <img src="hero.webp" alt="Hero" />
4
</picture>

1
// Node.js with Sharp
2
const sharp = require("sharp")
3

4
async function generateResponsiveImages(inputPath, outputDir) {
5
  const sizes = [400, 800, 1200, 1600]
6
  const formats = ["webp", "avif"]
7

8
  for (const size of sizes) {
9
    for (const format of formats) {
10
      await sharp(inputPath).resize(size).toFormat(format).toFile(`${outputDir}/image-${size}.${format}`)
11
    }
12
  }
13
}

1
// Canvas-based client-side resizing
2
function resizeImage(file, maxWidth, maxHeight) {
3
  return new Promise((resolve) => {
4
    const canvas = document.createElement("canvas")
5
    const ctx = canvas.getContext("2d")
6
    const img = new Image()
7

8
    img.onload = () => {
9
      const { width, height } = calculateDimensions(img.width, img.height, maxWidth, maxHeight)
10

11
      canvas.width = width
12
      canvas.height = height
13

14
      ctx.drawImage(img, 0, 0, width, height)
15

16
      canvas.toBlob(resolve, "image/webp", 0.8)
17
    }
18

19
    img.src = URL.createObjectURL(file)
20
  })
21
}

1
<picture>
2
  <!-- High-end devices: AVIF with HDR -->
3
  <source media="(min-width: 1200px) and (color-gamut: p3)" srcset="hero-hdr.avif" type="image/avif" />
4

5
  <!-- Standard devices: WebP -->
6
  <source srcset="hero.webp" type="image/webp" />
7

8
  <!-- Fallback: JPEG -->
9
  <img src="hero.jpg" alt="Hero image" />
10
</picture>

1
class NetworkAwareImageLoader {
2
  constructor() {
3
    this.connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
4
    this.setupOptimization()
5
  }
6

7
  setupOptimization() {
8
    const images = document.querySelectorAll("img[data-network-aware]")
9

10
    images.forEach((img) => {
11
      const quality = this.getOptimalQuality()
12
      const format = this.getOptimalFormat()
13

14
      img.src = this.updateImageUrl(img.dataset.src, quality, format)
15
    })
16
  }
17

18
  getOptimalQuality() {
19
    if (!this.connection) return 80
20

21
    const { effectiveType, downlink } = this.connection
22

23
    if (effectiveType === "slow-2g" || downlink < 1) return 60
24
    if (effectiveType === "2g" || downlink < 2) return 70
25
    if (effectiveType === "3g" || downlink < 5) return 80
26
    return 90
27
  }
28

29
  getOptimalFormat() {
30
    if (!this.connection) return "webp"
31

32
    const { effectiveType } = this.connection
33

34
    if (effectiveType === "slow-2g" || effectiveType === "2g") return "jpeg"
35
    return "webp"
36
  }
37

38
  updateImageUrl(url, quality, format) {
39
    const urlObj = new URL(url)
40
    urlObj.searchParams.set("q", quality.toString())
41
    urlObj.searchParams.set("f", format)
42
    return urlObj.toString()
43
  }
44
}

1
<!-- Critical above-the-fold images -->
2
<link rel="preload" as="image" href="hero.avif" type="image/avif" />
3
<link rel="preload" as="image" href="hero.webp" type="image/webp" />
4

5
<!-- LCP image with high priority -->
6
<link rel="preload" as="image" href="lcp-image.avif" fetchpriority="high" />

1
// Monitor image loading performance
2
const imageObserver = new PerformanceObserver((list) => {
3
  for (const entry of list.getEntries()) {
4
    if (entry.initiatorType === "img") {
5
      console.log(`Image loaded: ${entry.name}`)
6
      console.log(`Load time: ${entry.responseEnd - entry.startTime}ms`)
7
      console.log(`Size: ${entry.transferSize} bytes`)
8
    }
9
  }
10
})
11

12
imageObserver.observe({ type: "resource" })

1
// Track Largest Contentful Paint for images
2
const lcpObserver = new PerformanceObserver((list) => {
3
  const entries = list.getEntries()
4
  const lastEntry = entries[entries.length - 1]
5

6
  if (lastEntry.element && lastEntry.element.tagName === "IMG") {
7
    console.log(`LCP image: ${lastEntry.element.src}`)
8
    console.log(`LCP time: ${lastEntry.startTime}ms`)
9
  }
10
})
11

12
lcpObserver.observe({ type: "largest-contentful-paint" })

1
class SmartImageOptimizer {
2
  constructor(options = {}) {
3
    this.options = {
4
      defaultQuality: 80,
5
      defaultFormat: "webp",
6
      enableAVIF: true,
7
      enableWebP: true,
8
      lazyLoadThreshold: 200,
9
      ...options,
10
    }
11

12
    this.networkQuality = this.getNetworkQuality()
13
    this.userPreference = this.getUserPreference()
14
    this.setupOptimization()
15
  }
16

17
  getNetworkQuality() {
18
    if (!navigator.connection) return "unknown"
19

20
    const { effectiveType, downlink } = navigator.connection
21

22
    if (effectiveType === "slow-2g" || downlink < 1) return "low"
23
    if (effectiveType === "2g" || downlink < 2) return "medium"
24
    if (effectiveType === "3g" || downlink < 5) return "medium-high"
25
    return "high"
26
  }
27

28
  getUserPreference() {
29
    if (window.matchMedia("(prefers-reduced-data: reduce)").matches) {
30
      return "data-saver"
31
    }
32
    return "normal"
33
  }
34

35
  setupOptimization() {
36
    this.optimizeExistingImages()
37
    this.setupLazyLoading()
38
    this.setupMediaQueryListeners()
39
  }
40

41
  optimizeExistingImages() {
42
    const images = document.querySelectorAll("img:not([data-optimized])")
43

44
    images.forEach((img) => {
45
      this.optimizeImage(img)
46
      img.setAttribute("data-optimized", "true")
47
    })
48
  }
49

50
  optimizeImage(img) {
51
    const strategy = this.getOptimizationStrategy(img)
52
    const optimizedSrc = this.generateOptimizedUrl(img.src, strategy)
53

54
    if (optimizedSrc !== img.src) {
55
      img.src = optimizedSrc
56
    }
57

58
    this.applyLoadingAttributes(img, strategy)
59
  }
60

61
  getOptimizationStrategy(img) {
62
    const isAboveFold = this.isAboveFold(img)
63
    const isCritical = img.hasAttribute("data-critical")
64

65
    if (isAboveFold || isCritical) {
66
      return "above-fold"
67
    }
68

69
    if (this.userPreference === "data-saver" || this.networkQuality === "low") {
70
      return "data-saver"
71
    }
72

73
    return this.networkQuality
74
  }
75

76
  generateOptimizedUrl(originalUrl, strategy) {
77
    const urlObj = new URL(originalUrl)
78

79
    switch (strategy) {
80
      case "above-fold":
81
        urlObj.searchParams.set("q", "90")
82
        urlObj.searchParams.set("f", this.options.enableAVIF ? "avif" : "webp")
83
        break
84
      case "data-saver":
85
        urlObj.searchParams.set("q", "60")
86
        urlObj.searchParams.set("f", "jpeg")
87
        break
88
      case "low":
89
        urlObj.searchParams.set("q", "70")
90
        urlObj.searchParams.set("f", "jpeg")
91
        break
92
      case "medium":
93
        urlObj.searchParams.set("q", "80")
94
        urlObj.searchParams.set("f", "webp")
95
        break
96
      case "medium-high":
97
        urlObj.searchParams.set("q", "85")
98
        urlObj.searchParams.set("f", this.options.enableAVIF ? "avif" : "webp")
99
        break
100
      case "high":
101
        urlObj.searchParams.set("q", "90")
102
        urlObj.searchParams.set("f", this.options.enableAVIF ? "avif" : "webp")
103
        break
104
    }
105

106
    return urlObj.toString()
107
  }
108

109
  applyLoadingAttributes(img, strategy) {
110
    if (strategy === "above-fold") {
111
      img.loading = "eager"
112
      img.decoding = "async"
113
      img.fetchPriority = "high"
114
    } else {
115
      img.loading = "lazy"
116
      img.decoding = "async"
117
      img.fetchPriority = "auto"
118
    }
119
  }
120

121
  isAboveFold(element) {
122
    const rect = element.getBoundingClientRect()
123
    return rect.top < window.innerHeight && rect.bottom > 0
124
  }
125

126
  setupLazyLoading() {
127
    const lazyImages = document.querySelectorAll('img[loading="lazy"]')
128

129
    if ("IntersectionObserver" in window) {
130
      const imageObserver = new IntersectionObserver(
131
        (entries, observer) => {
132
          entries.forEach((entry) => {
133
            if (entry.isIntersecting) {
134
              const img = entry.target
135
              this.loadImage(img)
136
              observer.unobserve(img)
137
            }
138
          })
139
        },
140
        {
141
          rootMargin: `${this.options.lazyLoadThreshold}px`,
142
        },
143
      )
144

145
      lazyImages.forEach((img) => imageObserver.observe(img))
146
    } else {
147
      // Fallback for older browsers
148
      lazyImages.forEach((img) => this.loadImage(img))
149
    }
150
  }
151

152
  loadImage(img) {
153
    if (img.dataset.src) {
154
      img.src = img.dataset.src
155
      img.removeAttribute("data-src")
156
    }
157
  }
158

159
  setupMediaQueryListeners() {
160
    // Listen for data saver preference changes
161
    const dataSaverQuery = window.matchMedia("(prefers-reduced-data: reduce)")
162
    dataSaverQuery.addEventListener("change", (e) => {
163
      this.userPreference = e.matches ? "data-saver" : "normal"
164
      this.setupOptimization()
165
    })
166

167
    // Listen for reduced motion preference changes
168
    const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
169
    reducedMotionQuery.addEventListener("change", (e) => {
170
      if (e.matches) {
171
        this.userPreference = "data-saver"
172
        this.setupOptimization()
173
      }
174
    })
175

176
    // Listen for color scheme changes
177
    const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)")
178
    colorSchemeQuery.addEventListener("change", (e) => {
179
      this.setupOptimization()
180
    })
181

182
    // Listen for connection changes
183
    if (navigator.connection) {
184
      navigator.connection.addEventListener("change", () => {
185
        this.networkQuality = this.getNetworkQuality()
186
        this.setupOptimization()
187
      })
188
    }
189
  }
190
}

1
.hero-image-container {
2
  position: relative;
3
  width: 100%;
4
  height: auto;
5
  overflow: hidden;
6
}
7

8
.hero-image-container img {
9
  width: 100%;
10
  height: auto;
11
  display: block;
12
  transition: opacity 0.3s ease;
13
}
14

15
/* Loading states */
16
.hero-image-container img:not([src]) {
17
  opacity: 0;
18
}
19

20
.hero-image-container img[src] {
21
  opacity: 1;
22
}
23

24
/* Optimization strategy indicators */
25
.smart-optimized-data-saver {
26
  filter: contrast(0.9) saturate(0.8);
27
}
28

29
.smart-optimized-network-conservative {
30
  filter: contrast(0.85) saturate(0.7);
31
}
32

33
.smart-optimized-network-optimistic {
34
  filter: contrast(1.05) saturate(1.1);
35
}
36

37
.smart-optimized-above-fold {
38
  /* No filter - optimal quality */
39
}
40

41
/* Network quality indicators */
42
.network-low {
43
  filter: contrast(0.8) saturate(0.6);
44
}
45

46
.network-medium {
47
  filter: contrast(0.9) saturate(0.8);
48
}
49

50
.network-medium-high {
51
  filter: contrast(1) saturate(0.9);
52
}
53

54
.network-high {
55
  filter: contrast(1.05) saturate(1);
56
}
57

58
/* Responsive adjustments */
59
@media (max-width: 767px) {
60
  .hero-image-container {
61
    aspect-ratio: 16/9; /* Mobile aspect ratio */
62
  }
63
}
64

65
@media (min-width: 768px) and (max-width: 1199px) {
66
  .hero-image-container {
67
    aspect-ratio: 21/9; /* Tablet aspect ratio */
68
  }
69
}
70

71
@media (min-width: 1200px) {
72
  .hero-image-container {
73
    aspect-ratio: 2/1; /* Desktop aspect ratio */
74
  }
75
}
76

77
/* Dark mode adjustments */
78
@media (prefers-color-scheme: dark) {
79
  .hero-image-container img {
80
    filter: brightness(0.9) contrast(1.1);
81
  }
82
}
83

84
/* Reduced motion preferences */
85
@media (prefers-reduced-motion: reduce) {
86
  .hero-image-container img {
87
    transition: none;
88
  }
89
}