Missed the start of series? Click for Part 1
We all know that a good mobile strategy is important to reach and engage customers. Responsive web design (RWD) improves the design and layout for a better mobile experience. However, images also need a mobile strategy.
Images not optimised for mobile can drain a smartphone battery and slow down the download of a website consuming large quantities of memory and rendering times. All of these factors impact the perceived experience by a customer and ultimately can impact revenue. For example, our research has shown that online retailers can improve conversion rates by 10% or more by optimising images specifically for mobile.
A mobile image strategy should focus on utilising:
- New image formats such as WebP (Android/Chrome) and JPEG2000 (ios/Safari). This reduces data usage by ~30% compared to traditional JPEG. For example a 40KB image can be reduced down to 28KB.
- Chroma-Subsampling of 4:2:0 to reduce device memory usage by half and further reduce file sizes by 18%. For example a 1300x1024 image could require 4MB of RAM, regardless of the format. Converting to 4:2:0 can reduce the memory to 2MB. Remember over 25% of new android phones sold in 2015 had less than 512MB of RAM. Images that use less memory load faster.
- Responsive Images. Using one image for all types of users forces the mobile device to waste CPU and RAM to perform the resize. Not to mention that the extra pixels add to wasted network. Using Client Hints will allow your application to send the exact right size of image that will fit perfectly for the display.
Customers accessing websites and apps use a wide variety of screen sizes, browsers and OS versions and inevitably have all the usual constraints of CPU/Memory/Network. A good mobile image strategy targets each fragmentation differently to deliver the best customer experience for every image on any device.
Another issue that is very important is security, and it is everyone's responsibility. Any point in the development of a web page where images are transformed, converted or otherwise modified, can create unintentional security risks. The number of critical-vulnerabilities related to image editing has increased over the years. A tampered JPEG image could easily compromise your entire business. Image graffiti - adding advertising or dubious messaging to your images - is another potential security risk.
How could a contaminated image enter your website workflow?
* User generated images; compromised at source
* Vendor supplied product images; compromised at source
* In house photography; compromised by malware on the artist's laptop
A good image management strategy should be tightly coupled with a secure image strategy. Two major considerations when implementing a secure image strategy are:
- Secure delivery. Many public Wi-Fi hotspots and some mobile providers intentionally manipulate images to reduce bandwidth costs. Often this is innocuous, but it results in a quality of image that could tarnish your brand. This same technique can be used to graffiti images for your site. Using TLS (HTTPS) delivery ensures that user sees the image content as you intended
- Secure image transformation architecture. A secure architecture not only has a patch strategy but also has an architecture isolation strategy. As a baseline, any automation or toolset used in image transformation should contain at least 3 layers of isolation to ensure that a compromise is limited in scope:
- Communication layer (e.g.: TCP Connection pools for retrieving and storing)
- Transformation engine (e.g.: ImageMagick)
- Encoding and Decoding shared objects
The topic of secure image delivery is a very lengthy discussion but should be paramount in an image management strategy.