Images are really important in blog posts – but don’t just take our word for it. In fact, there’s a reason why people say ‘a picture is worth a thousand words.’
Buzzsumo took over a million pieces of content and analysed them to look for trends. Turns out, blogs with at least one image got shared almost twice as much as ones without.
But that’s not all. UX experts agree that using imagery or graphical information is vitally important – not least because our brains crave imagery to actually make sense of the world. You might be surprised to hear that we get up to 90% of our information through visual means.
Images can encourage an emotional reaction, too.
Look at the image below. What do you feel?
Now, look at this one.
Did you feel any emotional response?
There are a number of options when it comes to finding images for your webpages. This guide will cover some of these that you might want to consider.
The main thing you need to consider is permission. Do you have permission to use this image from the original photographer, or from an agency representing the original photographer?
If you don’t, you shouldn’t use the image. It can get you into legal trouble, as well as being bad for your brand image.
Unsplash.com is a site you can find high-quality imagery on a variety of topics. Credit to the artist is preferable, but not always necessary.
Pexels.com is a site similar to the above. They are free-to-use images – however once again, credit is preferable.
stokpic.com is another website that has free images available for commercial use.
Flickr.com There are some images you will be able to use from here – however, you need to check the license before you do. When you search for an image, you can filter by ‘commercial use allowed’.
There are numerous payment models and options to suit a variety of budgets and personal requirements. We’ve listed a few examples below:
Envato Elements works on a monthly subscription model – however, you have unlimited access to a large library, with no limits on downloads.
iStock is one of the biggest and most affordable stock photo sites with a massive range of imagery. They offer a couple of different pricing models – however, the most popular way is to purchase a set number of credits. You purchase the photos with the credits – therefore the higher the photo quality, the higher the credits.
Adobe Stock is very similar to above – however, this operates on a monthly payment scheme that gives you a set number of downloads per month. The quality of the imagery is very high.
Getty actually own iStock – however the photos Getty sell are of a much higher quality, and are sometimes exclusive.
There are also more specific stock sites that have more of a niche offering such as the below:
http://www.fotoarabia.com/ – is an example of a site specialising in Middle East specific imagery.
You may have to tell the stock site where you intend to use the image, they will then quote their price accordingly.
For example, if you intend on using an image for an international advertising campaign, it’s likely to be a lot more expensive than if you were doing a small print run that will only be seen in the UK.
There are a number of different types of imagery you could use.
We’ve listed some of the most popular ones below to get your creativity flowing…
Photography is still imagery that is taken with a camera or camera phone. There are many different styles of photography you could use – ranging from black and white to action shots and abstracts.
Photography is a good choice for imagery if you want something more ‘real’ – especially if you want people in your imagery.
Illustration can be used as a visual representation of text, or simply for decorative purposes. You might find illustrations used in posters, books, educational material, and as a pre-made asset for animation.
Illustrations can be created in many different types of media, including traditional, digital or mixed media – and each can create different effects and can be made in a huge variety of styles.
Infographics are usually in the form of an illustration. They present information in a clear, visual way which is usually easier to understand as it breaks down heavy information into smaller chunks.
It can also convey information faster. In road signage, for example – an image of a skidding car grabs more attention and relays the message faster than a block of text explaining ‘this is a slippery road, your car might skid in bad weather’.
Cinemagraphs are a relatively new form of imagery. They are created by taking a series of images in close succession when the main focus of the shot is moving. This can then be edited so only certain elements of the image move.
Alternatively, a video recording can be taken, and this footage is then edited to remove some of the secondary movement. They are usually created for a short sequence that loops and repeats, which creates a slightly creepy contrast between the small movement and the complete stillness in the rest of the image.
There are even more great examples of cinemagraphs here
CSS (cascading style sheet) animation is used for animation on webpages and is most commonly found on landing pages. From anything as subtle as a highlight when an object is hovered over, or a full page animated scene, it can guide a user’s actions, utilised for explainer videos and tutorials or just to bring more life and personality to a page.
Webpage animations can be static – simple with no interaction or can be coded to interact with the user. This can have different outcomes depending on what the user actually does.
Here’s a great example on codepen of how this can be achieved:
There are a few different formats you might want to use for web-based projects. Here’s a rundown of each one…
Pronounced ‘gif’ or ‘jif’ depending on whether you believe most of the world or the creator of the format himself. It stands for ‘graphics interchange format’ – so my money is on ‘gif’.
GIFs are useful because they can be compressed down to really small sizes, as well as having transparent areas. They can also be animated.
The downside of GIFs is that the colours and quality can look quite poor if the image is compressed too much.
JPEG stands for Joint Photographic Experts Group (it’s highly unlikely that you’ll need to know this again unless you’re doing a pub quiz).
JPEGs are a great all-round format for images. They can be compressed well without losing too much quality, and they work on all sorts of browsers and devices without any problems.
The only downside to JPEGs are that you can’t have transparent areas in your image.
Trusty Portable Network Graphics, or .png as they are more commonly known. Unlike JPEGs, they can have transparent areas, which makes them great for things like logos that you may want to put on different background colours.
PNGs can be one of the best quality image formats, unfortunately that means they tend to be a larger file size than other formats, which can slow your site down. More on that below.
Scalable Vector Graphics are wonderful if you know how to create/use them properly. As the name suggests, they are vector images that can be scaled up or down depending on the size needed, without losing quality.
Many websites tend to use things like logos in SVG files nowadays as the logo will remain crisp, regardless of the device it’s being viewed on.
Best practice guides say your website should take no longer than 3 seconds to load.
Google’s mobile-first indexing tests all websites based on a 3G phone connection speed because they estimate by 2020, 70% of mobile network connections globally will occur at 3G. It suggests that pages should be under 500KB in total size load however they found the average pages were over 2500KB in size.
One of the largest factors of large page loads was images.
For example, a single small image can be 100KB in file size where a CSS or JS file can be around 10KB.
So how do you optimise your images for web?
The above image is nothing out of the ordinary for a website – a single 1024 x 683 pixel image resized in a JPEG (.jpg) format. Its file size however, is rather large at 688KB.
This is larger than Google’s recommended 500KB total page size – so let’s look at how we can optimise this image for your website. The same optimisation methods can and should be used for all your images.
Selecting the correct image format is crucial. Ultimately, it depends on what you are trying to achieve.
For example, as we learned above, if you need an image to have a transparent background you can use a PNG or GIF file format. JPEG images won’t work.
However, if you are wanting to serve fine detail with the highest resolution with more than 256+ colours then PNG-24 is the way to go. Less than 256 colours and you can use PNG-8 format.
If you wanted to compress an image to get the maximum loss in file size but maintain the quality, then JPEG would be the best option. JPEG image compression uses a combination of lossy and lossless optimisation to reduce file size.
Lossy compression will reduce on average about 60% file loss. Sometimes, even as much as 80% can be saved on your original image – however, image quality degradation does occur. For best results, you may have to optimise an image on an individual basis to get the best file size loss vs quality.
Lossless will typically save around 10% of a file save as it does not alter any pixels within the image. This method should be used if you want to retain the original quality of your image – for example logo’s and brand relate.
We grabbed our test JPEG image of 1024 x 683 at 688KB and ran it through some online image optimisation test to see how they compared.
It’s worth noting that we used the lossy compression method – and whilst some of the websites had the option to change the quality or the amount of compression, we typically used the default settings.
The results below show the file size, the size in loss and then the download speeds under 3G connection speeds. Don’t forget this is how Google indexes your website now, using 3G speeds – so optimising your images is vital.
|File Size||Size loss||Slow 3G Download Time*||Fast 3G Download Time*||Avg 3G Download Time*|
|Original image||688KB||N/A||15.76 Seconds||4.34 Seconds||10 Seconds|
|Tinypng.com||149KB||79%||4.92 Seconds||1.47 Seconds||3.2 Seconds|
|jpeg-optimizer.com||109KB||84%||4.2 Seconds||1.16 Seconds||2.6 Seconds|
|kraken.io||301KB||56%||8.4 Seconds||2.2 Seconds||5.3 Seconds|
* We tested load speeds using Google Chrome’s Developer Tools, Disabling the Cache and enabling Network Throttling. Developer Tools 3G load times emulate real conditions of a slow and fast 3G network connection actually feels like and is benchmarked against other industry standard testing tools.
You can see from the above table that you can save a considerable amount of file size by simply uploading and downloading your image instantly with very little effort.
It’s also quite daunting to see the load times on a single image bases.
You can take it one step further by experimenting with the level of compression when optimising your desired image. But as mentioned above, this should be done on a trial and error basis while deciding just how much compression vs quality should form the final image.
We hope this guide has given you some insight into using imagery on the web, but if you have any comments or questions please leave them below and we’ll get back to you.