In general, when I’ve been building websites, one of the more common difficulties I’ve come across is obtaining content from clients to complete their websites. Of the content that I do receive, the hardest items to get a hold of tend to be hi-resolution images. How your content looks and is organized is an essential factor to a site’s success.
As visual creatures, when we see sites with poor images, we tend to think less of them.
Images are not solely for decoration. Poor images negatively impact your user interface/user experience (UI/UX), website conversion ratio, how long people stay on your site (affecting your SEO), and, if you’re using a site for business purposes, it can affect your credibility.
So without further ado, here are a number of things to think about when choosing images that reflect your brand to use on your site.
First and foremost….Quality. The image above is a little exaggerated, however it highlights an important point: Large, hi-resolution images are always best. It is always easier to scale a large image down than the other way around. Taking into consideration that your layout may have images of different sizes, being consistent with the size and quality of your images will ensure that no matter where they are placed, they look good. Imagine trying to use a small image for full width banner which brings me to my next point….
Image Size and Aspect Ratio
Choosing high quality images for your website is just one (albeit very important) piece of the pie. You also need to consider how they’ll work with your layout. Enter image size and aspect ratio.
Image size is how big or small the image is on a page. In general, you will want your images to be large. By large, I don’t mean megabytes or the file size. By large, I mean 4000 x 3000 pixels. You can always maintain quality scaling down…images become blurry and pixelated as you scale up.
Aspect ratio is the proportional relationship between width and height, or in other words it’s shape. For example, most images taken are not in a perfect square, however, the shape that holds the image in your layout may be a square. Which is something to consider when choosing an image. For a much more in-depth look into image size and aspect ratio, check out this amazing article from Callia Web.
How do these effect what images you choose? Well, in many websites nowadays there are a multitude of ways of displaying images. From banners, to slideshows, to carousels, to team pictures, to galleries and albums. And very rarely do images displayed conform to the standard image size we’re used to (that good old 4×6 picture). Rather, they are stretched, or only part is shown. In order to have consistency across a slideshow, images tend to have to be of similar size and orientation (landscape or portrait). Taking some examples from the article above, check out the images below.
As you can see, the first image is compatible with the space that it would need to fill, whereas the second image is not. This becomes far more important when that space is holding multiple images, as in a slider. Then, you need to be conscious that all of the images are compatible with the space or you end up with a slider with mismatched imagery. This makes your site look unprofessional and ultimately robs the plugin of its power to show off your work/images.
Brand Relevance (Who are you and does your image represent this?)
One further aspect to think about is brand relevance. Who are you and do the images on your site represent your brand? This is especially important when considering things like a header image. See the image below.
The header image clearly represents what Bread Box’s (http://www.breadboxsa.com) brand. It is attractive to the user, high quality and draws the user in to the site further. When picking images, branding is very important. Sometimes you may want to go a different route in choosing…picking an image that has a specific draw or function. Which brings me to…
Image Relevance (What do you want this image to do?)
Sometimes your images will need to be things that are actionable, things that draw the user to click on said item. Examples of such are blog or article photos. This is most commonly seen via clickbait on the internet, often accompanied with something like, “You’ll never believe what happened next!” or something along those lines. In these cases, the image draws the user’s eye to want to explore further.
Check out a glimpse of Nike’s homepage. Notice how not only do they have brand images for their shoes, but action shots that drive a user to want to purchase more products. The basketball shots aren’t necessarily the brand, but are relevant to the selling of it…the user can envision themselves as the people in the images. Ask yourself, what do you want this image to do and you’ll have greater success.
I wanted to touch on logos here. It’s not fully like picking an image for your site, but it is something that requires some attention. In the creation of a website, you will need at least two logo images. These should be png files and have transparent backgrounds. The reason for using a png file is that they are lossless. What this means is that you can make them large or decrease the size without a loss of quality. Whereas all of the other images I’ve talked about will generally be jpg files, which are ‘lossy’, meaning they lose quality as you increase them. One should be large and clearly display your brand or title and one should be a favicon. A favicon is the little icon associated with a URL that is variously displayed. E.g., a browser’s address bar or next to the site name in a bookmark list. Make sure your designer provides these to you to provide to your developer.
Hopefully these have given you a number of things to think about when choosing images for your site. In my opinion, while phones nowadays take quite good photos, for the purposes of your business website, it is best to use a good quality camera and put in some effort in capturing the essence of what it is you want your customers to take away from these photos. Hi-resolution stock photos can also work, though it is possible that someone else may use the same photos on a different site, so it is generally best to be the sole owner of your content.
Think of an image as a key component of your website’s success and you’ll be able to choose the right images. Make sure you identify the kind of images you will use at the conceptualization stage itself. Best of luck! Now go and make your site pop!