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.
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.
First you need to sign up for a free ImageEngine trial account.
- Provide the fully qualified domain name of the site you want to optimize. From this website image origins will be extracted (see step 3).
- Create an ImageEngine account by providing your email and a password, or using Google or Github.
- Select an origin where ImageEngine will fetch original images from. Select from the list or provide a different origin.
- 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.
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.
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:
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.
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.
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 need to upload images anywhere
- Customize how images are optimized to fit your needs
- ImageEngine pays special attention to the mobile use case.