Images are used to inspire, evoke emotion, and provide ways of communicating that simply cannot be done with words. It's no wonder that web pages with images get 94 percent more views than those without.
Images have become integral to how we experience the web, and the importance of delivering the right image at the right time to your users couldn't be more important. First impressions matter, and your users will see and experience images on a web page 60,000 times faster than text.
However, let's face it, until now, this has been a really difficult problem to solve. Choosing the right image for the right experience can often feel like advanced calculus. You start with one image, that image gets multiplied by three (for desktop, mobile, and tablet iterations). However, you can't forget your thumbnails or watermark versions so you multiply that again by at least two, and somehow your one image has easily become six...ten...or even more!
It's a real challenge to manage all of these images. This process creates overhead for your creative teams, it increases storage costs, and you still need the intelligence to serve the right image for that right experience. Unfortunately, more often than not, I see web sites that serve the same image for all of these experiences - be it, mobile, tablet, desktop and even thumbnail! Not only does this sacrifice performance, it really doesn't look good!
In this article, we're tackling the root of our image problem, the image workflow itself. With Akamai Image Manager, we've provided a way for you to define your image workflow right at the Akamai Edge.
Now you may have heard of Responsive Web Design (RWD). This article is all about Responsive Images. Similar in principal, the goal of Responsive Images is to tailor the image to the end-user experience. This often consists of modifying the source image format, scale/crop dimensions, and compression to fit the device. The below steps will help you get started with Akamai Image Manager and defining your responsive image workflow at the Akamai edge.
Step 1: Define your Image Manager context
Using Property Manager, you can pinpoint exactly how and where you want to implement your Image Manager image workflow. In the below example you can see we have targeted images within the gallery and thumbnail directories. While this example is fairly simple, you have the capability of including, as well as excluding particular folder paths, evaluating for query parameters, cookies, and much more.
Step 2: Set up your Image Manager policy
Sticking with our responsive image principals, we need to define the image widths we want the policy to support. Below we'll get started with 320, 640, 1024, 2048, and 5000 for our image width breakpoints. These image widths represent the viewport width of various devices ranging from mobile, tablet, desktop, and widescreen 4k or retina displays. You can add additional image widths as needed to help with specific devices that you may need to support. You can define up to 32 different widths in your policy so you'll have no shortage of opportunity to get it just right for your users. Once defined Image Manager will do all the work to intelligently serve the appropriate derivative image on demand.
Quality and Transformations
If you think defining your image breakpoints above seems easy, we'll now examine implementing quality/compression and image transformations to accelerate your development workflow even further.
For Image quality, the Quality Level option allows you to define a specific compression value between 1-100. This allows you to define a base compression value to be applied for all of your image renditions. Now, as we've discussed in the past, this approach really leaves a lot of performance on the table. With the need to now manage multiple image formats with Responsive Images, a JPEG set to a 70 compression really isn't the same as a WebP, or JPEG2000, or JPEG XR set to 70. To help reduce all the complexity, Image Manager, has a 'Perceptual Quality' feature. This clever algorithm uses a structural similarity index to compare the quality of two images. By focusing on several image attributes such as, brightness, contrast, and structure, the algorithm can apply the precise amount of compression for performance while still maintaining overall image quality.
The Transformations Menu allows you to focus on managing your image manipulations rather than worrying about squeezing another image rendition into your workflow.
I've provided below some common use cases of transformations we have available. Image Manager also allows for these transformations to be combined within your policy.
- Thumbnail images - resize, greyscale, watermark
- Gallery images - crop, hue/saturation/lightness
- Hero / background image - resize, crop, opacity
- Headline / banner image - background color, resize, crop
Step 3. Take it further, Image Manager Resource Hints
For most web sites, you can create an Image Manager workflow to solve for 99 percent of the use cases. However, you may have a section on your site which requires you to tune your images even further. This can often be due to specific device support required, or a section on a web site which deviates from your standard template or design. For this reason, we have Resource Hints. Resource Hints allow you to invoke specific Image Manager policies or behaviors to your images, allowing you to reach that final 1 percent. I've provided below examples of these Resource Hints that can be embedded into your page html directly. We'll examine these in depth in our next entry.
Image Manager Resource Hints
- <img src="images/sparkler.jpg?imwidth=400
- srcset attribute
- <img src="images/accessories.jpg?imwidth=400" srcset="images/accessories.jpg?imwidth=400 400w, images/accessories.jpg?imwidth=450 450w, images/accessories.jpg?imwidth=550 550w" sizes="(max-width: 480px) 400px, (max-width: 1024px) 450px, (min-width: 1025px) 550px"
Contact your Akamai Account Representative for more information on how to incorporate Image Manager on your web site.