HTML Course 12.6 Performance best practices with images and multimedia

12.6 Performance Best Practices with Images and Multimedia

In modern web development, images and multimedia assets often account for the majority of page weight. Applying best practices reduces load times, improves user experience and boosts Core Web Vitals. Below is an extensive guide covering formats, compression, responsive delivery, lazy loading, preloading, CDNs, sprites, and video optimization.

1. Choose the Right Formats

• Raster formats: JPEG (photography), PNG (transparency), GIF (simple animations).
• Next-gen formats: WebP and AVIF offer smaller file sizes for both lossy and lossless needs.
• Vector formats: SVG for icons and logos—scalable without quality loss.

Example: use AVIF or WebP with a JPEG fallback:

<picture>
  <source srcset='image.avif' type='image/avif'>
  <source srcset='image.webp' type='image/webp'>
  <img src='image.jpg' alt='Descriptive alt' width='600' height='400'>
</picture>
  

2. Compression and Quality Trade-offs

• Use tools like Squoosh, imagemin, JPEGoptim or SVGO.
• For JPEG, enable progressive to show a low-res preview early.
• Run automated build tasks to compress on deploy.

3. Responsive Images

Serve different resolutions based on viewport size or DPR:

<img
  src='photo-400.jpg'
  srcset='
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w'
  sizes='(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw'
  alt='Scenic view'
  loading='lazy'
  width='1200'
  height='800'>
  

sizes tells the browser which image width will be displayed; the browser picks the best srcset candidate.

4. Lazy Loading Images and Iframes

• For most browsers, use loading='lazy' on <img> and <iframe>.
• Fallback: Intersection Observer API to defer off-screen assets.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ('IntersectionObserver' in window) {
      let lazyEls = document.querySelectorAll('[data-lazy]');
      let observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            let el = entry.target;
            el.src = el.dataset.src;
            el.onload = () => el.classList.add('loaded');
            observer.unobserve(el);
          }
        });
      });
      lazyEls.forEach(el => observer.observe(el));
    }
  });
</script>

<img data-lazy 
     data-src='large-image.jpg' 
     alt='Deferred image' 
     width='800' 
     height='600'>
  

5. Preloading Critical Images

Hint the browser to load above-the-fold images early:

<link rel='preload' 
      as='image' 
      href='hero-banner.jpg' 
      imagesrcset='
        banner-800.jpg 800w,
        banner-1200.jpg 1200w'
      imagesizes='100vw'>
  

6. Use a CDN and Cache Headers

• Distribute assets globally to minimize latency.
• Set Cache-Control: public, max-age=31536000, immutable on fingerprinted URLs.

7. Sprites, Icon Fonts, and Inline SVG

• Combine small icons into a sprite sheet and use background-position.
• Consider SVG symbol sprites for razor-sharp icons.

<svg style='display:none'>
  <symbol id='icon-search' viewBox='0 0 24 24'>
    <path d='M15.5 14h-.79l-.28-.27...'/>
  </symbol>
</svg>

<svg class='icon'>
  <use href='#icon-search'></use>
</svg>
  

8. Video Optimization

• Offer multiple codecs (H.264, VP9, AV1) and resolutions for adaptive streaming.
• Use <video> attributes: preload='metadata', poster, width, height, muted, playsinline.
• Consider HLS or DASH for live or large VOD content.

<video
  width='1280'
  height='720'
  controls
  preload='metadata'
  poster='poster.jpg'
  muted
  playsinline>

  <source src='video-720p.mp4' type='video/mp4; codecs='avc1.42E01E'' media='(max-width: 800px)'>
  <source src='video-1080p.webm' type='video/webm; codecs='vp9'' media='(min-width: 801px)'>

  <track 
    kind='subtitles' 
    srclang='en' 
    src='subs-en.vtt' 
    label='English'>

  Your browser does not support HTML5 video.
</video>
  

9. Adaptive Streaming with HLS/DASH

Use JavaScript players (e.g., hls.js or dash.js) to switch quality on the fly based on bandwidth.

10. Measure and Iterate

• Use Lighthouse, WebPageTest or real user monitoring (RUM) to identify heavy assets.
• Continuously refine compression settings and delivery methods.

By combining proper formats, responsive techniques, lazy loading, preloading hints, CDN distribution, caching, and smart video delivery, you can dramatically reduce load times and provide a smooth multimedia experience for users.