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.
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.
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.
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.
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.
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.
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.
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.