Formatting Images, Graphics & Logos For The Web

Introduction

Learning how to prepare images & PDFs for the web is time well spent as poorly formatted images can really slow your website down.  So please name your images very carefully as the image names can also affect your position in search engine rankings.

They should be relevant, meaningful, unique and not too long.  Incorrect names can also stop your website working if it is database driven.   And they should be SEO friendly. If Google bots see a correctly named image they will be more likely to rank your website.

Image Optimisation

Please also bear in mind that large file size images can seriously slow your website down.  Make sure you optimise any images before adding them to a website.   The ideal software for achieving this is Adobe Photoshop, though there are plenty of other programs around. If you do not have graphics software we can edit images for you.  You will need to purchase our ‘Optimising Images‘ Extra.  Or you can use an online editor such as http://ipiccy.com/

When you optimise them make sure you also set the resolution to 72 pixels/inch.   And, depending on your graphics software, set them to the lowest quality image that will still look clear online.

For most of the images on a website the image format we require is .jpg.  With the exception of images that require some transparency within them, such as a logo over a background colour. In those cases the image format needed is .png    

We will give you the image sizes that we require for your project. Creating the correct size image from a full size photograph will require cropping rather than resizing. Cropping will give you the correct image proportions. Resizing will likely distort the image.

Image Enhancement

We recommend that website images should be your own photgraphs where possible. Whether you or an external photographer take the photographs, be aware that dull images will look dull on the website.

Where possible enhance your images before sending them to us. Make them bright and colourful as appropriate, atmospheric and sunny if outside in daylight etc.

Preparing Images For The Web
The examples above are just for illustration.

SEO For Images

More often than not, the intent of a website is to be found by search engines. Which in turn means it will be found by your target audience.

When naming your images to help with search rankings make sure they are named according to the SEO Focus Keyword for the page/post/category they are to appear on.   The table below is a rule of thumb for naming your project’s images. If you have taken our SEO Research Audit & Strategy Report extra then you will be fully aware of the key words that need to be incorporated per page.

Every page in your website needs its own SEO key word. And, for the search engines to feel your page is good enough to return as a search result, the images on said pages must include that SEO keyword in them.

Formatting PDFs

When naming a PDF please use a – between words rather than a space.  For example: use ‘new-important-document.pdf’ not ‘new important document.pdf’.

The former will create a URL like this:

new-important-document.pdf, which is Google friendly.

Whereas the latter may create one like this:

new20%important20%document.pdf, which is not Google friendly.  

PDF documents can be quite large so please make sure you do what you can to minimise their size.  The method for this will depend on what type of computer and which software you are using.  Here is an online guide that may help, otherwise you can do a Google search for ‘reduce pdf size online’.   

Page Contents

Next Event

Latest Articles

What Is Professional Web Design?

New Small Business Website Starter Package

Are You GDPR Ready?

View Our 
Our GDPR Policy

This site uses cookies; small text files that are placed on your device to help the site provide a better user experience. No personal information is collected.