Optimizing Images and Assets

Serving responsive image sizes with srcset avoids downloading desktop assets on phones.

Using srcset

<img
  srcset="image-480w.jpg 480w,
          image-800w.jpg 800w,
          image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1000px) 800px,
         1200px"
  src="image-800w.jpg"
  alt="Responsive image">

The browser selects the appropriate image based on the viewport width and device pixel ratio.

Angular CLI Asset Configuration

{
  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "src/assets/images",
      "output": "/assets/images"
    }
  ]
}

Lazy Loading Images

<img
  src="placeholder.jpg"
  data-src="actual-image.jpg"
  loading="lazy"
  alt="Lazy loaded image">

The loading="lazy" attribute tells the browser to defer loading until the image is near the viewport.

Modern image formats like WebP and AVIF offer significantly better compression than JPEG and PNG.

Format Comparison

Converting Images

# Convert to WebP
cwebp -q 80 input.jpg -o output.webp

# Convert to AVIF
avifenc --quality 80 input.jpg output.avif

# Batch convert with ImageMagick
magick mogrify -format webp *.jpg

Picture Element with Fallbacks

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

The browser selects the first supported format.

Asset Budgets

{
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ]
        }
      }
    }
  }
}

Image Optimization Checklist

• Use WebP/AVIF with JPEG/PNG fallbacks
• Serve responsive sizes with srcset
• Lazy load below-the-fold images
• Compress images (aim for < 200KB per image)
• Use SVG for icons and logos
• Set explicit width/height to prevent layout shift