Blog
Oct 17
Help! The resolution is changing! Optimimzing websites for high resolution displays

5 Ways to un-pixelate your website

Not too long ago our computer screens stared back at us with rows and rows of all-too-visible, glaringly obvious little pixels of light. Luckily technology has progressed very fast since then — today we have a choice of very high resolution screens for our mobile phones, televisions, laptops, and desktops. These technological advancements have also had an influence on how websites and applications display, and not always in a good way. On the bright side — there are a few techniques that we can apply to optimise websites for high resolution displays.

What is a high resolution display?

I’ve recently had the privilege of receiving a brand new, 13″ MacBook Pro with Retina Display for work (ed: jealous!). “Retina Display” is Apple’s version of a very high resolution display and refers to the fact that when viewing the screen from a certain distance, the individual pixels are indistinguishable to the human eye. This is a real treat — high resolution photos and text look extremely crisp, clear, and detailed. While browsing the Internet, however, a lot of company logos and most images look very pixelated when compared to how they look on a lower resolution screen. The reason behind this takes us to the little guy that makes up what we see on our screens — “the pixel”.

There are two types of pixels. The hardware or device pixel is a physical unit and the smallest point of light that a screen is capable of displaying. The reference pixel is more abstract since it’s not necessarily the same size as the hardware pixel on a screen. An example of this is the iPhone 5 which is 640 hardware pixels wide. If we viewed a website that is 640 pixels wide on the iPhone 5 and the hardware pixel to reference pixel ratio was 1:1, the website might be too small to read without zooming in. To avoid this, the iPhone 5 is treated as being 320 reference pixels wide. This means that text will be double the size of what it would have been if hardware pixels were used instead. It also means that the device now has double the amount of physical pixels to use for showing content, hence the sharp and clear image.

Representation of device/hardware and reference pixels on an iPhone 5S's high resolution display

Representation of device/hardware and reference pixels on an iPhone 5S’s high resolution display.

High resolution displays are definitely not exclusive to Apple. Mobile phones like the Samsung Galaxy S4 and HTC Butterfly have even higher resolution displays than the Retina Display on Apple’s iPhone 4, 4S, 5, 5S, 6 and MacBook Pro.

That sounds supercool! So what is the problem?

If a raster image such as a .jpg or .png image is displayed on a higher resolution screen at the same size as on a lower resolution screen, the image will look blocky and pixelated. The higher resolution screen is capable of showing more detail, but the image doesn’t contain that detail and so the higher resolution screen is forced to use more hardware pixels to make up the image which results in the blocky look.

What can we do about it?

Quite a few things fortunately! Here are 5 ways in which you can optimise the images on your website to look as cool as can be on any display:

1. Use SVG images

SVG stands for Scalable Vector Graphics. The .svg image is described using XML and the browser then interprets the XML and renders a vector image based on this description. Since this is a vector image that is mathematically calculated, scaling it means it won’t lose quality and it will look great on high resolution displays. Don’t worry, you don’t have to code the XML yourself — most vector illustration programs allow you to save images as .svg. This is a great method for displaying images on the web e.g. your pixel-perfect logo.

To implement SVG images:
1. Create an SVG image by saving a vector image as .svg
2. Upload the SVG image to your website
3. Reference this image in your HTML code like this:

<img src="/images/image.svg"
onerror="this.onerror=null; this.src='/images/image.jpg'">

Note: The part in “onerror” refers to the fallback image.

Pros

  • The image will always look smooth and won’t pixelate on high resolution displays.

Cons

  • This method is only really practical for vector images (e.g. logos) and won’t work well for photos.
  • SVG images don’t render in all browsers so a .png or .jpg fall-back image is needed for IE8 and below as well as Android 2.3 or you can use svgweb — a JavaScript library which lets browsers that don’t support SVG images display them properly.
  • In some browsers (e.g. IE9 and IE10) both the SVG and the fallback image is loaded, which can dramatically affect website speed.

For more details on using SVG images in your website, you can check out these SVG image tips.

2. Use icon fonts

It can be really time-consuming to cut-up lots of little icons to use on your website. A good alternative is to use icon fonts since fonts are also vector elements, they scale infinitely without pixelating on any devices. Some great icon fonts are Font Awesome, Iconic and Entypo. You can even create custom vector icon font sets with IcoMoon, using your own illustrations with all the benefits of a font.

Pros

  • Supported by most modern browsers.
  • Easily customisable — just increase the font size to get bigger icons and regular CSS effects can be easily applied.

Cons

  • Images can only be one colour, but effects like CSS gradients make it a little more versatile.
Some of the font icons available in the Font Awesome set with CSS effects applied

Some of the font icons available in the Font Awesome set with CSS effects applied.

3. Use CSS3 effects

It can be really annoying to create images of white blocks only because they have rounded corners when they could have been simple HTML elements instead of an image. Enter CSS3 effects which allows you to add shadows, gradients, and rounded corners to your HTML without using images. The result is effects that display perfectly on high resolution screens. A code snippet of a CSS3 style is shown below:

/* To display rounded corners */
.block {
	border-radius: 10px;
}

Pros

  • Supported by most modern web browsers.
  • Website loading times should be faster because there are fewer images to download.

Cons

  • If the browser doesn’t support CSS3 such as IE8, no effect will display (i.e. there is no automatic fallback).

You can learn more about the different CSS3 effects on W3Schools.

4. Use image replacement techniques

There are a few ways in which you can show the correct resolution image to the user:

4a. Use CSS media queries and sprites

CSS media queries are a common technique used in responsive design. With these queries, you can specify conditions that the screen must adhere to before certain CSS styles are displayed (e.g. if the screen is 320px wide or less in reference pixels, make the font size bigger). It is also possible to specify the device-pixel ratio (the screen’s resolution) with CSS media queries. As explained earlier, this refers to how many hardware/device pixels make up a reference pixel so for the iPhone 5 this ratio will be 2 (i.e. there are 2 hardware pixels that make up 1 reference pixel). Now we can say that if a screen’s device-pixel ratio is higher than 1, a larger CSS sprite image should be used, otherwise the regular sprite image should be used. Here is an example of a CSS media query that tests for high resolution displays:

@mediaonly screen and
(-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
	background-image: url(/image/image@2x.jpg);
}

Pros

  • This method works in most modern browsers.

Cons

  • This method means extra work, since two or more versions of each sprite needs to be created and maintained.
  • Some browsers will download both sprites, which means that more bandwidth is used.

You can read more about CSS media queries for screen resolutions.

4b. Use JavaScript image replacement

With this method, you make both regular and high resolution versions of each image. You then include a script such as retina.js that will automatically serve the correct image to the user according to their screen resolution. The script checks for images with the text “@2x” at the end of its name and recognizes this as the high resolution version.

Pros

  • Supported by most modern browsers.
  • After the script or WordPress plugin has been implemented, only the images need to be created and uploaded, the rest happens automatically and no extra coding or styling is required for each new set of images.

Cons

  • Creating different sizes for each image is extra work.

4c. Use the “srcset” attribute

Good news! The “srcset” attribute has recently been implemented in modern browsers for the “img” tag and for the HTML5 “picture” element. This provides an easier way to specify a set of different images to be used when the screen is a certain size and resolution. The same CSS media queries for width can be used directly in the “source” element of the “picture” tag, and then the image source for each resolution and its device-pixel ratio is specified in the “srcset” attribute. An example of how this works is shown below:

<picture>
	<source media="(max-width: 640px)"
		srcset="images/image-medium.jpg, images/image-medium@1.5x.jpg 1.5x,
		images/image-medium@2x.jpg 2x">
	<source media="(max-width: 320px)"
		srcset="images/image-small.jpg, images/image-small@1.5x.jpg 1.5x,
		images/image-small@2x.jpg 2x">
	<img src="images/image-original.jpg"
		srcset="images/image-original@1.5x.jpg 1.5x, images/image-original@2x.jpg 2x"
		alt="A pretty image">
</picture>

Pros

  • No extra JavaScript needed, images can be specified natively.

Cons

  • Not implemented by many browsers yet e.g. not supported by Internet Explorer at all!

You can read more about this method here.

5. Use high resolution images for all displays

Finally you can also use only high resolution images even if the user’s display is not high resolution. These images will be displayed “as-is” on high resolution screens, but scaled down with HTML/CSS when displayed on lower resolution screens. This might sound like a waste of bandwidth for users that can’t view this image in all its high resolution glory, but in certain cases this might be a viable option. Higher resolution images can be compressed much more than regular images and still have high quality. Their size in pixels might be double that of the lower resolution image, but their size in kilobytes could be the same or less than the lower resolution image.

Pros

  • Only one set of images to maintain.

Cons

  • Might use more bandwidth for certain types of images.

It is true that only a minority of computer users currently have very high resolution displays for their desktop computers or laptops. According to W3Schools statistics, only 1% of users had a display of 2560×1440 pixels in January 2013. These are users who probably have a MacBook Pro with Retina Display. This number has stayed more or less the same up until January 2014. However, high-end smartphones and tablets with high resolution displays are much more common. It might therefore be a good idea to make websites as pretty and professional as possible for these users and also for those who will join the high resolution revolution in the near future.

Happy un-pixelating!