Image Optimiser
51Degrees Image Optimiser is a simple and straightforward way of resizing images. Resized images are cached on the server and if an image of the requested size exists it will be retrieved from cache, preventing further, unnecessary resizing.
The image optimiser has two modes of operation:
- Manual mode where the developer chooses the size the image should be. Image size is hard coded into the image URL.
- Automatic mode where a JavaScript snippet is sent as part of the response. Javascript will then determine the best size for an image and automatically request it.
Using Image Optimiser
When enabled in the 51Degrees.com.config file the web server will be prevented from providing JPG and PNG images to mobile devices that are larger than the screen size of the device. This functionality will operate without any further configuration and is supported in all versions of the data set including the free Lite version. Web sites using background images, or other large images will benefit immediately from this improvement.
<img src = ”/Landscape.jpg?w=300” />
JPG and PNG images will support the width and height query string parameters. When provided the server will respond with an image of the appropriate width and height. Where only one parameter is provided the aspect ratio is retained. For example: to request a version of the image Landscape.jpg which is 300 pixels wide the following HTML could be used.
Alternatively CSS to use the same image source as a background image 420 pixels width could be.
background-image:url(‘Landscape.jpg?w=420');
This feature works in all versions of the API and data set including the free Lite version. When combined with media queries it provides a simple method for designers to optimise image performance.
Automatic Image Optimisation
The width and height parameters can be replaced with the word “auto” when used with the img HTML attribute. In these situations 51Degrees will calculate the size of the container and return an image optimised for the container. For example: if the container is specified as a percentage width of the screen the size in pixels of the container will be calculated when the page is rendered by the browser and the image fetched by the HTML img element altered to fit precisely.
The following example shows the implementation:
<img src = "/Landscape.jpg?w=auto" style = " width : 100 %; " />
This design approach is easy to implement and works well with existing HTML editors and CMS. However closer inspection of the resources loaded will highlight an inefficiency which high performance web sites will want to avoid. Every unique image on the page will result in two requests to the web server. First when the image is loaded by the browser and a 1x1 pixel image is returned to fill the space whilst the container size is calculated and the second when the final image size has been calculated. Whilst both images are cached a slight performance penalty is incurred. This drawback can be overcome using the slightly more complex data-src attribute.
The following example sets the img elements src attribute to Empty.gif. Where more than 1 element on the page use image optimisation using a single "empty" image, or 1x1 pixel gif will result in fewer requests to the server. The actual source of the image is specified in the data-src attribute. All other parts of the img element remain unaltered.
<img src = "/Empty.gif" data-src = "/Landscape.jpg?w=auto" style = " width : 100 %; " />
The automatic image optimiser solution requires the client supports javascript. In situations where this can't be guaranteed checking the "Javascript" property of the device before using the functionality is desirable. The following ASP.NET and C# code example checked that both the JavascriptImageOptimsier snippet is present for the device and that the browser supports javascript before using the functionality:
<% if (Request.Browser["JavascriptImageOptimiser"] != null &&
Request.Browser.JavaScript)
{ %>
<img src="/Empty.gif" data-src="/Landscape.jpg?w=auto" style="width:100%;"/>
<% }
else
{ %>
<img src="/Landscape.jpg" style="w:100%;"/>
<% } %>
ASP Developers
When used with ASP the previous examples work unaltered. The necessary javascript includes are inserted automatically into the page
MVC
The necessary javascript includes and script need to be added into the page by the developer. The following needs to be added to the HTML page:
In the header:
<script src = "/51Degrees.core.js" type = "text/javascript" ></script>
After the last image to be optimised:
<script type = "text/javascript" > //<![CDATA[ new FODIO (); //]]> </script>
Troubleshooting
If you experience the following error in your browser: 404 Not Found - http://yoursite.com/51Degrees.core.js you will need to add one of the following to Web.config :
For IIS 6.0
<system.web>
<!-- IIS 6.0 & Visual Studio - Registers a module that is used to detect any new requests to the web site.
Without this module mobile detection and redirection won't work.-->
<httpModules>
<add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
</httpModules>
</system.web>
For IIS 7.0
<system.webServer>
<!-- IIS 7.X - Registers a module that is used to detect any new requests to the web site.
Without this module mobile detection and redirection won't work.-->
<modules>
<remove name="Detector"/>
<add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
</modules>
</system.webServer>