How to optimise websites for the new iPad

The new iPad is bringing high resolution to the web

*Update 2 April 2011 – We have just updated this post with a few realisations:

  1. Resizing images in HTML works fine on the iPad but makes the image look worse in the browser. So our suggestion of just having smaller images always at twice the size has been removed – we now suggest to use the 2X JavaScript technique for every foreground image. 
  2. The previous post didn’t mention what to do with background images so we have updated it to include how to handle these.*

For as long as the web has been around, web designers have been optimising images for relatively low resolutions due to the limitations in monitors. With the release of the iPhone 4 in 2010 (with high resolution Retina display) it meant you could now view things in a much higher resolution. But while many apps may have been re-developed to suit the high resolution display, it didn’t really force web designers to change the way they build websites. This was because the screen is so small, the amount of pixels shown is only the same as a typical website anyway so by default the majority of websites looked great on them (i.e. website was shown half the size and therefore doubling the resolution was fine).

It was still assumed at this stage that higher resolution displays were some way off appearing in full size screen devices like tablets, laptops and monitors because of the engineering challenges associated with it.  However with the release of the new iPad, the challenge is here now. And luckily we have one and we can start getting our heads around how to respond.

HTML vs foreground images vs background images

First of all it’s important to understand that your site is made up of HTML (headings, text, some graphical elements like borders etc) and images (foreground and background). The HTML is not restricted by pixels so it automatically looks great on the new iPad. However the images have probably been optimised to 72DPI or similar so these images are going to look a bit blurry.

For example have a look at the website below.

HTML parts (headings, buttons, text) look great on the iPad, the images look a bit blurry

If you view the Web Control Room site on the new iPad you will notice all of the headings, buttons, images all look fantastic. But the images (screenshot top right, sources image on the left and image of the mobiles etc) all look a little bit blurry. Note the web has always generally been a bit blurry compared with print. Now that we have crisp HTML on pages with blurry images it becomes very noticeable. Note further that we will be upgrading this site so if you look at the site down the track it will all look nice and sharp.

So let’s make everything high resolution!

Unfortunately it’s not as simple as making everything high resolution because there are 2 downsides:

  1. High resolution images resized in HTML don’t seem to look any good on low res devices (normal monitors etc)
  2. A high resolution image might be 3 or 4 times the size of a low res image. Larger sizes mean increased time to load a website and increased bandwidth usage for the website owners and the visitor.

Here are 2 images that I have optimised at different resolutions.

This image is 280 pixels wide and is a typical web optimised image – it is 54 kilobytes in size

This image is 560 pixels wide (resized in HTM to 280) but as a result it is larger at 159 kilobytes

The 2 images above are going to look more or less the same on a normal monitor (the high res one on the right might even look slightly worse) however on the new iPad they look vastly different. The one on the right is so crisp it almost looks like a real iPhone sitting in front of you.

So what is the answer?

Foreground images

The best practices for managing this situation are likely to change but for now we will be working off what the site does and that is:

  • Load in the normal resolution image
  • Detect for the new iPad and if present load in a high resolution image to replace it.

This technique is explained in detail in this post by

For example if you look at the homepage you will see a main image of the new iPad (if you are reading this sometime after the release it won’t be there but I’m sure whatever image is there will be done the same way). If you view this image on a normal monitor you will see the standard resolution image however when you view it on the iPad you see the standard one first briefly and it is quickly replace by the high resolution one. It happens so quickly and seamlessly that you would have to look carefully to notice.

It’s quite simple to get this working, you just need your web developer to upload an image replacer script (see this post) and once it’s there every time you load in a new image you need to load in 2 versions and if you name it correctly the script will replace it on iPads. The convention used by Apple is as follows but speak to your web developer about the convention used if you implement this on your own site:

  • main_image.jpg
  • main_image_2x.jpg

Using any modern CMS (i.e. WordPress, Joomla! etc) you can quite easily upload the high resolution image (but don’t insert it into the page) and then upload and insert the standard resolution image. Note the images both have to be in the same folder and with a CMS like WordPress it may change the folder if you upload them at different times so make sure you upload both images at the same time (if you are replacing old images then re-upload the old ones).

Note we also noticed that if there were a lot of images on the page it took a long time for the script to check each image so we added a qualifier that the image had to be marked with a class of ‘highres’ in order to be considered by the script and provide an alternative. Most editors will enable you to assign a class to an image while uploading.

Background images

Background images are slightly different in that they are generally built into the theme of the website and not added by the owner. Here is how are are handling background images for now.

Media query – This is used to determine  determines if the pixel ratio is > 1.5 (which it is on the iPad adn pretty much nothing else yet). The media query would look like this:

“@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (min–moz-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {

@media all and (-webkit-min-device-pixel-ratio: 1.5),
all and (min–moz-device-pixel-ratio: 1.5), 
all and (-o-min-device-pixel-ratio: 1.5), 
all and (min-device-pixel-ratio: 1.5) {

CSS Background image – Then our element would look like this:

.someElement { background-image: url(hi-res-image.png);
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px; }

The background-size property should be half of the high resolution images dimensions. There is more information on that here.

Demo of image load technique

For anyone with a new iPad we’ve put together a sample below. If you view the image below on a normal monitor you will see an image that is standard resolution and if you view it on the new iPad it will be twice as crisp.

This image will show normal resolution on your monitor and high res on the new iPad

Some implications

One obvious implication is the file size issue. To me, it’s probably not a huge concern, my bet is anyone who has shelled out for a new iPad is going to be more than happy to put up with the longer download time to view the site in all of it’s glory. Webmasters may not be quite as keen if their bandwidth is limited but with faster internet coming bandwidth will get cheaper and cheaper, this will become less of an issue.

Another issue to consider is on high res devices like the iPad visitors at present will be downloading the image twice. I don’t personally think this is a huge concern I kind of like that the page loads in the same speed and then gets crisper once the larger image comes in. However we’ll monitor where the best practice goes on this and see if people start looking for ways to just load in the high res version.

The biggest issue I can see is a lot of website owners aren’t going to want to go to the trouble of uploading 2 images every time they add content to the site. Over time I think this will change but initially and particularly among small business owners I can see a lot of people not bothering with the extra steps.

One final thought to keep in mind is this is the first device of it’s kind to offer this resolution but you can be sure other devices will follow. There are already rumours that apple will be releasing retina display versions of it’s MacBook pro this year and of course other manufacturers will follow with high res phones, tablets, notebooks and monitors.

Personally after playing with the new iPad this week I can’t wait to see the web in high res across all of my screens.

Also in this post I haven’t addressed having a different version for the iPad, for this you might want to read up on WordPress responsive themes.

What do you think?

If you have any comments on this post please feel free to post them below.

Tags: , , , , , ,

About Alex

Alex Retzlaff is the owner of A Website Designer and Web Circle.

Follow us at:
Twitter @webcircle
Facebook /webcircle
Web Circle website

13 Responses to “How to optimise websites for the new iPad”

  1. Phil Brienesse March 20, 2012 at 5:23 am #

    I have to say I am not as thrilled about this as the media seems to be. I don’t find the current displays all that lacking and the increased bandwidth is a big deal. My main concern though is I develop CMS based websites and most of my clients have problems with basic image uploading and content management. Requiring them to upload a standard res and high res image is not a realistic option for most of them. Usually we go to great pains to bring down the 2mb 2000px image they upload to something more useable and I guess we will need to look at new server side processes to divide those images into two sets now.

    Only thing I am a little confused about (and how i ended up here on a google search) is what this new display will do to media queries. I have just moved over to doing full responsive design sites and I create break points that are loosely based on the devices but also just where the design stops looking good. With a resolution of double the pixels in the same space what will this mean for those break points? Any idea?

  2. Dan March 20, 2012 at 10:17 am #

    Hi Phil, thanks for the great comment. I will respond to the first of your comment and I’ll get my lead Ninja Steve to respond to the second part.

    First of all in relation to the screen, I think your feelings about this are exactly the same as most people feel when new technology comes out particularly revolutionary technology that you didn’t ask for. I felt the same way when the original iPhone came out, and the iPad. For the phone I had a smart phone already, I found the stylus ok, it has internet and mail and you could play MP3s on it. I couldn’t see the big deal that was until I got my hands on the iPhone. With the original iPad I couldn’t really see the use but out of curiosity I bought it anyway (before they even came out in Australia) and I wouldn’t want to live without it now. I feel the same way about the new one. I posted on a forum just last week that the screen wasn’t a big issue for me and I wouldn’t upgrade. But I did and I would certainly not go back.

    I think the situation is the same with the screen, you won’t know what you are missing until you see it. I was amazed when I got the first iPad my comment on this post from 2 years ago the day I got the iPad was “The screen is incredible” but when I look at this blog post on the new iPad the difference between the 2 phone images is staggering. I really think this is going to be transformational. Even something as simple as reading books or magazines on the new iPad is game changing the quality of what you can see and the crispness is up there with a glossy print magazine, much better than a typical book and that is saying a lot.

    I think Apple will start bringing out this retina display on the rest of their range (although it might be tricky on the Macbook Air which is what I use) and I will be upgrading all of my screens for sure – money permitting. It might take a few years but eventually others will do the same and people will start to expect high resolution images on websites.

    In relation to clients I know exactly what you mean because we are in the same position. It’s yet another hurdle but my view on it is this. Some clients want to go with the easy option (I agree that is a lot of clients particularly when your market is small business) and for now those clients won’t bother. Once it gets to the point of the majority of people having high res devices then all images will be handled in this way. Other clients want to make sure their brand is as strong as it can be and will take the time to support the device. Tech savvy people will do it because they will get used to the great images on their iPads and they won’t want to look inferior on their own device.

    I know for me, we are designing our main site at the moment and there’s no way it’s going to be low resolution. I want to make sure when people look at my site on the new iPad that is looks incredible.

  3. Steve March 20, 2012 at 11:17 am #

    Hi Phil,
    The retina display of the iPad 3 will work much the same as the iPhone 4 (and 4s). Both of those devices were capable of double the pixel resolution, much like the iPad 3. According to a few posts I’ve read around; both the iPad 3 and iPhone 4 heed the max pixel width declarations that you have been using for the previous models, so you shouldn’t have to worry too much with your responsive design practices.

    One cool thing you can do is target the pixel ratio in your media queries to only target high resolution devices by using;

    -webkit-min-device-pixel-ratio: 1.5
    min-device-pixel-ratio: 1.5

    This will target any high resolution device letting you fine tune your styles. You can add to that with pixel/device widths to further narrow down your CSS selectors.

    I will need to do some testing to see exactly how the iPad 3 plays with responsive design, but if the iPhone 4 is anything to go by it shouldn’t be a huge transition.

  4. Julie March 21, 2012 at 6:04 am #

    Thanks for this great advice, it’s easy to convert all the pictures to a bigger format with higher resolution, there are some nice applications to convert multiple files with one simple click.

  5. Dan March 21, 2012 at 1:31 pm #

    No worries thanks, I’m not really aware of any ways to stretch images without losing quality – more that you would start with a higher res version and then shrink down the lower res one. That’s assuming it’s a bitmapped image as opposed to a vector.

  6. Elena Anne March 26, 2012 at 4:36 am #

    That is definitely a different way to do that. I have never thought to do it that way, but it makes so much sense! This way the page way take long to load for people that won’t even notice the difference and the people that will notice will be so blown away that they won’t care to wait. I am writing this on a macbook pro and I would very much like to see this screen be a the retinal display so I could be blown away on a regular basis.

  7. Dan March 26, 2012 at 9:20 am #

    Thanks for the comment. Yes unfortunatly we just bought out laptops do won’t be upgrading for a while but the display would be a very nice upgrade if they bring that out.

  8. Dione March 27, 2012 at 2:16 am #

    Hi, I am not as experienced with web design experience as I am with print design, so every time a client asks for something new for web I end up having to research the best way to do things or how to trouble shoot an issue. I recently discovered that a site I created doesn’t show any images or flash on an iPad. I have now learned that Flash isn’t supported so that explains my slideshows not working. But the other images are not loading either. I thought I learned that with the memory limitations on an iPad the images would sometimes not load either. After reading this article (which I loved) I have questions about that memory issue. If the iPad is for high resolution and therefore would be needing to load bigger image files, why would the memory be lower than an iPhone? (that is what I read somewhere) I’d like to build my websites the way you describe here, but am concerned about the memory on the iPad. Or perhaps there is another reason the images are not loading. Do the first versions of the iPad have less memory than newer ones? That might be the problem with this particular site I thinking of…

  9. Dan March 27, 2012 at 11:22 am #

    It wouldn’t be related to memory. Developing for web is very complex, sites need to be tested in a lot of places in different browsers and devices etc. There are a few general rules like stay away from flash and make sure you develop with open standards (clean HTML / CSS / JavaScript) and make sure images are optimised and video files are compatible but things just need to be tested a lot before you go live.

  10. Bryan Wong April 20, 2012 at 11:29 pm #

    It doesn’t come with great functionality when Iphone is first launched but their sales went rocket high.

    What makes them attractive is not functionality, but the style of owning it. They did a fabulous job in educating the public a different perspective of owning their brand more than the features that holds the beauty of technology.

    In contrast, Android did a marvelous job in showing what is a better technology by connecting every piece of information through cloud network.

  11. Dan April 24, 2012 at 1:18 pm #

    I’m guessing you haven’t used an iPhone? :)

  12. Bryan Wong April 25, 2012 at 12:30 am #

    You’re half right, Andriod was my first smartphone. Well, there is a lot of controversial topics in comparing these two ecosystems. =)

    Anyway, this is a great post! Keep doing! =D

  13. john@ipadnews October 22, 2012 at 10:10 pm #

    There is no better or worthier smartphone, talking about apple and google ones, they are just DIFFERENT, that’s all

Leave a Reply