Image Delivery

Compression Levels

RapidLoad plugin provides various optimization features to improve the performance and speed of websites. One of these features includes image compression, which can be applied in three different levels of compression: lossy, glossy, and lossless:

Lossy

Lossy compression is the best option if you put Page Speed over image quality, as it offers the highest compression rate and results in the smallest optimized image size. This is ideal for website speed but may cause a slight reduction in image quality. It strikes the best balance between optimization and picture quality.

Glossy

If you prioritize image quality over page speed, Glossy compression is recommended. It compresses images to a smaller size while maintaining high quality, making it suitable for professionals working with high-quality images. However, it may have a slight impact on the site's speed.

Lossless

Lossless compression maintains the exact quality of original images but with less reduction in size compared to Lossy or Glossy. It's necessary for technical drawings, vector graphics, or when you want to preserve image quality.

The lossless compression is best for text-heavy images and pictures with a transparent background. The types of formats that can benefit from lossless image compression are RAW, BMP, GIF, and . PNG.

Low-Quality Image placeholders (LQIP)

Low-quality image placeholders, also known as image placeholders or image stubs, are temporary images used to fill space until the actual image is loaded. These are usually low-resolution or blurred images of the actual image and serve as a visual cue that an image is expected to be present in that location.

Serve next-gen Images (AVIF, WEBP)

Serving next-generation images, specifically AVIF and WebP formats, is a strategy aimed at optimizing website performance and enhancing user experience. AVIF (AV1 Image File Format) and WebP are advanced image formats that offer better compression and smaller file sizes without compromising image quality.

Implementing next-gen images involves converting your existing image assets into these formats and then configuring your web server to serve them based on the browser's capabilities. This can lead to faster loading times, reduced data usage, and improved user engagement, particularly on mobile devices and slower connections.

  • This option will serve the JPEG and PNG images in Webp or AVIF.
  • Switching to next-gen image formats will reduce page size, resulting in faster page loading, particularly on mobile devices. This is important for your visitors' page experience.

By serving AVIF and WebP images, websites can strike a balance between offering visually appealing content and ensuring swift page loading, resulting in an enhanced browsing experience for users across various devices and network conditions.

Lazy-Load

Lazy loading delays the loading of off-screen images or images located below the fold on a website until the user scrolls down to the section where the images are located.

This helps improve page load speed by reducing the initial load size of the page and reducing the number of requests made to the server.

Exclude Above-the-fold images from Lazy Load

The goal of "Above the fold" exclusion is to prioritize the loading of the most important content on a page, which typically includes the images that are visible without scrolling.

Iframes Lazy Load

Iframe lazy loading is an extension of Image Lazy loading that defers the loading of iframe content until it is needed, This typically occurs when a user scrolls down to the section of the page where the iframe is located.

By implementing RapidLoad’s iframe lazy loading, the loading of iframe content is delayed, optimizing the initial page load and improving overall performance

Exclude Images/Iframes from Lazy Load

Images and Iframes that should be excluded from lazy-loading

Add Width and Height Attributes

When images are added to a web page without specifying their dimensions, the browser needs to spend extra time figuring out the correct space needed for the image to load, which can cause layout shifts and delay the page rendering.

RapidLoad uses this option to automatically add width and height attributes to images, improving page speed metrics such as First Contentful Paint and Largest Contentful Paint. This option comes in handy for sites with a large number of images

Exclude Images

You could exclude images from optimizations by inserting the image name in the Textbox.

Table of Contents