Image Optimization

Introduction

Image optimization service was implemented through a commercial partnership with ScientiaMobile and nuu:bit. The ScientiaMobile product is ImageEngine. ImageEngine uses WURFL, which is the industry standard for device detection. The WURFL Device Description Repository provides incredible accuracy as it was developed over 15 years containing over 45,000 device profiles. The ImageEngine implementation is currently native to the nuu:bit platform.  Each of the nuu:bit edge servers makes use of a custom Varnish module (written in C) and a set of VCLs rules to process the User Agent and deliver the best image for a given device/browser.   Having such a low level integration with the nuu:bit edge means short Time to First Byte when making the delivery decision.  

With the current implementation, the actual image processing is centralized.  When a new device/browser makes a request for an image the first time, the edge nuu:bit’s logic sends a 307 redirect to the image processing engine. The first request will take a performance hit, much like a cache miss, but on a per device/browser basis.  Any subsequent requests for that image from that device type will be fetched from cache as the edge ImageEngine logic will know that the image has been processed and available.
Running at scale, we see on average 20 different image variations (some devices/browsers will share the same optimizations), therefore it does not take long for the optimization to impact a given web property.

 

How does it work?

ImageEngine combines explicit settings, Client Hints, and WURFL data to make sure that the image is as optimized as it can be for any device or browser.

This makes ImageEngine the ideal choice for automating your implementation of responsive images.

In order to begin using ImageEngine, you will need to fetch your "subdomain" token received during the registration process and prefix all your images your ImageEngine URL.  The ImageEngine is setup in the nuu:bit portal.  For purposes of this document, we will be using imgeng.example.com as the example ImageEngine URL. 

If you have an "img" tag like this:

  <img src="https://example.com/img/car.jpeg">

You will then need to prepend the URL with your unique token:

  <img src="https://imgeng.example.com/http://example.com/img/car.jpeg"> 

The example above demonstrates the fully automatic optimization, meaning that the size and format is determined by either WURFL or Client Hints.

Parameters

Below is a list of parameters that will explicitly instruct ImageEngine on how to treat the image.

ImageEngine takes commands from the URL preceding the original image URL so in the example below, w_320 will set the width of the image to 320px. See the below diagram:

<img src="https://imgeng.example.com/w_320/h_200/http://jelly.com/bread.png">
Section Values Function
ImageEngine URL URL This is the URL of the ImageEngine service.
Image Manipulation Parameters1 parameter_value pairs2 These settings instruct ImageEngine what transformations are expected.
Image URL URL This is the image that is to be displayed. The image itself does not need to be on the client site.

 

1 See the respective product sections for a complete parameter list.
2 Some parameters may have multiple values and have the form setting_value_value1_value2

 

Available Parameters

The ImageEngine take a specific format.  ImageEngine also can take commands from the URL preceding the original image URL, so in the example below, w_320 will set the width of the image to 320px. See the below diagram:

 

Parameter Name Value Description Example
w Width Integer Desired width of resized picture. 1 3 /w_200/
h Height Integer Desired height of resized picture. 1 3 /h_200/
pc Percentage of screen 1-100 (float) This field will use WURFL to calculate the screen width and then scale the image accordingly. /pc_50/
m Fit method stretch, box, letterbox, cropbox 2 This setting determines how the engine will resize the images. This can include stretching, cropping, and/or padding out the canvas. /m_box/
f Format jpg, gif, png, bmp, webp Desired format of picture. If no format is provided, the format of the original picture is used. /f_webp/
cr  Crop Integer Crop by coordinates /cr_10,10,100,100/
in  Inline Boolean Return the image as a base64 encoded string for use in data urls /in_true/

 

1 If a fit method is not specified and only width or height is specified it will select "box". If both width and height are specified by fit is not explicitly specified, then it will assume the fit method is "stretch".
2 Fit method has additional optional parameters.
3 If defined, this will take precedence over any automatic setting.
 
 

Image Formats

The formatting parameter allows images to be converted between formats.

Supported Formats

The following formats are accepted by ImageEngine for both input and output.

  • PNG 1
  • GIF 2
  • JPG 3
  • BMP
  • WEBP
1 Both 8-bit and 24-bit PNG files are supported including both index and alpha transparency.
2 Not all features of ImageEngine are available for animated GIF files.
3 JPEG can also be used as an alias of JPG.

 

Input ColorSpaces Supported

Image Format Greyscale Indexed Color RGB CMYK
JPG Y N/A Y 3 Y 3
GIF Y 2 Y N/A N/A
8-Bit PNG Y Y 1 N/A N/A
24-Bit PNG Y N/A Y 3 N/A
BMP Y N/A Y N/A

Output ColorSpaces Supported

Image Format Greyscale Indexed Color RGB CMYK
JPG Y N/A Y 3 Y 3
GIF Y 2 Y N/A N/A
8-Bit PNG Y 2 N/A N/A 1 N/A
24-Bit PNG Y N/A Y 3 N/A
BMP Y N/A Y N/A

 

1 8-bit PNG's are converted to 24-bit by most operations. This will not result in quality loss.
2 8-bit images can be treated like indexed color images for ImageEngine operations. Greyscale images in this case will behave identically to 8-bit indexed color images where the colors available are all greys.
3 Both 8-bit and 16-bit per channel depths are supported

 

Examples:

Fully Automatic

  https://imgeng.example.com/http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG



All Images are 300px Wide
  https://imgeng.example.com/w_300/http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG

 

Create 200x200px Thumbnails with Black Letterboxes / Pillarboxes

  https://imgeng.example.com/w_200/h_200/m_letterbox_000000_100/http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk