Patience is not something found on the Internet.
A satellite image of your house, a duplicate recipe of grandma’s famous apple pie, and even obscure facts like how the St. Louis Cardinals’ birds on a bat design was inspired by church table decor…these things are on the Internet.
But patience is nowhere to be found. And the absence of patience coupled with a slow loading web page is the death of any website.
A slow loading web page results in one of two reactions: the emotional one of a groan while waiting for the page to load or the active one of simply closing the page and moving on to another website.
Images are the biggest culprit for slow loading web pages, and thankfully, there is a solution to the issue. Simply put, just reduce the size of the image.
Since a web page is shown on a screen, versus on actual paper, the amount of necessary file information for an image is drastically reduced. The number of pixels per inch (ppi) to render an image on a screen is much lower than the number needed for a physical print.
In addition, it is not necessary to upload an image that is 3000 pixels wide when many website layouts show their largest image between 600 and 1000 pixels wide. The extra large 3000px size forces a web page to compress the image before showing it, causing the image to load slowly.
How should an image be sized?
The recommended ppi for web resolution is 72. Note that most photographs created from a decent camera are originally set at 300ppi, as they are created at a high resolution for printing. Since the goal here is the Internet, a resolution of 72ppi is all that is necessary. The other part of the file size that needs to be tweaked is the number of pixels on the long side of the image. As mentioned previously, many website layouts cannot even accommodate an image with more than 1000px wide, so it is not necessary to bog down the load time with the large file.
Recommended image sizes:
Full width – 600px
Medium image – 300 px
Thumbnail – 100px to 150px
Vacation rental listing
HomeAway and VRBO – 1024px maximum, displays at 640×480 pixels
FlipKey – no guidelines listed, but go with 1024px maximum
Vacation rental property website
For owner sites powered by Web Chalet, they recommend sizing photos to 622px on the long side. Because of the layout of the pages, it is not necessary to go any larger.
The new Facebook layout has rolled out recently, with images only showing at 511px wide in the newsfeed.
With such a range of recommended sizes for different applications, what is the best size to use if you only want to size an image one time?
Go with the largest display size for where you post images. If you upload photos to your blog, to listing sites, and to Facebook, then the best overall size would be 640px wide. There is such a small difference in size to the other sites that it won’t make very much difference in the loading >time.
There are several programs that will resize images, including Photoshop, Photoshop Elements, Lightroom, iPhoto, and GIMP. Free web based sites include picresize.com and webresizer.com.
Now note that you also want your file size to be less than 1MB for faster loading time, with the preference to be as small as possible, even down to the 200kb range. Graphics and images with few colors will be even smaller in file size compared to a photograph.
Some graphics programs give an option for the quality of an image. In Photoshop, choosing a quality of 8 to 10 is perfectly acceptable for web resolution images. This also further reduces an image’s file size, sometimes by several hundred kb.
What happens if the image is smaller than the recommended size?
Then a web page may try to force the image larger. The resulting interpolation is not very pretty and can ruin an otherwise spectacular photograph.
Image size is not a fine line to walk, but more of a broad path. So breathe a sigh of relief and just size your images according to their use. Remember to use the web resolution of 72ppi and reduce the pixels on the long side. Your goal is a small file size well under 1MB.
The smaller images will result in faster load times and happier website visitors.
Tyann Marcink is a photographer in the St. Louis area. She and her husband Mike own two vacation rental homes in Branson, Missouri, and have hosted more than 3,000 guests in the past six years. Her eBook Create Killer Vacation Rental Property Photos – a How-To for Owners with Key Step-by-Step Instructions reveals the hidden secrets, the ancient myths, and the rock solid truths about vacation rental photography and how you can achieve the mysterious and elusive photos for yourself.