Best practice for adding images to your website

best practice to add images to web

Just as every book benefits from an eye-catching cover, every good blog needs an accompanying image.  If you want your blog to be noticed and read, an image is critical. 

Three good reasons to include an image with your blog:

  1. The blog image directly affects the social shares, clicks and therefore traffic to your site.  The best performing posts on social media will have an image rather than plain text making it more attractive and engaging to readers.

  2. The image can help with the search engine rankings. If you follow the simple guidelines below for uploading your image correctly, it can provide the search engines with important contextual information. 

  3. It completes the blog – a complementary image helps get the message of the blog across and makes the information easier to remember.

Here are 7 tips for adding images to your website blog:

1. Use the correct file format

Use an image (or create and save your image) in a web friendly file format.  The standard file formats for web images are PNG, JPEG and GIF. Ideally, you use JPEG (or JPG) for images with lots of colour and PNG for simple images. 

2. Resize your image

Large images can considerably slow down your website.  While they work well for print, you need to scale down the file size without losing too much quality for them to work well on the web. 

As a rough guideline for most ‘full page’ web images, the image should not exceed 80Kb-100Kb. If the image is only part of a page (e.g. half the width of a blog post), then 20Kb-30Kb is usually fine.

If you’ve selected your image and the file is large (over 100 KB) you can reduce the size by using a simple free image resizing tool. You might already have a resizing option built into your photo editor or app. Many image-editing tools, including Adobe Photoshop, have a “save for the web” option, which automatically minimizes the file size while optimizing image quality.  Alternatively check out tools such as gimp imageresize or easy-thumbnails

3. Optimize image file names

Choosing the right file name is important for your page SEO and for ranking in image search results. Before uploading any image, name the file with relevant, descriptive keywords. Include target keywords at the beginning and separate them with hyphens. File names should make sense to both search engines and humans. For example, the original name for an image of a cake might be “DSC01091.jpg.” Rename it with a clear and more descriptive title such as “homemade-cake-petersfield-cafe.jpg.”

4. Use alt tags

Fill in the alternative text field when you upload the image.  Without it it’s impossible for search engines to accurately index your image content. It provides context and helps visually impaired users too. For simplicity keep the alt text the same as the file name i.e. homemade cake Petersfield café.

5. Blog image sizes for social media

The size doesn’t matter. It’s the shape of the image that counts. The social networks automatically resize photos for their social streams.  As long as the image is roughly twice as wide as it is tall, it will look fine on every social network.   A simple rule is to make your blog images the full width of your blog’s content area (usually 600 or 650 pixels wide) and half as tall.

6. Use images that won’t get you sued

There are plenty of good free photo sites.  Two of my favourites being pixabay and freepik. You can also use search tools on Google images or Flickr to filter for images covered by the Creative Commons license.

7. Create your own image

Ultimately there’s nothing better than creating your own unique image (unless of course you have the budget to pay someone else to do). There are numerous free and cheap ways to create images, from your own camera to meme generators, infographics and gifs.  Here’s a great article that covers all of these in more detail.

So get going and liven up your blogs with some images.  And don’t forget to go over older blog posts as well and add missing images.  It does them good to have a refresh if the content is still valid.

So now I need to find a good image to go with this blog…here goes…… kittens or puppy dogs??? Ok, so maybe my image didn’t rank well on the relevance but it was an original image and it did score on cuteness….did I mention that as another good point.