Why your site graphics look crap on the iPhone

Have you noticed how fuzzy some of your site imagery looks when viewed on an iPhone 4? Let me explain why, and how web designers are working to fix the problem.

The problem of ‘fuzzy’ graphics is not limited to the iPhone 4. It is a problem that also applies to the new iPad and will soon encompass most phones, laptops and tablets. Its therefore important to understand the problem and some of the challenges involved in fixing it.

Image of the Boagworld logo looking fuzzy on the iPhone 4.

What causes the problem

The problem is caused by improvements in screen display. Often referred to as retina displays, these displays cram a huge number of pixels into a small space. This makes the pixels so small that they are invisible to the human eye. The idea is that this makes displays much clearer and crisper.

The problem with this approach is that where a 300 pixel wide image would appear fairly large on a normal screen, when displayed on a retina display it would take up considerably less space.

Image showing the increased pixel density of retina display

This causes issues with a website because if an image is displayed at a smaller size proportional to other items (like the text) it will break the design. The only solution to this is to scale up the image so it takes up the correct screen space. The downside of this approach is that it affectively makes each pixel appear larger and so the image becomes fuzzy.

Non image elements such as text are not effected by this problem because they are not pixel based. That is why text can look beautifully crisp. This in turn makes the fuzziness of images all the more obvious.

Possible solutions

The most obvious solution is to make images bigger and then constrain the sizes they are shown on the screen. This effectively forces more pixels into the same size so making the image sharper.

The downside of this approach is that images are bigger and take longer to download. As retina displays often appear on mobile devices with limited connection speeds, this is not a wise solution.

Taking a look at the type of images which appear particularly fuzzy gives us a clue about possible solutions.

Photographs generally look passable because they don’t have hard edges where pixels are most obvious. Icons, logos and illustrations on the other hand do have hard edges and often look badly ‘pixelated’. We therefore need to give special attention to these types of imagery.

In such cases there are four options available:

  • Use larger images
  • Use vector imagery
  • Use a typeface
  • Use code

Let’s look at each in turn.

Use larger images

Although generally speaking larger images should be avoided for reasons given above, it can sometimes be appropriate. When the image is a logo, illustration or icon that uses a lot of flat colour, these can normally be compressed to keep the file size low.

Also if the image doesn’t have to be shown at a particularly large size, then the ‘retina’ version of the image doesn’t need to be too large either.

The new mobile boagworld version currently under construction

Despite this, using larger images should only be considered as an option if other options are not appropriate.

Use vector images

Vector images are made up of lines and points rather than pixels. This makes they considerably smaller to download and scalable to any size with no loss of quality.

They offer a lot of potential in a world of retina displays and there are many examples of them being used very effectively already.

There are however some accessibility challenges for screen readers. Also support for older versions of Internet Explorer is somewhat tricky (although not impossible).

With this in mind, vector images currently need to be used carefully and somewhat sparingly.

Use a typeface

Gone are the days when web browsers could support only a handful of fonts. The sky is the limit with modern web typography. Best of all type looks great on retina displays and so can be used to solve some of our pixelated woes.

In cases where imagery was used to display typography, these can be simply swapped out for a web font. However, that is not the limit of web typography to help improve image quality.

Web fonts can also be used to replace icons. Because these icons are fonts, they can be coloured and styled using CSS without the need to create additional images.

IcoMoon

Tools like IcoMoon allow you to find icons and assemble them into your own custom font library for your website. They are small, load fast and look great on retina displays.

Use code

In the past web designers used images to create effects like rounded corners, drop shadows and gradients on websites. Unfortunately in the world of retina displays, these images can look shockingly bad.

Fortunately all of these effects can now be created without the use of any imagery, using code instead. The advantage of this approach is not only faster sites but no pixelation on displays with a greater pixel density.

Look to the future

Admittedly not all of the techniques listed above work in every browser and your site may look slightly different in some older browsers such as Internet Explorer 6. However this is the nature of the web. If you continue to insist that your site looks the same in an out of date browser such as IE6 then it will suffer when viewed on emerging technologies such as retina displays.

At the end of the day you need to look at the trends. The market share of older browsers is only ever going to decline, while that of retina devices is only going to increase. It doesn’t take a genius to identify where you should be focusing your efforts.

  • http://www.dootrix.com Rob Borley

    Something else to consider is that mobile carriers often use proxies to compress imagery before it’s served to the client. They are keen to save their bandwidth and protect their service for all customers.

    Large images, served over a mobile data network, are going to run into problems.

    • http://boagworld.com/ Paul Boag

      That Sir is a very good point and one I hadn’t considered.

  • chriscowleysound

    I think this problem can be shown quite nicely with this article:
    http://gizmodo.com/5892655/one-ios-icon-is-larger-than-the-entire-original-macintosh-screen

    Basically just a single icon is now bigger than the whole desktop from the original Macintosh!

    I still hate the hi-res screen on my work laptop in Windows though – it is just unreadable. I hope Microsoft can follow some of this advice.

  • http://twitter.com/chuckkillorin Chuck Killorin

    Great article Paul. I’m dealing with this issue now since we’ve been doing tons of mobile development lately.  I also had no idea about the Proxy issue Rob mentions and reminds me (painfully) of the heady days of AOL and the “Faster web browsing” option turned on by default. 

  • http://www.google.com/profiles/daniele.gobbetti gdaniele

    Please ignore. I don’t know why but I can’t delete the comment. Sorry.

  • sonerkoyluoglu
  • http://twitter.com/tristano98 Alexander Leonhardt

    What kind of code do you mean in the “use code”-option? CSS3 i suppose? Or even HTML5 Canvas-element? 

  • http://websourcefree.com/ saha

    Excellent article. I think option one is best to solve the problem.

Headscape

Boagworld