Picture Fill – Image resizing

This is a javascript library that makes life easier when trying to supply users with the correct size image.
Smart mobile devices have now become a common way for people to view websites instead of just the traditional computer.
This means that websites need to provide lower quality and sized images to these devices to reduce the loading time of the page and also not eat up all the users data allowance.

There has been lots of talk about possible solutions to this and the W3C have started putting together something to accommodate this.
http://www.w3.org/TR/2013/WD-html-picture-element-20130226/
But until the specs have been agreed by all and the browsers support these features then we have to look at other solutions.

Picture fill mimics the proposed method in the W3C doc but using span tags.
The library can be found on GitHub https://github.com/scottjehl/picturefill (Not built by me)

My example can be found at http://glynrob.com/examples/picturefill/

The code required to insert an image should be clear on which image will be provided to the user based on their viewport (size of the screen the user is on).
This also updates the image if the screen size changes (for example they change from landscape to portrait mode).
Only 1 image will be provided to the user at the correct dimensions making page load time quicker but still providing great quality images to those on PCs.
You also need to add the traditional img tag inside <noscript> tags for those that have javascript disabled.

You could also go one step further with the supported HD(Retina) replacement.
This is an additional option you add to your data-media tag with the pixel ratio to target.

So a great way to provide the right size images to your users (and there is even a wordpress plugin available).

Leave a Reply

Your email address will not be published. Required fields are marked *