Images have become an increasingly important part of web design. Think of all the areas of a site that commonly require images: homepage banners, product examples, blog post feature images, and much more. One might be tempted to provide their web designers with whatever snapshots they have sitting on their digital camera (or phone) because it’s cheap and easy. They don’t realize how this is affecting their appearance as professionals. Choosing the right photos can make-or-break your website’s overall appearance. A website with clear, high-quality photos looks polished and professional, whereas poor-quality photos do the exact opposite and can ruin a great design. There are a couple of things to keep in mind when choosing images. Below are some examples of photographic flaws you should avoid.
Images on a computer monitor are made up of tiny squares of colour called pixels. The amount of pixels in an image has a large impact on the quality of the photo. Small images have lower pixels counts, making them a bad choice for professional applications. The best practice is to use big images, and shrink them as needed. Below is a good example. The image looks okay if we’re using it at this size, but it is a poor choice if you want something bigger.
If bigger photos are needed, it can be tempting to resize them using an image editing software such as Photoshop. However, making small photos bigger can greatly reduce their quality. When images are stretched, the software must add in extra pixels to compensate for it’s new size. Unfortunately the result is blurriness, lack of detail, and pixilation. Below is the same small image above stretched bigger. Notice the loss in quality.
Photos taken in bad lighting come out discoloured and dark. Avoid images with a strong yellow or blue colouring, excessive flash, or shadowy subjects. To help avoid these issues, most cameras have settings for different types of lighting such as indoors and outdoors. Natural light is often a good choice when taking photos.
Blurry/ Grainy Images
A good image has crisp, fine details. Blurry or grainy photos really take away from the look of your website. Blur and grain are a common problem in amateur photography. They are often caused by poor quality cameras, low lighting or an unfocused lens. When taking photos for your website, make sure your camera lens is clean and in-focus. See below for examples.
Good photos are well lit, and grain-free. The subject matter is in focus, and fine details are easy to see. Large photos are ideal, as they can be made smaller to fit your needs, without compromising quality. Notice how the photo below has crisp details and even lighting.
Should you have a logo to incorporate into your website, it is ideal for you to have a vector version available. Vector images have the advantage of being scalable: they do not lose quality whether they are made bigger, or smaller. Vector files will commonly end in “.ai”. If your logo was created by a graphic designer they should be able to provide you with the vector files. Below is an example of what a vector logo (on the left) looks like compared to a normal raster jpeg (on the right). The vector image is based on mathematical expressions instead of pixels, so it looks sharp regardless of being scaled or stretched.
I cannot stress enough how important it is to choose high quality images for your website. It can be a good idea to spend the extra bit of money to hire a professional photographer to ensure your images reflect the value of your business. If that is is not an option, take the time to really learn the ins-and-outs of your camera, google lightings tips, and set up a good shot before hitting the shutter button. The extra bit of work will really pay off in the end.