[caption id="attachment_307" align="aligncenter" width="625"] A comparison of a Retina and non-Retina MacBook Pro[/caption]
The latest platform for competition in the technology sector is inarguably screen resolution. With Apple's Retina displays, Samsung's Super AMOLED screens, and 4k resolution screens making their way onto users’ desktops and mobile devices, it's clear that the future of the web is going to be in high definition.
If your website wasn’t designed with high resolution images in mind, your graphics will look blurry when viewed on screens with a high pixel density, which creates a poor experience for your site visitors.
Although this is something web designers will soon become acutely aware of, there will still be a long transition period before the majority of web users are viewing screens that can appreciate high pixel density images.
So, does it make sense to switch to only high resolution images on your site at this point in time?
No, and here’s why: high resolution images are roughly twice as big as standard images, and require twice as much bandwidth to load on a webpage. If you’re on a smartphone or tablet on a 3G network (as opposed to Wi-Fi or LTE), this will equate to a very slow page load time for the user and subsequently a higher bounce rate for your site.
If you’re only serving up a few images (e.g. company logo) as high-res, then it won’t have a substantial impact. But as soon as you start loading images like homepage banners, call-outs, and portfolio shots, the extra payload will have a huge impact on page load time.
This is the issue we ran into when re-developing Moveable Online's website, so we found a solution that allowed us to load images optimized for high pixel density screens, as well as standard resolution images – but without draining mobile users’ data plans.
How we’re doing it
When prepping our images we created high resolution versions in addition to standard resolution. Here’s an example of a few file types we were dealing with, and their respective sizes:
- Banner Images: High res: 2400 x 760 pixels (301kb); Standard res: 1200 x 380 pixels (127kb)
- Portfolio Images: High res: 854 x 720 pixels (342kb); Standard res: 427 x 360 pixels (54kb)
Moveable Online’s website was built on
Advantage CMS, which supports this type of image management. When someone visits the site, it determines the pixel density and pixel ratio of their device and serves up the appropriate image.
The future of high resolution images
We’re due for a new image format that has a smaller file size and also provides the user with a high resolution experience. Google is trying to accomplish this with the introduction of
WebP, an image format that can take
up to 25-34% less space than a comparable JPG. However, it’s
yet to be adopted as a native file format by browsers like Safari and IE, so it can’t yet be considered the new standard.
Until there is a new standard, we think the approach described above is the best way to go about ensuring your site looks good for all users, while loading quickly on even slow connections.
