Introduction

The Picturefill Image add-on is designed to serve different sized images to different devices. There are a number of advantages in doing this…

• Smaller images can be served to devices with smaller viewports. This can help improve the performance and responsiveness of your website as smaller devices, such as smartphones, may often be accessing your site using a smaller bandwidth (eg mobile network)
• The current technique of simply scaling down an image from desktop-size to smartphone-size, can result in the image losing a lot of it’s impact. With Picturefill, you can ensure the image maintains its impact, regardless of the device on which it is being viewed. You can even serve entirely different images on different devices if necessary. Take a look at the demo at http://therightangle.com.au/index.php/picturefill-images. The differences in the images displayed per device are subtle, but effective.

Usage

With Picturefill add-on, there are four separate images that need to be configured. You simply Choose the image you want to display on each device. The four device options are Desktop, Tablet, Smartphone to Tablet and Smartphone.

So, if you wanted to display similar versions of the same image, sized appropriately, you would need to first create four different versions of the same image, each with a different pixel width.

As a general rule of thumb for image sizes, you would make the width of each image somewhere equal to or below the maximum width for the device. So, for example, for the Smartphone image, the width of the image should be 480px or less. For the Tablet image, the image width should be 992px or less.

Also remember, the image you display for each device can be entirely different. The most important thing is to get the image size right.

Picturefill uses CSS3 Media Queries and javascript to determine which image to display. Some browsers do not support Media Queries. It is also possible that javascript may be disabled in a browser. In these situations, Picturefill will not be able to determine which image to display so it needs to know which image is the default or fallback image. Simply select the radio button next to the image you want to use as the fallback image.

Picturefill uses the following pixel ranges to determine when to display the relevant image...

Smartphone: 0px to 480px

Smartphone to Tablet: 480px to 768px

Tablet: 768px to 992px

Desktop: 992px and above

Note: If these ranges do not exactly suit your needs, they can be manually changed by modifying the view.php file shipped with this block - just look for the data-media attributes (eg data-media="(min-width: 480px)")