A common question that I’ve been asked from Vacation Rental clients is regarding optimizing images for the web. I’ve run into instances where unit pages load slowly and the most common culprit are huge property/unit images hogging up bandwidth, making the page slow to load, increasing bounce rate and worst of all - lower rankings in search results.
So, I’m putting together a quick post to help out not just my current and future clients but anyone who runs into this issue. Since most of my clients are Escapia and VRBO users I like to start with their guidelines and then expand on it.
The VRBO Image Recommendations say:
- Minimum dimensions of 1024 x 683 pixels
- Maximum file size of 20 MB
- Format of JPEG/JPG, PNG or GIF
- Horizontal (landscape) display is recommended.
These are great but where property management companies run into issues with are the image resolution. Resolution sometimes gets confused with dimensions but resolution is the DPI(Dots Per Inch) that makes up the image. The recommended resolution for web use is 72 DPI.
A side note: before trying to alter your images, I recommend making a backup so that you have an original to if the quality gets too compromised. For this example I am using Photoshop but other photo editors can be used with similar results. Review the images that you modify at each step for graininess or other quality issues.
For example, this image started out with a file size of 14 megs. While the dimensions were 2478 x1835, the resolution was 120DPI. By reducing the resolution to 72 DPI, the dimensions were reduced to 1649x1101 however the file size dropped over half to 5 meg.
You can further reduce the image size by optimizing the output on export:
An additional file size reduction can be achieved by using image compression services such as TinyPNG. Simply drag the output from your photo editor onto the box and TinyPNG will do the rest!
Tiny PNG also has plugins for Photoshop to take a step out of your optimization process.
While this example works great for single images, if you have quite a few images to process(VRBO allows up to 50) consider the batch tools that are part of Photoshop and lightroom. They will cut your processing time while leaving you with performance-improving results.
Just like single image processing, keep a few things in mind:
- Make a backup of images prior to processing
- Review changes along the way to ensure the right balance of performance and quality
- Try to make the images as close to 1 meg as possible and if needed, separate images optimized for the mobile visitor experience!