7 image tips to make your website better
You probably think there’s nothing complicated about website images. Just find one you like, upload it, and you’re done, right?
Wrong.
Like so many other aspects of running a business, there’s a lot more to images than meets the eye.
I’ve put together the following list of tips to help you understand what you need to do to make the images on your website look great.
Pay attention to colour
If your website colours are orange and blue, an image that is predominantly purple might not look so great. Pick images that complement your website colour theme.
Stay sharp
Photos that are even a little out of focus make your site look unprofessional. So make sure to use crisp, sharp images.
Now, I’ve noticed a trend over the past few years towards what I call the “fuzzy look”. These are photos that are fuzzy on purpose, to make the image look softer. The theory seems to be that such images look more natural and are more pleasing to the reader.
Personally, I am not a fan of this look. To me it usually just makes a site look amateurish. I do think there could be certain industries or situations where it might work, but generally I recommend staying sharp.
Make your images very small
When we talk about image size, we are referring to the size of the file (in KBs or MBs). Getting the size right is crucial because it has a direct impact on how fast a webpage loads: the larger the file, the longer it takes. If you have several images on one page, each adds to the total loading time.
Large image files mean it could take many seconds for your page to load. And you definitely don’t want that. Here’s why.
53% of visits are abandoned if a site
takes more than 3 seconds to load (1)
I live this every day. If I have to wait more than a few seconds, I hit the back arrow and go to another similar (competitor) site, hoping it will load faster. A long loading time is a great way to lose potential customers.
So, how small should your image files be? Way smaller than most people realize—less than 100 KB each. In general terms, that’s really small. For comparison, most digital cameras these days create image files that are between 3 and 6 MB. That’s at least 30 times larger than what you want to end up with for your website.
The reason camera files are so large is that they contain a lot of information. A printed version of such an image typically contains thousands of coloured points in each square inch. All those points are one of the main things that makes a photo sharp. It also makes the photo file large.
So, in order to get your image small enough, you need to compress it. Compression is a special process that removes some of the detail points in such a way that the overall quality of the photo is maintained. However, if you remove too many points, the image will eventually appear blurry. So you want to compress the file as much as possible, but not so much that the quality of the image suffers.
You can compress a file using programs such as Adobe Photoshop, but there are also free online tools you can use such as TinyJPG and CompressPNG.
To make it even easier, stock photo sites nowadays typically offer images already compressed. That not only saves you work, it usually saves you money too. These “smaller” files are usually cheaper than their full size counterparts.
Start with high resolution images
You may have heard the term “high-res”. The “res” is short for resolution. Resolution refers to the amount of colour detail points per square inch. The more points, the higher the resolution, and therefore the sharper the image.
Resolution is measured in pixels across the total width and height of the image, not as per inch (e.g. 1200 x 950). Resolution and file size are related. The higher the resolution, the larger the file. That’s great for printed images, but on a webpage it’s a huge problem because the file is so big.
The best way to ensure your web images are sharp but also small is to start with an image that has a high resolution and then compress it to make the file size smaller. Compression tools are specifically designed to remove colour points in such a way as to still make the image look sharp.
So start with a high-res image, and then reduce the resolution intelligently using compression.
Optimize for mobile
In the olden days, most people surfed the net on desktop computers. But nowadays most people use a phone. The problem is that the same image that looks great on a desktop monitor might not look so great on a phone.
This is because desktop computer screens are wider than they are tall, whereas mobile phone screens are the opposite—taller than they are wide. There is just no way for your phone to display the entire width of a website that was designed for a desktop screen. It will try, but various elements will be moved around, squished together, or cut off.
The solution is what is known as “optimizing for mobile”. This means creating your website in such a way that it looks good on both a phone and a desktop.
The good news is that many website creation software programs do this for you automatically. There are, however, a few things that you need to pay attention to. I will cover the whole topic of optimizing for mobile in a future article, but here are a few tips related specifically to images.
Choose images that look good on both a desktop monitor and a mobile phone (upload the image and check it out on both types of devices).
Put elements on top of each other, not side by side. One of the main ways mobile phones rearrange website elements is to put any that are side by side on top of each other. For example, if you have an image with a paragraph of text beside it, a phone will display the photo with the paragraph underneath (or the text on top with the image underneath). If your site has elements that are stacked on top of each other to begin with, your phone will do less “rearranging”.
Pay attention to file type
There are two main types of image files that are commonly used on websites: JPGs and PNGs. Sometimes you need to use a JPG file, sometimes you’re better off with a PNG file.
JPGs are the standard if the image doesn’t contain any text. They are smaller than PNGs, which is great for ensuring your file size stays small.
However, if your image DOES contain text, then you want to make sure you save it as a PNG file. This is because JPG files make text look fuzzy. PNGS on the other hand do a better job of keeping text crisp.
However, that extra clarity means the file size is larger. It can be a bit tricky getting a PNG image to be small enough to load quickly on your site. One way to get around this is to remove the text from the image altogether. Instead, upload the image in JPG format (without any text) onto your site, and then use your website builder to create a text box that is laid over top of that image.
For images that need to have text, you may have to play around with several versions of the file. Try compressing it by various amounts until you come up with an image that is small enough, but still looks good on your site.
Always test your site on desktop and mobile
Don’t upload an image and assume it will look good. Visit your website on both desktop and mobile to make sure the image looks good on both.
So there are my 7 tips to improving the images on your website. Try using these as a checklist to improve your webpage. Remember, the nicer a site looks, and the faster it loads, the more likely a potential customer will stay on it.
Cheers,
Tim
Helping you engineer the business of you
(1) https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/consumer-behavior-mobile-digital-experiences/