Chrome has several built in analyze any web page. Today we’ll look at the how images are loaded using the Image feature.
- Open Google Chrome Console (F12)
- Go to Network tab
- Enable Filter, if it’s not enabled
- Select the “Img” tag to filter for image requests
- Refresh the page to see a list of all images as they are requested
This is the result when Webien Image Optimizer is turned off.
Take notice to three things
- the total file size
- the image file types
- the number of files requested
Webien Image Optimizer activated
Now, compare the results when Webien Image optimizer is turned on:
See how the file size has drastically dropped from 2,8 Mb to under 0,7Mb, and the Finish has dropped from 19 second to 1 second?
Lazy load
When we scroll down after Webien Image Optimizer has been activated we can also see the images are beeing loaded as they get closer to what is visible in your viewport.
When we scroll down after Webien Image Optimizer has been activated we can also see the images are beeing loaded as they get closer to what is visible in your viewport.