Large Images Are Killing Your Real Estate Website

Creating a strong "first impression emotion" in your audience is a great strategy to keep visitors on your site. But when that first impression emotion is annoyance your bounce rate will skyrocket.

The current trend is to use large, full-width, high-impact images to create emotion in your visitor. But improper us of these images are killing your website.

I see it everywhere. Click to visit... wait, and wait for the top of a site to load.

Expect that 7 seconds is the very longest your new visitors will wait for a page to load. For repeat visitors, it is a little longer at 10 seconds. But both of these load speeds are unacceptable; you should be impressing your audience in the first 3 seconds, no excuse.

Google states that it takes load speeds into account with their SERPs Ranking.

Granted, there are many factors that can slow your site (server speed, coding, plugins, redirects, etc.), but as a casual website owner, it is the improper use of larger images that you can quickly overcome and avoid.

How to Optimize Images on Your Website.

Let's take a common scenario just to illustrate how effective the following steps can be.

Here is a standard photo taken with an iPhone.

When you click on the image, you will notice how large it is (actual dimension is 4032px by 3024px). The largest, common resolution dimension of monitors today is 1920 x 1080. That image is 200% larger than your largest common monitor is going to display.

• The image also comes in at 4.3mb (its file size).
• The average size of a webpage in 2016 is 2.5mb
• That means the image I have uploaded is 172% larger than the average webpage!
• The fastest sites are loading less than 2mb, total.

If I were to use this image, as is, it would crush loading speeds. And yet, it's common to see sites using multiple images of this size on a page.

So what can we do about it?

• Resize
• Reduce
• Optimize

For resizing and reducing, I use a tool called IrfanView. But you can use just about any image editing tool to get similar results.

The file size is governed by three things. The dimension, the resolution (dots per inch, or DPI), and the stored data (everything from a time-stamp to camera type depending on the file type).

Resize (or crop)

First thing, let's bring the dimensions of the image down to your optimal size.
If the image is intended to be full width, then it doesn't need to be wider than 2000px. (Remember: The largest common resolution dimension of monitors today is 1920 x 1080) If the image is meant to be placed within content, then consider how wide it needs to be, and crop it to that exact size. This is always going to be less than 1000px. The computer image at the top of this article is just 700px.

Reduce DPI

The web doesn't demand high DPI levels like print does. 72 pixels per inch is standard, and you can even get it down to 60 DPI if you don't mind the image a little less than crisp.

Here you can see those settings.

Just those two adjustments above have brought the image down from 4.3 mbs to 954kbs (22% of the original). Cropping it a more sensible height (750px) reduces it further to 549kb (13% of the original).

Optimize/Compress

And finally, by running the image through a file optimizer, I am able to strip the unneeded photo data, bringing the final file size down to 499kb (11.6% of the original).

I use a desktop tool called FileOptimizer, but there are less intimidating image optimizers/compressors that you can use online like the following:

• jpegmini.com
• compressor.io
• optimizilla.com

499kb is still a big file to have on a webpage, but after running some speed tests, it looks to load at around 0.2 seconds. So that's certainly acceptable, especially if you are hoping to get your visitor's attention with a high-impact image. As a comparison, the original image was loading at 1.1 seconds.

What if I have a website full of over-sized images?

The last thing you want to have to do is go through your entire website, and resize, reduce, optimize, and replace dozens and dozens of images.

If you are using WordPress, you're in luck. There are at least two plugins that will make things easier for you:

• Ewww Image Optimizer
• Imsanity

Why we love them:

These plugins automatically resize new uploads and library images to a reasonable size. This is ideal for users who don't want (or understand how) to scale images before uploading.

Imgix is another amazing option (that works with or without WordPress). What Imgix does is like magic. Upload any image size you like, and this service displays an optimized, resized, version of that image dynamically adjusted for any device. When your site loads on a desktop, a desktop appropriate image size is displayed. But when your site is loaded on a mobile device, Imgix loads a different version of your images that is appropriate for mobile. It's amazing.

*Note this is a paid subscription service.

Very important note about IDX listing images.

You should also be sure to use this same approach to optimizing images for the listings you input in the MLS.

When you showcase your "Featured Listings" on your website through your IDX program, it displays the images as they were uploaded to the MLS. You are going to suffer the same load speed challenges with these images on your website as you would with images directly uploaded to the website.

To view the original article, visit the Real Estate Tomato blog.