WURFL.io

Optimize with ImageEngine

Register Now!


ImageEngine is an automatic image optimizer built on WURFL device detection. WURFL will detect the device capabilities, including screen size and image format support, resize and optimize the image accordingly. That's why we call it the ImageEngine.


ImageEngine is not only for mobile as it also supports the emerging Client Hint standard, making it the perfect companion for Responsive Images.


Image weight is by far the most important challenge to address to optimize a web page for the plethora of devices on the web today. This is why ImageEngine will instantly give your users a better experience by reducing page load time. Not to mention the reduced data cost.


ImageEngine works as a CDN and can be referenced by the unique hostname you get assigned, or by pointing your DNS to that hostname.


A 30 day trial of ImageEngine is available at no charge. Just sign-up and start testing.

To use ImageEngine you need to register an account. When you have signed up, you get a unique hostname. This hostname is used to identify you account and is the first part of the host name:{token}.imgeng.in


Even if you can point your DNS to your ImageEngine host directly, the easiest way to test ImageEngine is to simply prefix your image URL with the ImageEngine hostname you got assigned. In the below example, the size of the image will be equal to the detected screen size of the requesting device.


<img src="//{token}.imgeng.in/https://web.wurfl.io/assets/sunsetbeach.jpg">

However you may also pass a set of parameters to the ImageEngine service as seen below. The below example would return an image sized to 50% of the screen width. A full list of parameters can be found here.


<img src="//{token}.imgeng.in/pc_50/https://wurfl.io/assets/sunsetbeach.jpg">

ImageEngine supports the emerging standard Client Hints. To enable this feature, include the below meta tag in your head element:


<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">


See what ImageEngine can do for your site!


HTTP/2

Enjoy full HTTP/2 support out of the box. ImageEngine will automatically serve your images over HTTP/2 when TLS is enabled. I.e. if you reference your images using https://. HTTP/2 has significant impact on speed and lead-time of your images.

Client Hints

ImageEngine has full support for Client Hints. Client Hints enables ImageEngine to be extremely accurate in determining optimal size and format for images. Even for responsive designs with completely fluid images. Think of it as server side responsive images.

WebP

WebP is one of the most efficient image formats on the web, yet not widely used. ImageEngine will convert any format to WebP for browsers supporting this format. This will save your end users for additional bytes to download.

Device Detection with WURFL.js


WURFL.js is a JavaScript file that provides information about the device that is accessing your page. Whether it is a desktop browser, a tablet, a mobile phone, a smart TV, game console or someone with his wristwatch.


Those familiar with WURFL will recognize the venerable Server-Side Device Detection solution, but, at the same time, they will be pleased to discover that there is no need to mess with PHP, Java or .NET code this time. All you need to do is add the following script to your page:


<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

You can use this information to fine-tune the user experience with Javascript. In fact, this very page is using WURFL.js and the UX is being optimized depending on what web enabled device you are using to visit it.


  1. Desktop devices see a video background on the top of the page
  2. Mobile devices see a background image.
  3. Navigation is optimized to your device's form factor.
  4. Google Analytics is collecting information about the device through custom variables.

Once WURFL.js has been included, you can use the returned object to check if it is a mobile device like this:


if (WURFL.is_mobile === true && WURFL.form_factor === "Smartphone") {
    // targetSmartPhoneDevices();
}

For example, your current device looks like:

{
    "is_mobile": <% WURFL.is_mobile %>,
    "complete_device_name": <% WURFL.complete_device_name %>,
    "form_factor": <% WURFL.form_factor %>
}

In development, you may pass debug=true to the query string to disable any caching.


Below are the capabilities available:


complete_device_name
The name the device is known by. Typically make and model, a "group" of devices, or a more generic definition.
form_factor
May return any of these values: Desktop, App, Tablet, Smartphone, Feature Phone, Smart-TV, Robot, Other non-Mobile, Other Mobile.
is_mobile
Returns true if the device is a tablet, or other mobile device, otherwise false

Need a Commercial License?

WURFL.js Business Edition offers a commercial license that also includes:

  • • More capabilities
  • • Custom domains and SSL certificates
  • • SLA
  • • Priority support
  • • And more...

Learn more about WURFL.js Business Edition

Advertising

If you monetize your site or blog though advertising, you may be relying on multiple ad networks. Some networks are better at targeting mobile traffic, while others do a better job with regular desktop web traffic. WURFL.js helps you decide which one is better for each user. This may increase your CTR.

Personalization

Based on information WURFL.js provides, such as a device make and model, form factor and whether it is mobile or not, you can create a personalized experience for your users. You can even use it to increase speed and performance for your mobile users, just as we did on this demo page.

Analytics

Designing a great user experience starts with knowing your users. WURFL.js provide information that is not available elsewhere. This information can be put into analytics tools such as Google Analytics and be the basis for custom reports that are more accurate than the standard ones.