A quick guide to website images
Photos and other website images tend to be a breaking point on many web pages and involve a lot of misunderstandings. Often this is because what is optimal for your website differs from what is preferable for print. With the current state of widely varying screen sizes and resolutions, as well as the varying quality of mobile/wifi/fibre internet connections, images can greatly alter page load times.
Common Issues
Resolution
Something to keep in mind is that, whenever someone visits your website, they are actually downloading every photo to temporary files on their computers/devices. They don’t keep all of the images they download, of course, but this downloading of media does affect your website’s bandwidth and page load times (more on that later). This is where resolution and file size really become important. On websites, it’s best to start with a reasonably large, high resolution photo. Then, depending on the placement within your site, the photo should be scaled, perfectly, to fit the space it will be occupying.
Many people new to working with websites make the mistake of thinking that the image should be shrunk to fit its niche using the HTML or CSS of the website. The trouble here is that your image will take a long time to load within the space it is occupying, but won’t actually appear any more clearly than an image the proper size.
Images will look a lot nicer if they are scaled down from a higher resolution, rather than if they begin as a low res image. That said, the images don’t need to begin in a raw image file format or incredibly high resolution. We are not creating billboards. Computer screen resolutions larger than 2560 ⨉ 1600 are extremely rare. Including photos on your website that are that size or larger can actually be harmful in terms of the experience users have while visiting your website — especially if they are being squished into a 300 ⨉ 200 space.
Dimensions and cropping
It is also important to keep in mind the dimensions you are working with. Most cameras and, therefore, stock photos have a 6:4 aspect ratio. This means that common dimensions of images will be something like, 4500 ⨉ 3000 or 3600 ⨉ 2400 or 2400 ⨉ 1600. If you want to take an image with those dimensions and place it in a tall, narrow spot on your website or in a wide but short image banner on your landing page, the image will need to be cropped — sometimes dramatically. Some hero or banner images only have a height of around 300–400 pixels but have widths of 900–1000 pixels (to fit nicely on a widescreen). This means that the dimensions of your 6:4 photo will lose up to half its height, after cropping. When you are scouting for photos for your hero or banner images, look for images that can handle losing a lot of height but still maintain the focal point of the photo.
The image on the left would not fit well on a 1000 ⨉ 400 banner. The image on the right would fit much better.
Sometimes this can be dealt with by cleverly adding text to one side of an image to preserve the aspect ratio of the photo area but still have it fit in the banner. However, it is really tricky to do this in a way that isn’t noticeably fudging with the size. Let your designer/developer help you choose photos.
Licensing and copyright
It’s a really wonderful thing having lovely, artistic, high quality photos on your website. It would be awful if photographers stopped taking them because they couldn’t afford to make a living doing that as a career.
Unless you are a photographer yourself, it is important to respect the licenses from photographers and pay them fairly for the photos you want to use on your website. Photography is an art form and getting that perfect lens flare through the trees in the birch forest or the scenic vista of clouds off the mountain ledge is not easy to do.
It’s also important, however, to not waste your money on photos that don’t fit or won’t work well in your website design. Work with your web designer when selecting your website photos to make sure they will complement the design. It may be a good idea to have you or your developer select a variety of photos and then choose the ones that are the best fit. Once you’ve narrowed the selection down to the perfect set of photos, don’t forget to fairly compensate the photographer.
Size and page load times
Photos are rarely the only images on your website. Most website also have a selection of background images, buttons and icons. It may look stunning to have multiple layers of high resolution backgrounds on your website but the impact on your website’s load times will be devastating. You may think that no one has dial-up internet anymore, and with high speed fibre connections, even large websites can be loaded in seconds. Although that is generally true, these days we aren’t only talking about computers plugged into modems directly. We also need to consider smartphones and tablets on cell network plans with limited data. Browsing to a site with large images and hi-res backgrounds can be costly.
There are ways to compress backgrounds to keep your page load times down. It’s important to work with your web developer to plan for the best design for both you and visitors to your website.