Ready or Not, Here Comes HD Web Design

by on 22nd March 2012 with 59 Comments


Apple is pushing the tech industry forward by increasing the pixel density on iPhone and iPad screens. This is great from a user’s perspective, but as a web designer or developer it literally threatens to completely change the way you build websites.

Are you ready for HD web design? Do you know how your sites will look on a new generation of high resolution screens? What steps can you take to prepare yourself and what skills will you need to stay relevant in the years to come? Read on to find out.

When Apple Speaks, We Listen

I’ve been using Macs faithfully since the OS 9 days, not as long as some old timers but plenty long enough to drink the Kool-aid and become fully addicted to all things Apple.

I remember when seeing an Apple logo meant that the product was something of a niche, an outlier that only the stubborn individuals of society used in an overt attempt to go against main stream, Windows-loving culture.

“If you pick a house at random, odds are you’ll find at least one iPod, iPhone and/or iPad inside.”

Through an impressive transformation built on dedication to creating innovative next-gen products, the little underdog company has now become the most valuable corporation on the planet. There may not be a Mac on every desktop in America, but if you pick a house at random, odds are you’ll find at least one iPod, iPhone and/or iPad inside.

I’m not waxing eloquently in order to convert you to my cult, I simply want to establish that Apple is a mover and shaker in the tech industry. No one cared what new features the Newton came out with, but when Apple releases a new iOS device, the world stops and patiently listens to what the wizards at Infinite Loop are telling us the future will look like.

Apple Bets on High-Res


Until recently, Apple had nothing to do with our fascination with better screen resolution. Bigger and better HD televisions have been the focus of consumers and electronics companies for a decade. Clever marketing teamed up with impressive technology to create an insatiable thirst for high-def screens, cable programming and movies.

For the most part though, this trend has stayed away from computing. Sure, there are huge, gorgeous cinema displays but the pixel density was never such that it required a major paradigm shift. That is, until recently.

When the iPhone 4 dropped in mid 2010 it came with a surprise: the “Retina” screen, which blew us away by doubling the old resolution with an astounding 326 pixels per inch (for comparison, a 27″ iMac is 109ppi). This was a game changer. There was plenty of speculation that scaling this technology at an affordable rate would be nearly impossible, but Apple has done that very thing by also doubling the resolution on the third generation iPad, which comes in at a slightly lower but still gorgeous 264ppi.

Why This Completely Changes How You Do Your Job

So what? Thanks for the history lesson, but this is a design blog, right? Who cares about the pixel density of an iPad? As a web designer, you do, whether you know it yet or not.

The problem is evident right here on this site as well as any other that you’ll visit today. Go ahead, grab an image from the web and open it in Photoshop. Now bring up the Image Size dialog. See anything interesting?


Web designers have always had a nice little advantage over print designers: we can use low resolution artwork. Why is it an advantage and not a disadvantage? Because high-res layered PSDs can slow your machine to a crawl, high-res stock photos cost far more money, high-res images take forever to load over the web; the list goes on and on.

The problem is clear though, that image above comes in at a mere 72ppi while the new iPad is 264ppi! (This is oversimplifying the argument a bit, read this article for more information on whether or not you’re actually viewing images at 72ppi.)

Think about what that means. Apple has retina displays on the full iOS line: iPod Touch, iPhone and iPad. This means that millions of people are browsing the web every day on high resolution screens that won’t properly display your images. Make no mistake, this trend will only get worse as other device manufacturers play catch up and Apple explores ways to bring more pixel density to the next obvious place: the laptop market.

What Can You Do?

The pixel density problem is an interesting one. The web represents so many different technologies coming together in harmony that it can be chaotic if one of these technologies runs ahead and upsets the balance.

We’re witnessing the emergence of higher resolution screens, but our content is only optimized for the old screens. Further, think about how crazy web developers are about page load times with low-res images, now imagine how much of a slow down you’d get on an image heavy site like Pinterest if it were suddenly filled with 326ppi images!

Pure HTML & CSS Web Elements

The good news is that we’ve been preparing for this in some ways for years and we didn’t even know it. The rise of CSS3 and HTML5 have really pushed forward the notion of cutting down on the number of images that we use in our markup.

These days most UI elements are rendered in the browser, which means they scale up just fine on any screen that you throw at them.

To illustrate, here’s what it looks like when I zoom in on an image-based download button on my iPhone 4.


Now, if I look at that same button built at the exact same pixel dimensions but rendered using CSS, I can zoom in as far as I want with zero image degradation.


It’s a beautiful thing is it not? The moral here is that the “imageless” trend has paid off in the long run and provided us with much less to worry about than we would’ve had retina screens hit back when we used images for gradients, shadows, rounded corners and pretty much any other advanced styling.

It’s important to note that objects rendered with HTML5 canvas and JavaScript can achieve similar scalability.



SVG, or Scalable Vector Graphics, are another important step on the road to resolution independence. This technology has been around for ages but has only recently seen cross-browser support with IE9 finally jumping on the bandwagon.

When I think of SVG I think of Adobe Illustrator. This app is primarily used for creating vector-based graphics with infinite scalability. In turn, SVG brings this same functionality to web graphics.

Almost anything you can build in Illustrator and other vector editing apps can be easily exported as an SVG file and implemented on the web as a scalable object.

The advantage here over CSS seems fuzzy at first but becomes clear when you’re working with complex images. It’s easy to create simple buttons with CSS but when it comes to building say, the Starbucks logo, things get really messy and complicated.


As an alternative to hours and hours of CSS fiddling and perhaps hundreds of lines of code for a single object (assuming it’s even possible with CSS), you could just export a vector version of the Starbucks logo as an SVG and embed it into your web page in only a minute or two! Click here to see a live example of this. Be sure to zoom in with Command+ and watch how the image scales perfectly.

To learn more about how to implement SVG in your site, check out these great resources:

But What About Photos?


This is all well and good, but given that we’ve been tackling imageless web design with UI for so long, it’s not really that much of a curve ball to take things a little further with SVG. The real problem lies in photos on the web.

Photos are raster images and as such they simply crush the dream of truly resolution independent web design. No matter what we pull out of our bag of web design tricks, we can’t get around this limitation.

For now, this means serving up different images to different devices. This sucks, but you don’t want to make non-retina screens load in those huge images and you don’t want to serve up sucky images to the retina screens, so this is your only solution.

This can be accomplished through media queries and the device-pixel-ratio feature. As an example, Hal Gatewood shows us how we can target the third generation iPad:

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2){
	div {background: url('biggerphoto.jpg');}

What About HTML Embedded Images?

The method above is all well and great, but it only works with CSS background images. What if you want to embed an image using HTML? Even further, this has drastic implications for video as well, so how can you serve up custom videos to high ppi screens?

Unfortunately, there’s no real answer using pure HTML. Perhaps the need will become so great that we’ll see something like this in the future, but for now, you’re out of luck.

The only solution is to turn to something more powerful like JavaScript. has a quick example of how to detect the iPhone 4 with JavaScript or PHP that you should check out.

This obviously presents huge problems though for web designers who try to stick with HTML and CSS and aren’t familiar with JavaScript and other advanced web technologies. Suddenly, this group can’t even present simple content in a way that is optimized for viewing on most devices.


It doesn’t matter if you love Apple or absolutely hate everything they stand for, the reality is that if you’re a web designer, the rise of the retina display is going to kickstart a trend that will fundamentally change the way you build websites.

At this point in time we have a few courses of action to explore: HTML5 canvas, JavaScript, CSS3, SVG, and media queries together comprise your arsenal of weapons with which to attack the problem of your content being viewed at upwards of 264ppi.

Hopefully in the near future we’ll see more robust options pop up for serving up different HTML-embedded images and video to the correct devices.

Leave a comment below and let us know your thoughts on all this. Are you excited by the new possibilities or intimidated by the uncertain territory? Will you start optimizing your work for retina screens any time soon? Have you done so already?

Comments & Discussion


  • The Vector Box

    great read, extremely excited about the possibility’s.

  • Fero Volar

    Nice post, HD is future.

  • Paul

    Although HD web Design will be amazin, this is going to have a massive affect on page loading times. For this reason I don’t think the web is ready for HD Web Design.

  • Ben Dunkle

    I think we’re going to see a lot more points instead of pixels in CSS.

  • Nicole Glynn

    Paul – I’m not sure it matters at this point if the web is ready for it, Apple has decided it for us with these displays.

  • DeanP

    This is what I truly love about web design! It is CONSTANTLY evolving! Just when I am dead tired of hearing about “Responsive Design” a whole new buzz word is started! “HD-WD” Welcome to the Future! :)

  • room34

    Great post, with some excellent ideas I hadn’t fully considered before (especially regarding more intensive use of CSS and SVG).

    One thing I’d say to slightly ease the pain: we’re not really going from 72 ppi to 326 ppi, more than quadrupling resolution; the “72” is a misnomer, as no screen actually displays the images at that resolution anymore. Essentially, 72 is shorthand for “standard resolution” on a computer display. So Retina Display images only need to be double the resolution: 144 ppi. Or, as I’m doing, leave the ppi at 72 and just double the dimensions.

    (Yes, as John Gruber always points out, this means 4 times the pixels. But 72-to-326 would mean over 20 times as many pixels, and would result in images considerably higher resolution than needed even on a Retina iPad.)

  • VicC

    Um, am I the only one who realizes that it is the increases in connection speeds and processing power, not the resolution of an overpriced consuming device that will drive higher resolutions for web pages. Seriously folks, most home PC’s have had this capability for years, the ONLY limiting factor has been load speed.

  • Jake

    Think I’ll pass. I care enough about my users to not force them to wait ages for a site to download (while eating into their data-plan). I’d be more convinced if network coverage/speed wasn’t so erratic (I can’t even get 3G where I live, let alone 4G).

  • Rednights

    The prospect of this mattering is aligned when the US gets its act together and beef up web speeds on mobile devices. I suppose tiered users would be scrambling for the low-res option immediately.

  • Chris Best

    @room34: Yes that makes sense, thanks. My panic attack is beginning tp subside a little now.

  • Matthew

    Apple hasn’t decided anything for us. We’ve seen HD resolutions for years now in the most popular resolution space in the world, the desktop computer.

    We still put up images at 72ppi and they STILL look great on our HD displays. If anything you should be wondering why Apple didn’t adopt high definition displays years ago on their mobile platforms.

  • Brett Jankord

    I wrote a script to help handle displaying hi-res images on capable devices.

    I believe we will see more and more high resolution devices in the near future.

    SVG, CSS3 will play big roles making sure UIs look sharp aswell on these new HD devices.

  • Joshua Johnson

    Matthew, current desktop displays are far from retina quality.

  • Daris Fox

    The problem isn’t just related to Apple, you just have to see what Microsoft has had to contend with for their new Metro paradigm. If anything I suspect Win 8 will start to dominate the market share when released later this year. This will introduce a whole new raft of headaches in that those devices will not have the same constraints of Apple’s design and it will be up to the manufacturers to decide what panels will go in. Unlike Apple, Win 8 will also be covering a far, far wider gamut of displays from Windows Phone right through to multi-monitor rigs and this will mean it will be difficult to set a DPI for these.

    All my graphics in the last 8 years have been set to print 300 DPI, yes it’s been more costly but the images has been, for all intents, media agnostic. I do hope this finally drives more browsers to support SVG, so far Opera is the only one that really has complete support for the spec.

  • James

    Perhaps having a HD version of the site for those willing to be patient with the load times (or have a fast connection). That way our sites stay optimised but the HD option is there for those who indicate they want it. I don’t think the web is ready yet for large images being forced on users simply because Apple have a high pixel display.

  • Thiago

    Does Fireworks supports SVG?

  • Akwa

    Gee we have been massively duped into thinking there was nothing before Apple came along! HD displays and what not have been around way before apple decided that we all deserve better displays.

    “When Apple Speaks, We Listen”

    What a sad indictment on current day society that is.

  • James N

    How is the web not ready for HD images? I used to look at websites with images on with a dial up modem 10years ago now generally everyone has broadband so our websites just load with little fuss. We stream videos we even stream HD films and a few people above think Internet speeds can’t handle bigger images… Are you sure!

    I agree 3G has never been any good (i use wifi hotspots mainly) but broadband is there and hopefully 4G will improve the mobile sector.

  • Matte

    I have this slight fear that @media queries will be my generations browser wars.

  • Jason

    “When Apple Speaks, We Listen”

    Well see, there’s your problem.

  • Joshua Johnson

    For those that doubt the “When Apple speaks, we listen” claim, go back and take a look at the “mobile web” before the iPhone. It was crap. The kind of mobile design that we do now had no place before Apple came onto the scene and changed the game. Now every phone has a browsers that’s nearly as capable as a desktop version. Apple made a product and the industry responded with competition (if you hate Apple, great, the statement still stands).

    This same thing will happen with retina quality screens, in fact, that’s not even a prediction, it’s an observation. It’s already happening. Do you really just expect Android phone/tablet makers to not respond with similar or even better screens? This will change the industry as a whole.

    The truth is, whether you “listen” to what Apple’s doing or not, the cell phone and tablet markets do, without a question. This trend will expand and you’ll either see it coming or play catch up.

  • Web Mentor

    Surely there has got to be an alternative of serving different images on HTML via server (PHP)?

  • Simon

    Great post, I liked your argument.

    What I think is that we need a new image format that is a lot smaller in size but still high-res. There are too many different file formats for images from .gif to .png to .jpg and others.

    We can compress images of course, or you might also say that internet speeds are better than they were a few years ago so this balances things, but the fact is that as technology improves and we add more pixels to our screens and photos things will get a bit too large.

    Let’s see what happens until the end of the year with the iPhone 5 in the pipeline and the new Macbooks already within reach.

  • James Wyse

    There’s an article on css-tricks which discusses using javascript and .htaccess to provide different images based on screen resolution.

    I found it quite funny that the article is less than a year old and it’s main concern was sending SMALLER images to mobile devices.. how things change!

  • peter

    Related to the above article is this one – only js solutions so far….

  • peter

    Near the end of the above article, they seem to be clamoring for a new html tag to tackle ALL situations:

  • peter
  • fpiat
  • Motyar

    Thanks for the link to “iPad 3 Media Query”

  • Jakki

    Well photo background web pages are the in thing right now, and tbh it’s not that hard to create your own hi res wallpaper that will fit the majority of monitors. Scalable vector graphics is an insanely awesome idea though, I just wonder how long it’ll take to load on a big screen……..

  • Dave

    When I read this, I realise that you kind sir are an idiot. HD in terms of web is nonsense.

    Graphics cards and monitors have long been able to display way above these resolutions currently being deemed “HD” – but companies like apple come along and exploit the weak minded like yourself making you want the shiny (but actually nothing special) products.

    I am currently running my machine at waaay above HD resolution on a crappy old graphics card and nothing looks fuzzy or pixelated.

  • FPS

    Really good article.
    Just a thought on this paragraph:

    The pixel density problem is an interesting one. The web represents so many different technologies coming together in harmony that it can be chaotic if one of these technologies runs ahead and upsets the balance.

    Actually, as far as I’m concerned, disrupting the balance is what propels change in a fundamental way.

    In this case, It could mean that the enhancement on the ppi will push for tech development (as well as html, etc coding standards) so that we will be able to have high-definition, high-quality on-line as we now have this 72ppi res. Just imagine having enough broadband to actually interact with 200+ppi filled content as we do now with 72ppi.
    Of course, we are humans. This means that this could also be absolutely disregarded by the status-quo manufacturers and developers and pushed back for a couple of decades (like most true technological innovations)

    Interested to see how things will work for this in the next couple of years

  • HHB

    The issue isn’t “HD” web design. We’ve been doing that for years. Most people realize that 1920 x 1080 screens are fairly ubiquitous these days (that being the spec for 1080p Hi Def), and have been designing sites to work well at that resolution – even if that means a large background image and a 960 pixel wide content container. Responsive design has been coming along quickly, and the new iPad simply becomes another media query in that mix.

    The problem is two fold. First, the issue is legibility. It’s nice that the new iPad is 2048 pixels wide, but it’s still a 10″ screen. That means you will have to design a website that fits into 2000 pixels wide, but may still be zoomed in on. I’m still not sure what the right approach to that is.

    The other bigger picture problem looming is that while devices may get more sophisticated, speeds may increase and therefore more bandwidth is required and consumed, the sad part is Internet carriers are getting more greedy. Bandwidth caps are appearing everywhere, especially in the mobile internet space (but not limited to it).

    I think the answer, for now anyway, lies in really minimizing the use of images, designing well thought out minimalist responsive css driven designs, and using html5 well.

    However, the biggest issue is that the CLIENTS may not think this way, or really know anything about any of this. I still get requests for flash splash pages ffs.

  • Kai

    although the article in general is good the part with the screenshot of photohop regarding the resolution of images on the web is nonsense! the resolution of an image is not important, it’s the absolute pixel size of an image that matters. if i put an 1600px x 1200px on my page and do not alter the image size in html, it will render in this exact size no matter if my screen is an ipad3 or an windows 95-PC. it only appears smaller on the ipad due to it’s higher resolution per inch/cm

  • Kiril Vatev

    There is actually a workaround for embedded jpeg images in CSS. In the markup, I have a placeholder for the image element, which I leave empty. Then, in CSS, I create a new element using #image:after over the #image placeholder, and inside that element, I put the actual image using “content”. This means I can have different images using media queries.

  • Gary Terry

    @dave What you are failing to comprehend is that your monitor (72-96dpi) doesn’t have the same pixel density (256-350dpi) that the latest smartphones and ipads have. What this does is make all your images fuzzy an blurry and inappropriately sized. Do some research before you bash a good article. Just showing you own ignorance there my friend. Well done to the author. I’ve been battling to get others to recognise the significance of this issue as well. Kudos!

  • Markus K.

    “When Apple Speaks, We Listen”

    … sad.

  • Dave Coffin

    I started this process for the web products I’ve designed, but what is the best solution for scaling up your images? Is it better to increase the ppi or to scale the actual image size up and adjust it back down to its actual pixel size using CSS? I’ve been doing the latter, and it looks awesome on both retina iPhone displays and the new iPad.

    Also, I’m pretty unfamiliar with svg. I intend to learn more, but are there graceful fallbacks for old versions of ie?

  • MarkW

    “When Apple Speaks, We Listen”

    correct it should be:

    “When Apple Speaks, Some Listen, But Not All ….”

  • Martyn

    “Dennis Ritchie co-invented C which is the basis of basically everything that involves computers. He co-invented UNIX which is the basis of everything computers except Windows (though Windows was very, very extremely influenced by it). Apple’s OS X is a UNIX-based platform. But, no, so many people think Steve Jobs did it all alone and that he should be praised as a savior. Not only did he “borrow” ideas, designs, and features from everyone else, he whined if anyone ever did the same. In 1996 he said “We have always been shameless about stealing great ideas.” In 2005 he said “They are shamelessly copying us.” This year he said “I’m going to destroy Android, because it’s a stolen product. I’m willing to go thermonuclear war on this” and then almost immediately afterward released iOS 5 with a ton of features first introduced in Android. The guy is/was an asshole. I have no patience for a hypocrite like him.” – Dusty Wilson

  • Raymond W

    HD is nice, but the loading speed will be crappy! But… I would love to wait a few more seconds for high-res images on my iphone. Especially with portfolio designs.

  • Paweł P.

    Good article. I want to be ready.

  • Richard Razo

    Ahhh Facebook announced they are HD ready. =

  • Danie Clawson

    Dont want to get involved in the apple debate, just thought I would point out that SVG files, if designed correctly, can be extremely lightweight. Especially when you consider that the same amount of data for a graphic at 72ppi, can fill an infinite space with SVG.

  • gavin

    Bandwidth is still an issue ans even more so on mobile devices. Can’t see owners if images wanting hi rez versions online

  • Ferdy

    “…and you don’t want to serve up sucky images to the retina screens, so this is your only solution.”

    Actually, you are probably doing most of your users a better service by giving them the sucky images, which do not look as sucky as you suggest due to upscaling. The obvious reason is connection speed. 3G is slow yet most users don’t even have that.

  • Evan

    For those who have a problem with the statement, “When Apple Speaks, We Listen,” let me know when your OS and hardware platform is ready, OK? Like it or not, Apple dictates how you do your work. They own the OS and the hardware and every other competitor is scrambling just to catch up.

  • thermos

    @Dave – “Graphics cards and monitors have long been able to display way above these resolutions currently being deemed “HD” – but companies like apple come along and exploit the weak minded like yourself making you want the shiny (but actually nothing special) products.

    I am currently running my machine at waaay above HD resolution on a crappy old graphics card and nothing looks fuzzy or pixelated.”

    Wow Dave, do you work on the Best Buy Geek Squad? You sound like a real computer expert who knows what’s going on!

    Good article, although like some of the other people commented, probably not as dire an issue as it comes off here.

  • James

    Why not just use PHP to serve the image files from one master high resolution file – it could scale the image down on the fly depending on the device currently requesting the image. Slightly more complicated, but possible, especially as server hardware gets faster.

  • Think360studio

    Hi. I am also a Mac User. For me SVG was a new topic, i didn’t use it earlier. But after reading your article i used SVG and i really enjoyed it. As it creates more interest in the designs whatever we want to design.

  • TrueNight Studios

    I think those of you who are knocking on Dave might be misunderstanding the point (at least I hope he was getting at this point, and just faltered with words). The PPI of your *image* doesn’t matter, that is there only for printing purposes. The PPI showing up in Photoshop has no bearing on display on a monitor, only the actual resolution in pixels you choose.

    Yes, the PPI of your device matters most definitely (many new monitors are at around the 100-120ppi mark now [at least professional monitors], and with the difference in viewing distance this is closer to an ipad than apple wants to admit) but that isn’t decided in photoship with that PPI box. You are working under a common misconception because two completely different things are using the same name. If you set that ppi in photoshop to 72 or 300 or 1000 and don’t alter the number of pixels you are using then nothing is going to change on a screen (but you’ll see a change in printing for sure).

  • web design

    Very interesting.HD has been getting more importance over the last couple of years.It is the first design considerations a web designer has to make is the resolution that the project is going to be built in. Thanks for sharing!

  • Matt

    Androids UI language is similar to css but instead of using px units you xan use dip (density independant pixels) units for borders, shadows, element hights, fonts, etc… If the Web had something similar, this would be nice.

  • Anders

    Very good post, good things to have in mind when designing. Excited about a web full of beutiful image experiences.

  • AntoxaGray

    Unfortunately I don’t have Retina screen so I can’t test designs in HD.

    • DPC

      Not needed.

      Just design with 300PPI and zoom in and out to verify compression, detail, and other issues…

      Eventually we’ll all be going to such higher density displays, but I’ll wait for the real world to catch up. Right now it’ll cremate bandwidth limitations to suppose what is still a VERY niche toy…

  • DPC

    Oh good. With bandwidth limitations prevailing out here in real life, a venue Apple doesn’t concern itself outside its profit margins, if Apple is forcing the industry, maybe they should pay the $$ difference… if everybody followed Apple’s lead, it’s the developers that take a hit, followed by the servers and the internet network… let’s not forget, plenty are still stuck with 56k… Maybe Apple should set up some broadband towers, since the US government isn’t able or willing…

    But is it a free market when one company plays such sledgehammer tactics…

  • Kredit

    HD is future. Nice post.


About the Author