Academy / Advanced Level: HTML and CSS

Web Performance Optimization

Optimizing Images and Fonts

Images are one of the largest resources loaded on a website and are often the biggest contributor to slow loading times. Optimizing images and fonts ensures faster load times without sacrificing quality.

Techniques for Image Optimization:

• Compress images: Use image compression tools like TinyPNG, ImageOptim, or Squoosh to reduce image sizes without noticeable quality loss.
• Choose the right format:
  • Use JPEG for photos and images with many colors.
  • Use PNG for images with transparency or simpler graphics.
  • Use SVG for scalable vector graphics like logos.
  • Use WebP for better compression compared to PNG and JPEG (supported in most modern browsers).
• Responsive images: Use the srcset attribute to load different image sizes based on the screen size.

Example of Responsive Images:

<img 
  src="image-small.jpg" 
  srcset="image-large.jpg 1200w, image-medium.jpg 800w, image-small.jpg 400w" 
  alt="Optimized image">

In this example, the browser selects the appropriate image size based on the screen width, improving performance on mobile devices by avoiding unnecessary large images.