HTML Course 19.5 Image optimization, basic SEO and performance

19.5 Image Optimization, Basic SEO and Performance

1. Introduction

Images are often the heaviest assets on a webpage. Proper optimization and SEO practices reduce load times, improve user experience, and boost search rankings. This section explores formats, compression, responsive techniques, lazy loading, SEO attributes, caching strategies, and examples.

2. Choosing the Right Format

• JPEG: Best for photographs. Good compression but lossy.
• PNG: Lossless, supports transparency. Use for logos, icons.
• WebP: Modern format (lossy or lossless). Superior compression.
• SVG: Vector format. Scales infinitely, ideal for icons & illustrations.

3. Compression Techniques

1. Lossy Compression: Removes data to reduce size. Tools: jpegoptim, mozjpeg.
2. Lossless Compression: Optimizes without quality loss. Tools: optipng, pngquant.
3. Automated Build Tools: Integrate Webpack, Gulp plugins for on-the-fly compression.

4. Responsive Images

Serve different resolutions for various viewports using srcset, sizes, and the <picture> element.

Example: srcset and sizes usage

<!-- Responsive image with srcset and sizes -->
<img
  src='image-800.jpg'
  srcset='
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  '
  sizes='(max-width: 600px) 100vw, /* full width on small screens */
         (max-width: 1200px) 50vw, /* half width on medium */
         400px /* fallback */
  '
  alt='Mountain landscape'
  width='800' height='600'
/>
  

Example: <picture> with WebP fallback

<picture>
  <source
    type='image/webp'
    srcset='
      image-400.webp 400w,
      image-800.webp 800w,
      image-1200.webp 1200w
    '
    sizes='(max-width: 800px) 100vw, 800px'
  />
  <img
    src='image-800.jpg'
    srcset='image-400.jpg 400w, image-800.jpg 800w'
    sizes='(max-width: 800px) 100vw, 800px'
    alt='City skyline'
    width='800' height='500'
  />
</picture>
  

5. Lazy Loading

Deferring offscreen images until needed reduces initial payload. Use the native loading attribute:

<!-- Native lazy loading -->
<img
  src='large-photo.jpg'
  alt='Sunset'
  width='1200'
  height='800'
  loading='lazy'
/>
  

For older browsers, implement JavaScript Intersection Observer to trigger src swap.

6. SEO Considerations

• alt attribute: Essential for accessibility and SEO. Describe content succinctly.
• width & height: Prevent layout shifts by reserving space.
• File names: Use descriptive, hyphen-separated names (e.g., blue-widgets.jpg).
• Structured Data: Add ImageObject schema for rich snippets.

<!-- Example of ImageObject schema markup -->
<script type='application/ld+json'>
{
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  'contentUrl': 'https://example.com/images/widget-blue.jpg',
  'thumbnail': 'https://example.com/images/widget-blue-thumb.jpg',
  'width': '800',
  'height': '600',
  'name': 'Blue Widget',
  'description': 'High-quality blue widget with ergonomic design.'
}
</script>
  

7. Performance Strategies

• Preload Critical Images: Use <link rel='preload' as='image' href='hero.jpg'>.
• Caching & CDN: Host images on a CDN. Set long Cache-Control headers.
• Sprite Sheets: Combine small icons into a sprite to reduce HTTP requests.
• HTTP/2: Benefit from multiplexed image requests.

8. Monitoring and Tools

Use performance audits (e.g., Google Lighthouse) to identify large images. Employ tools like WebPageTest and GTmetrix to measure load times and savings.

9. Summary Table

Applying these strategies systematically will improve page speed, reduce bandwidth, enhance accessibility, and strengthen SEO signals. Always measure before and after to quantify improvements.