Image Speed Optimization Test Metrics

bethany libus
August 26th, 2021

Speed Test

ImageEngine provides an automated Image Speed Test to analyze your web page’s current performance and the improvements you can expect by using ImageEngine. The test provides widely accepted metrics used by Google, WebPageTest and other web analytics tools, but focuses on the metrics relevant to image optimization.

Buttons 2021 Run Image Speed Test

The ImageEngine Image Speed Test uses Google’s Lighthouse tool in the background to analyze your current web page. Next, it simulates the same webpage if ImageEngine were to optimize all of the current images. For mobile device results, it runs a simulation modelled on a Samsung Galaxy J3 running over a 4G mobile network connection. For desktop results, it models a laptop using a cable connection. Finally, it provides a comparison between the current page and ImageEngine simulation.

While the Image Speed Test is reliable, it is also a simulation that relies upon having good access to your website. Your current CDN may interfere with the analysis. Likewise, it may be good to run the test 2-3 times to check for consistent results. If you are having problems, [please contact us for help]. Running a free trial of ImageEngine is easy and provides real-world results like these metrics.

Below is an explanation of the key metrics used in the Image Speed Test.

Core Web Vitals Icons Horizontal Image Payload Horizontal

What is Image Payload Savings?

Image Payload Savings compares the current image payload on a page versus ImageEngine’s optimized payload. The savings is expressed in a percent of payload saved. For example, if the current page has 1,000 KB of images, and ImageEngine optimizes the payload down to only 200KB, then that would be an 80% savings.

The image payload savings is impacted by many factors including the dimensions, quality, and file format of the original image. Savings also are impacted by the dimensions, pixel density, and next-gen file formats supported by requesting devices. ImageEngine optimizes based on the capabilities of the specific device requesting the images.

See how our customers achieve up to 80% image payload savings.

Core Web Vitals Icons Horizontal LCP Horizontal

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint measures the render time (in seconds) of the largest image or text block visible within the viewport, relative to when the page first started loading. Typically, the largest image is the hero image at the top of pages. ImageEngine can dramatically optimize this image and improve your LCP score.

Largest Contentful Paint is one of three metrics that impact Google’s Core Web Vitals. Largest Contentful Paint was chosen to reflect a user’s experience with loading time. The other two metrics, First Input Delay and Cumulative Layout Shift, are meant to measure interactivity and visual stability.

Image optimization will improve your LCP score and thereby improve your Core Web Vitals. Since Google factors your page’s Core Web Vitals into search engine rankings, it is very important to optimize images and improve LCP for business purposes.

Core Web Vitals Icons Horizontal Speed Index Horizontal

What is Speed Index?

According to Google, Speed Index measures how quickly (in seconds) content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the Speedline Node.js module to generate the Speed Index score.

Core Web Vitals Icons Horizontal Page Load Horizontal

What is Page Load Time Acceleration?

Page Load Time Acceleration measures the time (in seconds) it takes to completely load the page, and become “visually complete”.

Visually complete is when the visual area of a page has finished loading. Optimizing visually complete timing is more valuable than optimizing other page load timings in terms of user experience as it reflects the amount of time that your real users spend waiting for above-the-fold content to load completely.

Video Comparison

The Image Speed Test provides a video that compares the current page load time (see the page load time acceleration section above) versus a page with ImageEngine’s optimized images.

If needed, you can download the video in mp4 format by pressing the three buttons in the lower right corner.

Individual Image Results

In addition to analyzing the page as a whole, the Image Speed Test also provides analysis of how optimization changes the individual images. These will vary on mobile and desktop because ImageEngine adapts the images to the requesting device’s capabilities. The individual images appear in order of the payload savings (KB).

Payload savings: This is the same metric as the image payload savings mentioned above, but for the individual image. Dimension changes: ImageEngine detects the requesting device, so it will reduce the image dimensions automatically to conform with the mobile device’s screen resolution width and height. File type change: When possible, ImageEngine will convert an image to the most efficient next-generation file format possible. This next-gen format is frequently WebP, JPEG 2000 (JP2), or AVIF. In some cases, the conversion to next-generation does not result in savings for a number of reasons. In that case, ImageEngine will automatically optimize and keep the image in its original format (e.g. PNG or JPEG), but still deliver excellent payload reduction. Visual Quality: ImageEngine keeps an eye on image quality even while dramatically reducing image payload. Much of the quality of the optimized image is dependent on the quality of the original image. ImagEngine recommends loading original images on the website as large and high quality as possible. With excellent quality originals, ImageEngine can optimize without impacting the perceptible quality on mobile devices.