2019-10-07
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 analyzed them to look for trends. Turns out, blogs with at least one image got shared almost twice as much as ones without. You can read more about the research in Noah Kagan’s write-up.
Image Source
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?
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 think about 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 is a site where you can find high quality imagery on a variety of topics. Credit to the artist is preferable, but not always necessary.
Pexels.com is similar to Unsplash. The images are free-to-use. However, once again credit is preferable.
Stokpic.com is another website that has free images available for commercial use.
Flickr has some images you will be able to use. However, you need to check the license before you do. When you search for an image, you can filter by ‘commercial use allowed’.
Pros of free imagery
Cons of free imagery
There are numerous payment models and options to suit a variety of budgets and personal requirements.
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 but the most popular way is to purchase a set number of credits. You purchase the photos with the credits – the higher the photo quality, the more credits you use.
Adobe Stock is very similar to iStock. 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 sells are of a much higher quality, and are sometimes exclusive.
There are also specific stock sites that have more of a niche offering such as arabianfoto.com, which specializes in Middle East-specific imagery.
A note on license agreements
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 one country.
There are a number of different types of imagery you could use. We’ve listed some of the most popular ones below:
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 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 that 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 weat
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. They 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. You can see 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. Therefore, CSS animation is often utilized for explainer videos and tutorials or 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.
There are a few different formats you might want to use for web-based projects. Here’s a run down 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. They 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 is 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 three 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 optimize your images for the 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 optimize this image for your website. The same optimization 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 filesize but maintain the quality, then JPEG would be the best option. JPEG image compression uses a combination of lossy and lossless optimization to reduce filesize.
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 the best results, you may have to optimize 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.
We grabbed our test JPEG image of 1024 x 683 pixels at 688KB and ran it through some online image optimization tests 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 optimizing your images is vital.
* 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 what 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 optimizing 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. Good luck with your next creative project.
Sources
machmetrics.com/speed-blog/average-page-load-times-websites-2018
thinkwithgoogle.com/intl/en-gb/consumer-insights/mobile-page-speed-website-load-time
uxmatters.com/mt/archives/2012/03/mobile-first-what-does-it-mean
developers.google.com/web/fundamentals/performance/why-performance-matters
Japan Airlines launches the "You Mean the World" campaign, featuring Liverpool FC players, to celebrate the spirit of omotenashi and deliver exceptional travel experiences.
Read News
Share of Model™ Platform a single-view interface enables companies to analyze how different Large Language Models (LLMs) perceive their brands, products and services. Helping brands optimise for stronger AI-driven results.
Read News
M&S was looking to expedite content delivery of product descriptions from 24 hours to same-day turnaround and realise savings in their annual production budget.
See Case Study