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:
Brad Anderson is the Executive Director and Founder of Fruition. Brad’s focus is supporting Fruition’s team to enable sustainable growth and excellent client satisfaction (EBITDA growth). With a strong statistical background, Brad built Fruition’s in-house software that is used to manage client success.
How Devs Optimize UX For Your Brand Website
Read Article →Developer Tips: Testing A Drupal 8 Module On Drupal 9
Read Article →Fruition Named Top Web Development Company in Denver by Digital.com
Read Article →