Image optimization is broken, that's why we built Piio

I've been working on web technologies for the last 15 years and I've been a witness of the evolution of every part of the web stack. Back in the day, we needed to create different JS code for every browser, don't get me starting with the <table> or CSS styles. Now every JS framework solves that for you, same thing happened with emails thanks to MailChimp for campaigns, Mandrill or Mailgun for transactional emails. I don't even need to mention how Stripe changed the payments system landscape.

BUT! What happens with Image Optimization and Content Delivery? We all know the nuances of having to upload, store, resize and deliver every image. Also configure a CDN if you plan to use one, set up the right headers for each response, and so on... so let's run through every aspect we need to consider, why Image Optimization is important and why you don't need to solve all these problems by yourself.

Why Image Optimization is important?

The purpose of compressing images and deliver them faster to your users is not only to feel better about it or show your geek friends how fast your site is, it's about how it affects your metrics and your users behavior. The first thing that everyone considers is speed, and how improving your image load times will improve your overall speed (this won't happen if you have crappy CSS styles or you're using heavy and poorly optimized JS libraries), reducing overall page load time will increase your conversions, up to 19% in average, it could be more. Speed is not strongly related to bounce rate, but loading time for your images is, the first 3 seconds are crucial to determine if a user will abandon the page or not so the first impression matters.

The other side is quality, so here you need to balance image size vs quality, how crucial is the quality of your images and how crucial it is to reduce 100 ms more to the page speed. There are no formal studies about image quality and user behavior (at least I haven't found any), but it's based on common sense and the most important thing that will affect your sales based on the quality of your images is competition, it's common sense that your competitor will convert more people than you if they have better quality images.

If you’re selling Jewels, Clothes, Food, Cars, anything! Image quality is extremely important to evaluate a product, it's a big part of the decision-making process and high-quality images can help your users take better decisions and be happier about the process. So maybe is also related to how faithful the image is to the product and how do you manage to set up the expectations for it.

We should not forget about image context, but, we'll leave that part for another article for now.

Manual setup

Now that we know it's important to have good images and also speed matters, let's see what we need to do in order to achieve this for your website.

I've been using my own set of scripts and open source libraries every time I wanted to do image optimization, and from time to time I wondered why there was no tool to help developers and designers with this. So now you might be thinking about some companies that do Image Optimization and Content Delivery, but you've to specify parameter by parameter, define the size, maintain the code, read their complex documentation and yes... migrate all the images you've to the new service, go to your database change the structure, and probably waste 2 to 3 weeks on the integration.

So let's go step by step through the problems of Image Optimization today.

Upload and Storage

We've two types of images being uploaded to our servers, static assets and user-generated images. While the assets can be optimized by a script, you can set up a library to run each time you commit to your git repository or run it manually whenever you want, this will optimize those images only for one specific case (the assets), not for multiple devices and it won't generate different formats for the images so you can serve a specific format for each browser.

When it comes to user-generated images, there you'll need to have in place a script that after the upload, it'll generate different sizes for the image and store them somewhere, and run the same optimization algorithm that you used for your assets. Plus you'll need to save this in your database to relate the file path of the generated images and the original one, or you'll have a naming standard, so you can serve the image of the size you want depending on the case, if it's a thumbnail, a product image or a profile image.

Delivery

Using a CDN is probably the best thing you can do, serving the images directly from your server will increase your costs and the latency and download times will be higher. With a CDN in place, the images will be served from the nearest location and you don't have to worry about scaling at all. The downside? You need to handle DNS records, some of them have an easier setup but others don't, still, you need to know what you're doing in terms of Cache and expiration times. Benchmark the cache misses vs the cache hits and adapt your configuration to that.

Display

How are you going to present the images to the users, this is more a design thing than a technical one, but for your uploaded content you do need to have the different sizes of the images created programmatically and stored somewhere. You'll need to specify on the CSS styles the size you want for that image, so for a standard e-commerce website you'll probably have product thumbnails (200x200 pixels), product page image (800x800) pixels.

So, we talked about every important aspect of image optimization and delivery, and what needs to be done in order to provide a good experience for our users. So let's go to the part when everything ends like a Disney movie and everybody lives happily ever after.

Fixing it

Our native JS library focuses on understanding what's going on in your HTML and how the browser desktop or mobile will render the image. As soon as the DOM is processed, Piio's library starts processing it and it'll automatically replace all the images in your HTML for a call to Piio's API. This API call will return the image with the perfect size based on your CSS rules for the image container, the best format based on the browser needs (eg: WebP for Chrome) and it'll deliver them through an extremely reliable CDN like CloudFront.

It's extremely easy to integrate, so you don't need to have a special tag in place for the images and you don't need to change how you're storing your images.

We say the images are pixel perfect because we understand the width and height that the image will be rendered on the browser based on the HTML and your CSS styles. That means that one pixel of the image relates to one pixel on the device display and that results in very sharp and high-quality images.

How to integrate Piio?

You only need to change your image tags so they'll look like this:

<img data-piio="/images/myimage.png" />

And add the Piio's script at the beginning or end of the body:

<script type="application/javascript"> var piioData = { appKey: '{{ api key }}', encodeSrc: false, domain: '{{ your domain }}' } </script>
<script src="https://js.piio.co/key123/piio.min.js"></script>

It also works for background images and it'll inherit any properties you've set through your CSS, you can find more information in our documentation.

So if you're good with the Find & Replace feature of your text editor, you'll probably be able to integrate Piio in your whole project in less than an hour. We also have a backdoor configuration if you've your images stored locally in your dev environment and Piio will just bypass the call to our API and show the images from your local storage.

Piio works great with React, AngularJS or Vue where your page load times are only sensitive to your API response time and image load times. The benefits are the same from any other structure you may have but take into account that if you're refreshing the whole page each time you'll need to have a more specific benchmark to see how your image load times have been improved.

Join Our Public Beta

We're now on a Public Beta, you can register at our homepage and we'll activate your account as soon as we can, just have us some patience :) I invite you to try our Domain Analysis Tool to check how Piio can increase your site speed and reduce your image size, try the Image Speed Test, or send me an email to nico@piio.co if you've any feedback.

FREE IMAGE ANALYSIS Try our Image Analysis TooI on your website and learn how much you can improve performance on mobile & desktop with Piio. Try Now Here