Where to Find Great Pictures and How to Use Them 

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.

shares with or without images - buzzsumo

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? 

puppy

Now look at this one.

 drinks

 Did you feel any emotional response? 

 

Where Can I Find Imagery for My Blog? 

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 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. 

 

Free Imagery

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’. 

 

The Pros of Free Imagery
  • Images are free.
 
The Cons of Free Imagery
  • The free sites don't have the same range of imagery as paid for sites, therefore you might struggle to find what you're looking for.
  • A lot of other sites might use the same images as you do, so you don't stand out from the crowd. 

 

Paid for Imagery

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.

 

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 the UK. 

 

What Type of Image Could I Use?

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... 

 

Still Imagery

Photography

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. 

 


Source: https://unsplash.com/photos/GDSbNg4kuwc

 

Illustration

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.

 


Source: https://en.wikipedia.org/wiki/Illustration#/media/File:1916_Western_Engraving_ad_02.jpg

 

Information Graphics

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’.

 

Source: https://commons.wikimedia.org/wiki/File:Marine_megafauna_Infographic.jpg

 

Dynamic or Moving Imagery

Cinemagraphs

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.

https://commons.wikimedia.org/wiki/File:Babboons_Cinemagraph.gif

There are even more great examples of cinemagraphs here 

CSS Animation

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:

 

What Type of Image Format Should I Use?

There are a few different formats you might want to use for web-based projects. Here’s a run down of each one...

 

GIF

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

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.

 

PNG

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.

 

SVG

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.

 

Optimising Your Images for the Web

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?

 

Source: https://www.jamespictures.co.uk/ 

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.

 

Choosing Image Formats for File Size

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 optimisation to reduce filesize.

 

Lossy

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

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 your original quality of your image – for example logo’s and brand relate

 

Online Image Compression

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.

 

Sources:

https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/

https://www.thinkwithgoogle.com/intl/en-gb/consumer-insights/mobile-page-speed-website-load-time/

https://www.uxmatters.com/mt/archives/2012/03/mobile-first-what-does-it-mean.php

https://developers.google.com/web/fundamentals/performance/why-performance-matters/

 

Resources:

https://testmysite.withgoogle.com/intl/en-gb

https://developers.google.com/speed/pagespeed/insights/

https://www.thinkwithgoogle.com/feature/mobile/

http://www.calctool.org/CALC/prof/computing/transfer_time

 

 

 

June 5, 2018|

About the Author:

Design Team
The Design Team at Latitude, including James Pedlar, Elaine Hawkins and Emma Rose