As retina displays become more popular, designers are challenged to find that balance between serving great looking images and images that load quickly. Before the iPhone 4 screens for the most part displayed images at 72 pixels per inch, but now displays range from 72 to 326 pixels per inch. So, why exactly does this matter to web designers?
We began building websites that are responsive and ignored the old rule that our image width should match the size it will be in final display. Setting the image to 100% for mobile and serving them the 600 pixel wide version at half that width worked pretty well and the overhead was not that bad (depending on how the number of images on the page). Enter large screen retina displays. Retina displays are now on iPads, MacBook Pros and will soon become more widely adopted. So what does that mean for me? Your website images in all likelihood look fuzzy on these displays and fixing this is not as simple as serving larger images. Increasing your 600×600 image to 1200×1200 sounds like the logical solution, but this actually quadruples the data for each image on your website. Doing this will greatly reduce the performance of your website on mobile devices.
Lucky for us there are lots of smart people working to fix this. The long term goal is the birth of a <picture> element being discussed by the Responsive Images Group at the W3C. In the meantime, others have developed some creative ways to fix this issue for the present. Most of these methods involve using a script or service to serve a different size of the image based on the screen size or bandwidth used by an end user’s device. Each solution has it’s own benefits and drawbacks and Chris Coyier at CSS tricks has a nice document that outlines these features nicely. His document was a little hard to view all at once, so I created a little chart to be a little more visually appealing.
From this chart I have found a few solutions that piqued my interest for one reason or another and below are a few of these.
Picturefill is a <picture> element polyfill and functions by mimicking how the proposed <picture> element will work.
Adaptive Images is CMS friendly and can work with old images on a site to deliver smaller images to your mobile users. This technique is PHP and requires a bit of server side setup in your .htaccess file.
This method also resizes a website’s images based on the screen size. Sencha also offers this as a third party solution for those not wanting to bother with server side setup, making the barrier to entry low.
HiSRC is a jQuery plugin that loads smaller images if mobile bandwidth usage is detected. This technique require no server side setup but will require adding data-1x and date-2x attributes to your img markup.
So, these are the responsive image solutions as it stands today. It will be interesting to watch and see which solutions take hold, but I leaning toward Adaptive Images for backward compatibility at the moment. What is your favorite and why?
A Monthly Roundup of Articles and a Sweet Deal
Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.
Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.
Today in Web Design - Resources