Optimized web design: Page speed vs. high-resolution images

The high-resolution image on the left displays more clearly on HiDPI displays than the low-resolution image on the right.

By Joe Malouff, Director of Website Design/Development

At Fruition, we check a number of factors when we are optimizing a website for search. On that checklist is page speed, which Google announced as a ranking factor in 2010. High-resolution images can greatly impact page speed, and with advances in display technology such as retina displays and other HiDPI displays, high-resolution images can improve how audiences view websites. It’s a catch-22: Google wants pages to load quickly, but also wants users to have the best experience on a site as possible. This, for retina-display users, would mean all images would display in their high-resolution formats, which would slow down the site’s load time.

Site Speed as a Ranking Factor

Originally Google said site speed as a ranking factor would affect very few queries, but we have found it to have a significant impact on a number of clients’ sites. In addition to impacting search rankings, site speed can affect customer experience positively or negatively, and a site that loads quickly has even been shown to improve conversions.

Many things impact site speed, including large images, video, JavaScript, code errors, unused code and more. In most cases, site owners can improve their page speed by compressing images, minimizing JavaScript and removing unused CSS coding from their sites.

You wouldn’t want to sacrifice relevant content on your site for page speed, but you can optimize your page speed for search by using compressed graphics: optimize your graphics for the web. If you use Photoshop, this is really easy – just click “save for web” and the tool will automatically compress your image to a speed-friendly compressed format – you end up with a smaller file size. Usually this involves compressing images so they are 72 dpi – these lower-resolution images have a much smaller file size but display well on screens with normal resolution.

HiDPI and Retina Displays – Image Display Options

The advances in mobile technology and retina displays (or HiDPI displays) on mobile products like the newest version of the iPad and iPhone mean lower-quality images might not display as well or give users a rich, visually compelling experience on your site. In fact, Gravatar recently published this post about adding high-resolution profile photos to your Gravatar account so that your profile image looks as good as possible on the new retina displays. WordPress also recently announced that they will start serving high-resolution images and graphics on both WordPress-hosted and self-hosted WordPress sites to visitors who are viewing them on HiDPI displays.

For example, if you have a graphic than includes a 1-pixel border or shadow on your website, that border or shadow will display as 2 pixels on retina displays: this can mean graphics don’t show up as crisply. You can adjust for retina display graphics in your CSS by tweaking the spread radius so that borders and shadows re-size automatically for standard and HiDPI displays.

One way to make graphics (but not photos) optimized for retina displays it to implement SVG. This is technology is very compatible with resposive design although it is still emerging. SVG is a resolution-independent way to present graphics on the web.

However, both these techniques only work for graphics, not images. A 72-dpi image that you have compressed to display quickly on your site will look fuzzy on HiDPI displays because it will essentially be “doubled” and lose its sharpness.

On WordPress sites, the solution to this problem is fairly simple – WordPress detects visitors’ screen resolutions and serves them the image that best suits their screen. This means you can upload a high-resolution image and optimize it so it loads quickly. WordPress will serve the high-resolution image to visitors on HiDPI screens, and users with standard definition screens will still get the fast-loading, lower-resolution image. This update is currently in place for WordPress-hosted sites, but they will be rolling out the change to self-hosted WordPress sites in the near future with the WordPress 3.5 release.

Site owners can implement a similar system by using media queries in their CSS code that will detect the visitors’ screen resolution and serve the appropriate image, whether it’s a high-resolution or optimized version.

Best Practices for Images on Your Website

Since HiDPI displays are not yet widespread, there is not much data available on how Google will adjust page speed rankings in response to serving high-resolution images on sites. Whether Google will attach less importance to page speed because of changes and prevalence of retina displays remains to be seen.

In general, it is good to look at high resolution imagery on a site-by-site basis. Some best practices you can use to decide how to best display your images are:

• Continue to optimize your high-resolution images for web and mobile displays.
• Make the low-resolution version of your graphic available by default. While HiDPI displays are becoming more widely available, the technology has not yet been adopted by many computer and mobile device manufacturers. Serving high-resolution images by default would slow page speed unnecessarily for most users who are not using devices with retina displays. For the time being, using media queries to determine visitors’ screen resolution and serving them the appropriate image seems to be the best solution.
• Use available coding options to make the graphic elements on your site compatible with HiDPI displays. Many sites such as Google Chrome and WordPress have been integrating changes to their graphics that improve how they look on retina displays. This can help ease the transition to HiDPI displays and make your site display better overall. Since the change are code-based and resolution-independent, making graphics retina-ready won’t affect page speed as much as serving high-resolution images.
• Make changes to your images and graphics based on your client base. If they tend to be tech savvy and use mobile devices that have HiDPI displays, then consider making high-resolution versions of images available. If you do not receive many visits from mobile sites, you can probably stick with lower-resolution optimized images for the time being.
• Utilize responsive design options to resize images on the fly for users on a variety of different displays.
• Use lossless image compression to optimize your images on your website. Lossless compression allows a file to be downsized without losing any original data and can conserve image quality better than lossy compression.
• Choose the correct file type for images on your site. The best file types to use for web images include .png, .jpg and .gif files. They will typically display faster and more clearly on most displays. Each format has its pros and cons depending on what your goals are: .gifs are great for simple vector graphics, .jpgs are best for photos, and .png images are best for occasions when you need transparency in your images.