How can I optimize my images using the Images app (AVIF, lazy loading, responsive design, etc.)?

Introduction

Images account for an average of 50% of a web page's file size.

Optimizing their size and loading times is therefore a key factor in improving your page speed and delivering a smooth user experience.

The Fasterize Images app lets you:

• to automatically compress and convert your images without any loss of visual quality,
• to prioritize the loading of essential images,
• to adapt your visuals to different screens and usage contexts.

In a nutshell: lighter, more efficiently served images for a faster website.

Modern formats: WebP and AVIF

The Fasterize engine automatically converts traditional formats (PNG, JPEG) to modern formats such as WebP or AVIF.

Benefits of Webperf

• WebP images are, on average, 30% smaller than JPEGs.
• AVIF images can achieve up to an 80% reduction in file size.

👉 Result: faster page loading and improvements in LCP and Speed Index.

Optimization of standard file formats (PNG, JPEG, GIF, SVG)

Even your traditional file formats benefit from intelligent compression.

JPEG

• Strip Metadata: Remove unnecessary data (GPS, camera, author, thumbnails, etc.), while preserving the orientation and color profile.
• Progressive loading: displays a low-quality version first, then gradually improves the level of detail.
• Automatic quality detection: dynamic selection of the optimal weight-to-quality ratio using an artifact algorithm.
• Quality Preset & Minimum Quality: automatic adjustment for optimal visual quality.

PNG

• You can convert PNG24 to PNG8 by reducing the number of colors.
• Lossy compression that is barely noticeable.
• Weight reduction of up to 80%.

SVG

Removal of metadata, comments, hidden elements, or unnecessary values to reduce the file size without affecting the visual output.

Web performance advantage

Smart compression = up to an 80% reduction in file size while maintaining the same visual quality.

Lazyload and Unlazyload

Lazyload

Lazy loading defers the loading of images below the fold. Fasterize can enable this option with a single click.

• Offset: allows you to skip the first few frames to prevent the initial display from being distorted.
• Specific targets: Fine-tune the configuration to prevent certain critical visuals from being lazy-loaded.

👉 Improves LCP and Speed Index by prioritizing visible images.

Unlazyload

If your site is already using overly aggressive lazy loading, Fasterize can disable the existing system and replace it with its own.

You can also set rules to enable selective lazy loading for certain images.

Advanced options for image tags

• Image inlining (Base64): embedding small icons directly into the HTML to reduce the number of HTTP requests.
• Image Dimensions and Attributes : automatic addition of width and height for each image in order to limit the CLS (Cumulative Layout Shift).
• Custom image optimization: support for specific HTML attributes containing image URLs (useful for dynamically generated tags).

Responsive Images

With Fasterize, your images automatically adapt to different screens and resolutions:

• Responsive: Generates images optimized for different screen sizes.
• Resizing via URL : Use the settings frz-width, frz-height, frz-fit, frz-gravity, frz-enlarge to adjust the dimensions and framing.

👉 Learn more about resizing images

Conclusion

With the Images app, Fasterize helps you balance visual quality and web performance:

• intelligent compression of standard formats,
• automatic conversion to WebP/AVIF,
• optimized lazy loading,
• Advanced management of responsive images.

🚀 The result: lighter, faster pages and a better user experience across all devices.

‍