Optimize images with ImageEngine

ImageEngine is an image CDN with built in, real time image optimization. What makes ImageEngine stand out from the crowd is the way ImageEngine analyse the request to dynamically provide a visually high quality image at the lowest possible byte size. Usually you don't need to worry about URL parameters with quirky syntax or JavaScript libraries, just refer to the image by its URL on the image CDN and ImageEngine will real time figure out the best ways to optimize the image.

Image Optimization with Emphasis on Mobile

TLDR; Instead of trying to cover all scenarios and possible combinations of sizes, formats and compression rates build time, let the image CDN handle it for you, run time.

The automatic optimization of images may result in up to 10-15 different versions, or derivatives, of the original image. How is this possible? ...and how is that possible to manage for the CDN?

It is not uncommon that the share of mobile traffic to a website is around 50% or even more. Because the plethora of mobile devices is so diverse when it comes to capabilities such as screen size, resolution, supported image formats and so on. Moreover, network conditions may require higher compression levels. ImageEngine use a combination of techniques to manage this diversity. Parameters in the URL are of course supported for explicit requests. For dynamic optimization, client hints are used - if supported - in combination with HTTP header analysis and powerful device detection is applied at the edges of the CDN to make sure proper cache keys for the derivative images are computed.

A little demo

Even if this simple glitch demo is simple, it illustrate the importance of image optimization to improve web performance. The demo has two html pages where the only difference is that one of them has images optimized by ImageEngine. Here is the visual result (page optimized by ImageEngine to the left):

Even in this demo page is small and lightweight, the Lighthouse report is clear on the missed opportunities to gain better performance:

Let's examine the steps required to optimize image delivery on this page.

1. Set up ImageEngine Account

First you need to sign up for a free ImageEngine trial account.

1. Provide the fully qualified domain name of the site you want to optimize. From this website image origins will be extracted (see step 3).
2. Create an ImageEngine account by providing your email and a password, or using Google or Github.
3. Select an origin where ImageEngine will fetch original images from. Select from the list or provide a different origin.
4. The ImageEngne account is created and ready to use. More documentation.

Your able to access images using the ImageEngine hostname. The ImageEngine hostname is the one ending with *.imgeng.in. For example. xxxyyy.cdn.imgeng.in or images.mydomain.com.imgeng.in depening on the tier.

If you've signed up for a higher tier, the ImageEngine hostname is also what you'll use when you configure your DNS record for the domain name you provided. So, if you wanted images.mydomain.com to serve the optimized images, you can create a CNAME record in your DNS for images.mydomain.com pointing it to images.mydomain.com.imgeng.in. When that change has propagated through the network, you'll be able to access the image from your origin by images.mydomain.com/img.png and images are optimized by ImageEngine.

More advanced settings and statistics are available in the control panel.

Many sites serve other assets such as CSS and Javascript from the same host as images are served. This will not cause any issues with ImageEngine. ImageEngine will also cache and serve non-image content.

2. Refer to images in the markup

Whether you use responsive images markup or the good ol' image tag, the approach is the same; change the url to your images. If your image tag looks like this <img src="//myorigin.com/img.png"> then change it to <img src="//images.mydomain.com/img.png"> following the example with our hostnames above. Alternatively you can also use the ImageEngine hostname directly: <img src="//xxxyyy.cdn.imgeng.in/img.png">

Usually, the results are over all better when ImageEngine get to decide how to optimize the image. That means no URL parameters or directives are required, just the plain image url:

<img src="//images.mydomain.com/img.png" alt="Image optimized with ImageEngine" width="100%" sizes="(min-width: 850px) 840px, calc(100vw - 10px)">     

Note the presence of the sizes attribute. When sizes is present, the browser is able to calculate the intended display size of the image before making the request to download it. This is the prerequisite for the browser to add client hints to the request. Client hints enable ImageEngine to be much more accurate when resizing and optimizing images.

In your responsive images markup, with or without client hints enabled, it may make sense to use ImageEngine url parameters to request specific sizes of an image:

<img src="//myimg.mydomain.com.imgeng.in/168703ff-6f54-4872-bfbe-0732fbe39d1d%2Fcamera.jpg" sizes="(min-width: 850px) 840px, calc(100vw - 10px)"
                srcset="//myimg.mydomain.com.imgeng.in/168703ff-6f54-4872-bfbe-0732fbe39d1d%2Fcamera.jpg?imgeng=/w_375 375w, 
                //myimg.mydomain.com.imgeng.in/168703ff-6f54-4872-bfbe-0732fbe39d1d%2Fcamera.jpg?imgeng=/w_768 768w" 
alt="ImageEngine with srcset">

Note that ImageEngine will still convert to the best image format whether it is webp, jpeg2000 or something else.

3. Run the Lighthouse test again

Running Lighthouse on the page with images optimized by ImageEngine, shows that the issues with the images are gone, and that performance has improved significantly.

The impact of ImageEngine is also clearly visible in tools such as webpagetest.org. Especially when it comes to payload reduction, and time and resources spent downloading and decoding images.

Why ImageEngine?

ImageEngine will reduce the payload generated by images on your site, without compromising the visual quality. Less data, faster site, better user experience, increase conversion rate.

Moreover, thanks to ImageEngine developers and designers will spend less time writing image markup, creating image derivatives, and optimizing images.

From a developers perspective there are also other advantages:

• ImageEngine is not an asset management system, but an Image CDN
• No dependencies on 3rd party JavaScript- or server side libraries
• No need to upload images anywhere
• Customize how images are optimized to fit your needs
• ImageEngine pays special attention to the mobile use case.