Review: Piio Image Optimizer & WordPress Plugin

How does image optimization help my website?

Piio is a Javascript Library that can be included in your website to optimize images in the following ways:

1. Converting images to WebP
2. Using Lazy Load to serve only images that are in the users view port, thus decreasing server load.
3. Using a CDN to serve images from to alleviate the traffic to yours.

The benefits of WebP

First off, WebP is an image format specifically designed for the internet.

It’s usually 26% smaller than its PNG counterpart and provides lossless/lossy compression.

WebP is supported by Google Chrome and Opera.

Noting that the vast majority of users on the internet use Chrome as their default browser, this can lead to a tremendous decrease in load time for your users.

Lazy loading is a method by which images are served only when they’re scrolled into the users viewport.

For instance, if a user visits a page with 10 images on it, only the ones that are at the top of the page will be loaded initially, followed by the ones further down when the user scrolls them into view. this way resources can be loaded more quickly by focusing on only what’s needed currently.

This in combination with WebP means that your images will be much less of a burden when the browser is trying to get to the ‘DOMContentLoaded’ event (The point at which the page is displayed).

Image optimization + CDN

A CDN (Content Delivery Network) is a remote server that can host your images so that some of the traffic to your server is alleviated.

If you imagine your browser as a destination that traffic is attempting to arrive at where the traffic is various things like HTML, CSS, Javscript, and Images, you could assume that traffic would arrive more slowly if there were only one road leading to it that all of the resources had to take.

With two servers, it’s more like a new road or pathway that other resources can take to arrive at the destination, thus decreasing slow down.

Piio is a paid service and comes with a free 14 day free trial but it’s well worth it.

Their exists different methods of installation for the type of app you’re using. Piio supports Angular, Vue, React, and Standard HTML websites.

It also has a WordPress Plugin that does the work of replacing/inserting the Piio attributes. Let’s take a look at a web page being loaded without and with Piio’s Lazy Load.

Looking at the image above, there are a few things to take note of. First, the blue line.

This is the “DOMContentLoaded” flag which signals to the browser to begin rendering the HTML/CSS, this is the point at which the user can actually see the page.

You’ll see that images have to be loaded before this takes place. Here’s the same page load but this time with Lazy Load.

You’ll see that the “DOMContentLoaded” flag occurs after the initial image in the viewport has loaded, this can decrease page load time by about 50%.

Keep in mind that Page load time is a highly determining factor in decreasing bounce rate (the odds of a user leaving your website because it takes too long to load).

You’ll also notice that for a lot of the images, the domain from which they’re being loaded is different from the website’s domain.

This is the CDN which is helping to alleviate traffic from the server.

Final thoughts on Piio

There are plenty of image optimization tools out there.

A popular option for WordPress users is Jetpack’s image optimizer.

If Jetpack doesn’t fit your needs, Piio also has a WordPress plugin that makes it super easy to implement into your website.

For more information on Piio, visit their website. Be sure to check out our other web development articles.