Image Optimization

Introduction

Image Optimization is a central component of technical SEO and Page Speed optimization. Images often make up 60-80% of a website's total size and thus have a direct impact on loading times and Core Web Vitals. Professional image optimization improves not only user experience but also search engine rankings.

Image Format

File Size

Quality

Browser Support

JPEG

Large

Good

100%

PNG

Very Large

Very Good

100%

WebP

Small

Very Good

95%

AVIF

Very Small

Excellent

80%

SVG

Minimal

Perfect

100%

Why Image Optimization is Important

Core Web Vitals Impact

Image optimization has a direct impact on the most important Core Web Vitals metrics:

Largest Contentful Paint (LCP): Optimized images reduce the loading time of the largest visible element
Cumulative Layout Shift (CLS): Correct image dimensions prevent layout shifts
First Input Delay (FID): Smaller images relieve the main thread

SEO Benefits

Improved Page Speed Scores
Higher Mobile Usability
Better User Experience Signals
Reduced Bounce Rate

Modern Image Formats

WebP - The New Standard

WebP offers 25-35% smaller file sizes at the same quality compared to JPEG. Google has supported WebP since 2010 and it is supported by over 95% of browsers.

WebP Advantages:

Lossless and lossy compression
Transparency support
Animations possible
Significantly smaller file sizes

AVIF - The Future

AVIF is the newest image format and offers even better compression than WebP. It can create 50% smaller files than JPEG.

AVIF Properties:

Based on AV1 codec
Supports HDR and Wide Color Gamut
Not yet fully supported by all browsers
Ideal for future implementations

SVG for Icons and Graphics

SVG is vector-based and perfect for icons, logos and simple graphics. SVG files are scalable and often have very small file sizes.

Image Compression Strategies

Lossy vs. Lossless Compression

Compression Type

File Size

Quality

Use Case

Lossy

Very Small

Slightly Reduced

Photos, complex images

Lossless

Small

Original Quality

Icons, screenshots, graphics

Compression Tools

Automatic Tools:

TinyPNG/TinyJPG
ImageOptim
Squoosh (Google)
ShortPixel

Command-Line Tools:

ImageMagick
cwebp (WebP)
avifenc (AVIF)

Responsive Images Implementation

srcset and sizes Attributes

Modern responsive images use the srcset attribute for different image sizes:

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

Picture Element for Format Selection

The <picture> element enables the selection of different image formats based on browser support:

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

Lazy Loading Implementation

Native Lazy Loading

Modern browsers support native lazy loading:

<img src="image.jpg" 
     loading="lazy" 
     alt="Lazy loaded image">

JavaScript-based Lazy Loading

For older browsers or advanced functionality:

Intersection Observer API
Scroll-based triggers
Viewport-based loading times