Hi-Res Real Estate Images
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.
What happened?
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:
- To optimize your website for speed, images should be as small and compressed as possible
- For quality, especially on modern devices, our images need to be big and high-resolution
You can probably see why these two competing interests are not the easiest to reconcile. Optimizing images becomes a balancing act between minimizing loading times and maintaining high image quality to provide the best user experience.
To make this balancing act a little easier, here are a few tricks and techniques you can use...
How To Use High Resolution Real Estate Images
Vector images
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.
Use Srcset Tags
The HTML attribute "srcset" lets you specify multiple image files for different screen resolutions or device pixel ratios. With srcset, you can provide multiple versions of an image and let the browser automatically select the most appropriate one based on the user's device capabilities. This can help optimize page loading times and ensure that images look sharp and clear on any device.
This option is a little complicated and not very widely used, but it gives you the option of using HTML to specify the regular image and also provide a high res alternative (or two).
This feature is particularly important for high-density displays, such as Retina displays, which require higher resolution images. It's a valuable tool for website owners who want to provide a high-quality user experience and improve their website's SEO.
Image Optimization Techniques
There are a number of other techniques available for optimizing high-resolution images:
- Use appropriate image formats: While JPG, PNG, and SVG have their uses. WEBP is appropriate for most.
- Compress images without compromising quality. There are a number of online tools for this like Compressor.io
- Optimize image size by scaling down to the maximum size required for each use, like banners, full page, half page and so on.
- Use lazy loading to defer the loading of images until they are needed.
- Consider using a content delivery network (CDN) to serve images from a server closer to the end user.
To read more about these and other techniques, read our longer article on image optimization for real estate, or check out our comprehensive real estate SEO guide.
Using Stock Photos For Real Estate
As a real estate marketer, leveraging stock photos in your content can enhance your brand and attract more potential clients. However, using these images without proper consideration can do more harm than good.
The strategic use of stock photos can reinforce your brand with high-quality images, but it shouldn't be used as a standalone element. Integrating it as part of a comprehensive marketing strategy can maximize its effectiveness and increase your chances of success. You should also be wary of some of the drawbacks and potential pitfalls:
- Many stock photos are subject to specific licensing requirements that restrict their use in certain contexts.
- Using stock photos can make your site look less authentic and less unique. This is because stock photos are often used by multiple businesses and can be perceived as generic.
- Stock photos may not accurately reflect the actual property or properties you are trying to market. This can lead to disappointment or frustration from potential clients who may have had false expectations.
To mitigate these risks, it is important to choose high-quality, context-appropriate images and to use them strategically as part of a comprehensive marketing strategy that also includes original and unique content.
In conclusion...
To ensure a high-quality user experience on real estate websites with modern devices, you need high-resolution photos, but optimizing images for speed can make this challenging.
Thankfully, with the right techniques, real estate marketers can provide users with stunning high-resolution images and a lightning fast browsing experience.