Mastering High Resolution Images On Real Estate Websites
Last month, I was putting together the final touches on the perfect page. Everything looked fantastic, and I sent it to one of the developers I had been working with, for a final technical review of the content.
"The image is blurry."
Pardon? I know my way around an image or two and was confident he made a mistake. I triple-checked for the second time, and confirmed it wasn't blurry in any of my desktop's browsers.
Satisfied, I shared my conclusion with the developer. His response?
"Use your iPad."
...And there it was. A perfectly optimized, strategically placed, undeniably blurry image.
High resolution screens, that's what. We've been so caught up in speed optimizing our real estate websites that developers are only just starting to take notice of the high res devices taking over our world. And the simple reality is that high resolution screens need high resolution photos, or they turn out blurry—like the above screenshot of Cinque Terre I took on our iPad.
There's a lot of technical guides out there that explain exactly how high resolution images work, so I'll defer to those for your developer-level understanding, and focus instead on what you need to be doing to ensure your real estate website always looks its best.
Accepting A Contradiction
First, let's review some facts:
1. Speed optimization tells us our images should be as small and
compressed as possible
2. High resolution screens tell us our images need to be twice as big
You can see why this isn't an ideal scenario, but it's the metaphorical cards we've been dealt, so we need to make the most of them. Here's how:
The first thing to know about high resolution images is that vectors are your friend. In theory, at least. To work with vectors, you'll need a program like Adobe Illustrator, and vectors really only apply to simple graphics. In a real estate website context, we're talking logos and simple icons.
It's an awesome start, but what's a real estate agent to do about those visually stunning photos that really make a site shine? Well, there's two current solutions:
Double The Image Size
When Apple made their high resolution "Retina" displays, they intentionally made them double the pixels of a traditional web image. Simply put, to optimize for these devices, you just need to make your photos twice as big as their display size.
For example, the image to the right is meant to display at 400 pixels wide. To ensure it's compatible with high resolution screens, I've actually uploaded an image that's 800 pixels wide, then used HTML to resize the image to a width of 400 pixels.
The downside? It's going to slow your load times. I'm sorry, it will. But the key to minimizing the impact of this is finding the perfect size, and using images strategically. You want to make your images just big enough, and no bigger. In addition, we can apply our conventional image optimization wisdom and use images sparingly, avoiding an excessive number of photos whenever one or two could do the trick.
Implement srcset HTML Tags
Another high res image option has emerged in the design world, but it's a little more complicated. Using a handy bit of code, this option allows you to serve two images at once, and let the browsers choose which version is more compatible. With HTML, you specify the regular image and also provide a high res alternative (or two). It ultimately looks something like this:
The first part of the code specifies the image location and its ordinary display size:
Meanwhile, the second half of the code provides the HD alternative via the 2x tag:
The browser uses this information to display the image that's most appropriate for the device it's being displayed on. Web devices will display the 400 pixel version, while HR and Retina devices will display the 2x version.
If you're going to use this method on an REW site, you'll have to build your code in CMS snippets. The srcset code is relatively new and our WYSIWYG still strips the code right out, so srcset is an option best utilized by power users.
The downside? Not all browsers are compatible. As of May 2017, all the most recent updates of the major browsers can handle it, including Chrome, Safari, Firefox and Opera. Internet Explorer is the last hold out, and will not recognize the srcset script. Instead, it just skips over the code entirely, as if there were no images in the first place.
Embracing The Future
The reality is that image use has fallen behind the rest of web development, and the time has come for real estate websites to catch up. Users are still fairly forgiving of blurry images on their high res devices, but that's not going to remain the case forever. Right now is the perfect time to get ahead of the curve, show off your tech savvy, and prepare for the future.
Whether you go the double-size method, or the srcset method, a simple compromise will guarantee your site looks its best on every device.