‘An image speaks a thousand words’ - this really does hold true on the internet. We much prefer to consume content online in image form, rather than text (obviously this saddens me, as a writer, but the evidence backs it up!). 

Which is why images are the number one thing that will make or break your website.

Think about it – if you visit a website and the images are blurry, poor-quality, teeny tiny or cropped badly, your immediate impression of that website is a bad one.  

Whereas if you visit a website and the images are professional, high-resolution, in keeping tonally with the rest of the content and cropped to fit the page properly, you come away feeling that the website has been put together with care and attention.

Professionally presented images show that the author takes themselves and their work seriously.

Images are often an area where author websites let themselves down. You’ll find images that are haphazardly arranged, with a mis-matched variety of sizes and aspect ratios. They look ‘plonked’ on the page, rather than harmoniously fitting in with it.

Other common crimes relate to file sizes: images that are too small thus pixellating badly on a bigger screen, or so huge that the page takes ages to load.

All these are avoidable mistakes – it’s so easy to get this right and has such a big impact on your website. 

So in this post I’ll run through my top tips on formatting your images for the web.

1 Resize your images before uploading them

This is something a lot of people forget to do. Each image file on your website should be under 500KB in size, otherwise they will slow down your website. The longer your site takes to load, the more likely people are to leave it in frustration. This can be a real problem if you have multiple images on a page, all of which are big files.

It’s also particularly important now that more than 50% of web traffic comes via mobile devices, where internet connections are often weaker, making it even more crucial that the files on your site aren’t huge. 

Google will also view your site negatively if it’s slow to load, which will affect your position in search engines.

The ideal image width is between 1500 and 2500 pixels. Any smaller, and your image might appear blurry on bigger screens.  

Good to know: Squarespace will automatically resize any images larger than 2500 pixels to 2500.

Reducing the quality (resolution) of your image allows you to retain the 1500 pixel width while still keeping the file size under 500KB.  

There are plenty of programs you can use to resize images, but if you don’t have Photoshop or similar, you can use a web-based image editor such as Adobe Crop Photo, ImageResizer.com or Tinyjpg.com to make sure your images are the right size.

2 Choose an appropriate aspect ratio

The aspect ratio of an image is the width:height.

There are several common aspect ratios, eg 3:2, 1:1 (square) and 16:9. Choose the aspect ratio that makes sense for the image, and its position on the page.  

For example, you probably want your headshot to be standard portrait size (2:3) but for your blog posts you might want to use images that are square.  

I personally upload all my blog post images as squares, as I like the simplicity, and most images can be cropped as squares quite happily.

Keeping them consistent also means that when all my blog posts are listed on my main blog landing page, they line up nicely. It’s little details like this that will take your website from looking amateur to looking pro. 

You can read more about aspect ratios here.

Watch my FREE training on how to build your own author website →

3 Pick the right file format

There are two main formats used for images on the web: jpegs and pngs. Generally speaking, jpegs are used for photographs, while pngs are used for graphics such as logos, and anything with writing on.

The main differences are: 

Jpegs are generally smaller files than pngs as they compress images by ‘losing’ some of the data. Which can mean that some of the detail (colour density etc) in the image is lost. Generally speaking however, jpegs will be the best choice for the images on your author site. 

Pngs use ‘lossless’ compression, which makes them better if you want to retain detail in the image. Pngs also allow transparent backgrounds, which is great if you have graphics or logos on your site. The downside is that pngs are often bigger files than jpegs.

In most scenarios you will want to use jpegs on your author website in order to keep page sizes to a minimum.

4 Name your image files appropriately

One of the most important things you can (and should!) do with the images on your website is name them correctly.

It’s such a small but crucial step, and it has a big impact on your SEO (search engine optimisation).

Basically, when Google scans your site, it will look to image file names as well as your ‘alt text’ (the labels on your images) to determine what the images are of.

If the image is called something like ‘639374.jpg’, Google won’t have a clue what it’s looking at, and so this is of absolutely no help to your SEO. 

Whereas if you name your image something like: Charlotte-Duckworth-The-Rival-Cover.jpg, Google will know that this is an image of the cover of Charlotte Duckworth’s The Rival (sorry for the narcissistic, unimaginative example there!).

Which means when people are searching for The Rival, Google will display the image for them (and lead them to my site - nice eh!?).

You can rename your image while you’re saving it after resizing.

Here are some best practice tips for image naming:

1. Be descriptive and helpful. How would you describe this image to someone who couldn't see it?

2. Keep the text short and succinct.

3. Incorporate keywords where possible – the words you think people searching for a website like yours might use.

4. Leave out words like "the" and "a," and terms like "photo" or "picture." For example, instead of ‘a picture of a hardback book’, use ‘hardback book’.

5 Make the most of your alt text 

This is a little bit more technical (but not much, so don’t panic!) 

Alt text is text associated with an image that some internet browsers display instead of the image. You could think of it as a text description of the image. 

Again, Google and other search engines use this text to identify the content of a page. Alt text is also used for assistive screen readers or browsers with images disabled. If a browser can't display the image, the alt text will display instead.

If you don't manually add alt text to an image, Google will instead refer to the image's file name, which is why it’s important not to skip the step above.

Where you add your alt text depends on the content management system of your website (the back-end, where you upload your images and words).

Usually there will be a box underneath the image once you’ve uploaded it, and in here you can add your alt text. Use short, readable terms that describe your image and relate to your site’s content.

So there you go! Easy peasy, right? Five simple little steps but if you follow them correctly, it will have a huge impact on your website’s performance, as well as the way it looks.

If you have any questions about formatting images for your author website, I’m more than happy to help - just leave me a comment below!

Looking for help with your author website? Find out more about the services I offer>