Find and optimise images for your website

Find and optimise images for your website

Finding good images for your website can be a tiresome and difficult task. With so many stock libraries, royalty free images and budding photographers there is now vast choice but it can be just as hard to find great images.

In this guide we help you sort through you find the best sources for good images, give you tips on how to search for what you need and teach you a few simple techniques for how to edit your images to make them your own and keep your web pages loading quickly.

Chapters

  1. Using free images
  2. Purchasing stock images
  3. Creating impact with images
  4. Optimising images for the web

 


1. Using Free Images


Licensing, copyright & Creative Commons

Copyright law protects any original works of authorship from being used without permission. This creates a barrier between creators and possible users. In 2001, however, Creative Commons established a flexible structure for authors wanting to share their work with users. Creative Commons allow creators to choose from a variety of licenses for their work

“...licensed images can be used for any purpose, by anyone, anywhere around the world, as long as the user follows the terms of the license.“

- Creative Commons

There are many wonderful photographers who give away their images for free under a creative commons licence. If you want to know more about the types of licences from Creative Commons you can access them here. This (rather complicated) Creative Commons Infographic covers the different types of licenses.

In most cases, it is sufficient to credit the artist like this:

Below we’ve collected a list of places to find free images. The first 5 fall under the Creative Commons Zero Licence which means there is no need to credit the creator.

Creative Commons Zero Licence

The CC0 1.0 licence means the images are dedicated to the public domain and the creator has waived all legal rights to the work. There is no need to make any sort of attribution when using these images.

Source Description
Unsplash Multiple photographers
Still busy tagging all the photos - help them here
Boss Fight New images uploaded daily
Life of Pix Multiple photographers
Search images by content type
Fancy crave Well categorised and tagged
Downloadable content type photo packs
2 new images a day
Gratisography Well categorised
Wide selection of content

If you want more, Freely, JD Designs and Good free photos all offer images on a CC0 1.0

Creative Commons Licence - various

All the photos on the following two sites follow CC but you will need to check each photo’s particular licence.

Source Description
Wikimedia 25 million free media resources
Different images have different restrictions
Most allow you to use images without getting permission
Foter 190 million free Creative Commons images from many various online sources
Different attributions

The list to end all lists

We've sneaked this in it’s own category as it's a regularly updated and managed repository.

Source Description
The Awesome
Stock Resources
GitHub list
Contains resources from photography to video and vector graphics. Various attribution levels, follow each website’s requirements. Something for everything and everyone.

 


 
2. Purchasing Stock Images


High quality, relevant and carefully planned photography can transform a website, attract attention and direct behaviour.

Sourcing professional photography for your website can be a daunting and challenging task, especially on a budget. One of the first decisions to make is whether to commission a photographer or to buy stock photos. These are both legitimate solutions and each has its pros and cons. The main benefit of stock libraries is the large choice and low financial commitment.
Here are some tips based on our own experience sourcing stock images for our charity clients.

Define your image criteria

One of the big challenges with searching for stock photography is knowing what to look for. Defining your search criteria is almost always best done before you look at a single image.
Remind yourself of the concept you want to convey, talk with other people in your team and think laterally to open up different angles. A search engine is unlikely to be able to connect tangential concepts so if you don't prepare yourself you will get stuck in a rut looking at lots of similar images.

Example

For one of our clients we needed an image to represent ‘Labour Market Transitions’, a complex subject involving employment, school-to-work transitions, women returning from maternity, and retirement.
We short listed the following search terms before we started looking:

  • Interview
  • Women at work
  • Apprentice
  • Intern
  • Retirement
  • Young people
  • Employment
  • Agreement

This image was to be part of a set including 17 others so we also needed to factor in the characteristics of the other images. We soon discovered that the concept of ‘employment’ was common to many of the categories so we needed to focus in on other specific angles to make this image different. The search terms ‘young people interview’ returned the best results.

Look elsewhere to gain inspiration

Stock image libraries may be limited. It can be helpful to search Google for your image criteria first in order to gain fresh ideas as it’s by far the largest library there is. But remember you probably can’t use what you find on Google due to copyright restrictions. Just use it as a tool to help further stimulate your search criteria.

Create an account

There are plenty of stock libraries out there and most offer pay as you go options, which avoids big subscription fees. It still helps to create an account so you can easily shortlist images. We like iStockPhoto and Thinkstock for their helpful search functions.

Understand search criteria

Search on price

Stock photos can range widely in price and if your requirements are straightforward, there's no need to pay over the odds. Start by filtering out the most expensive tiers and work up as necessary.

Search on size

Most images in stock libraries will be plenty big enough for the web but if you want to use it in print as well, search on size. Get size criteria from whoever is designing your material and limit your search criteria accordingly. iStockPhoto now offers all sizes of an image for the same price but other libraries may not.

Search by orientation

You should restrict your search based on orientation (portrait vs. landscape). Portrait images virtually never work where a landscape image is required and vice versa so make sure you know which is most suitable in the context.

Search by copy space

Some stock libraries offer the opportunity to specify 'copy space' (the area of an image where you intend to add copy). This can be very useful but be warned that not all image have this metadata built in. Only use this if you already have a wealth of options based on your other search criteria.

Make shortlists (lightboxes)

A lightbox is the phrase used in most image libraries to refer to a short list or collection of images. As you browse you can save images to your lightbox (like a shopping cart) for review later.
You will often need to create an account to do this but it's worth the setup time to  ensure you're logging your findings properly. Don't be tempted just to drag sample images to your desktop to try out. It will be hard to find your favourite image again on the stock library in order to purchase the full version.

 

 
3. Creating Impact with Images


Images will have a big impact on your communications one way or another. Use these tips to help ensure your images are working well and having a positive effect rather than becoming a distraction.

Chose images that communicate a message

Images attract attention but if they are not well aligned with your message they can be a distraction.

Before using an image ask yourself a few questions:

  • What is the main point of your content in single sentence?
  • What is the most interesting nugget in your content?
  • How do you want the viewer to feel when reading your content?
  • Would this article be best illustrated with a photo, diagram or illustration?
  • Would it be that bad if you just didn’t have an image?

Maintain your brand identity

Always check your brand guidelines to make sure you’re not stepping too far off-piste. If you don’t have clear advice on image selection in your brand guidelines firstly, consider writing some. Secondly, just run a sense check on the nature of the image against your organisation’s mission statement, core values and other written guidelines.

  • Is your brand colourful and playful?
  • Do you normally use hard-hitting, moody imagery?
  • Do you prefer images with people, landscapes, concepts etc.?
  • Do you have an illustration style for diagrams and suchlike?

Use editing software

It’s good to get into the habit of editing images to keep them consistent and make them your own, but be careful not to overdo it. Stick to the basics! Here are a few reasons to edit images.

  • Keep your visuals on brand
  • Make space for overlaid copy
  • Adjust colour hue to suit your style or the point you want to make
  • Focus attention on a particular part of the image
  • Add impact with a dramatic crop
  • Add annotations
  • Optimise image size and format for the web

There is a lot you can achieve with free image editing tools, some of which come as standard with your computer. Simple actions like cropping an image to remove a distracting area or enhance certain colours can make a big difference to storytelling.

Both PC’s and Mac’s have basic photo editing applications built in. Here are a few resources for how to get the most out of them.

If you want a little more flexibility and control then here are a few more options.

Editing tool Notes Cost
Gimp Widely used, cross platform, open source image editor. Been around for over 20 years. Free
Picasa by Google Works well if you want to store and manage your photos with Google. Free
Photoshop.com Simplified version of PS available to use online. Go to Tools>Photoshop Express Editor Free
Fotor Has a special feature for creating Social media cover images and a mobile companion app. Free
Pixelmator A powerful image editor with painting, layers, masking and other advanced features. ~£10

 

 
4. Optimise Images for the Web


Here is a quick 4 step checklist to follow when adding images to your website.

Get the proportions right

Some image fields on your website or social media channels may crop your image to predefined proportions in order to display the image neatly with respect to the other elements on the page. Knowing these proportions will ensure your image is not cropped when uploading it.

Grab our Social media image templates to understand more about what happens when you add an image to a field with predefined proportions.

Get the format right

The three most common image file formats are PNG, JPG and GIF. Each has its advantages and disadvantages, and choosing the right one will depend on the content and size of your image. 9 times out of 10 JPG will work well but it’s worth knowing about the others too.

  PNG JPG GIF
High Quality Very good Good Poor
Transparency Yes No Yes
Colour depth Good Very good Poor
Can animate No No Yes
File size Very small Average Small
Summary Best for vector graphics, solid colours or achieving transparency Best for photos where there are lots of different colours Best if you want to create a short looping animation

Get the file size right

Modern cameras create huge photos. Despite improving internet speeds and higher definition screens there is still no excuse for serving unnecessarily large images on your website as they are the major cause of slow page load times.

Dimensions, format and image quality combine to make up the file size (in KBs or MBs) of the image. You can’t have everything so you need to balance these.

Most of the images on your website should look fine with these attributes:

  • Dimensions: < 600px wide
  • Format: JPG
  • Image quality: < 60%
  • This should result in a file size of < 100Kb, that’s good.

Full width banner images might need to be nearer 1200px wide but even these shouldn’t exceed 200-300Kb.

Give images good titles

When saving out your images, consider the title carefully. Think about what describes the image in context of the content and the website. This information can then be copied into the alt text field when uploading the image onto your site.

Alt text on images can improve your SEO and website accessibility. Get into the habit of always adding alt text to images when uploading online. This can be found in the image details section of the upload modal box.

Google uses this information when viewing your site images, and if for some reason your images don’t appear (e.g. low bandwidth), this title will appear next to the broken image icon. It is also used to explain images to visually impaired readers who are using a screenreader. Depending on the browser, some image titles or alt text fields may also appear as you hover over an image.

 

 

What next?


Now that you have your images sorted, it's time to get writing your copy. Our guide to Writing for the Web will help you create readable web pages to engage visitors and optimise your search engine ranking.

Subscribe to our newsletter to get the latest tips straight to your inbox.