Best Practice for Website Images

A tale by

Amy Nortje

Treating your website images according to best practice is very important.

Cropping and sizing them to the correct dimensions helps to maintain the design integrity of your site and helps to ensure that images are the right size for the space they are used in. Below you can find the recommended dimensions for images on your website.

If your images are too big then they slow down the load speed of your pages and that has a negative impact on user experience and so also your SEO. Saving images in the correct dimensions and resolution is important. We also advise running your images through a compression before uploading them to your site.

Naming your images according to best practice helps you find them easily in the media library in the future and helps your SEO.

When building your website it is important that your web developer follows these best practices, but it is also something that you, as a marketing manager and business owner, can continue to do when managing your website.

Image Dimensions: an important detail for best practice for website images

Blog Image Dimensions

Featured image and landscape images within your post

Dimensions: 1024px by 768px

Portrait images within your post

Dimensions: 768px by 1024px

The height of your images can technically be anything you like, as sizing the width will help to make sure the images are not too big. But in order to maintain design consistency it’s nice to crop the height as per the dimensions above.

Product Image Dimensions

Dimensions: 768px by 768px

Resolution: a vital aspect of website image best practice

The resolution of your images is important to consider before uploading them to your website. Resolution is determined/controlled by the DPI (Dots per Inch) of an image. 

For web use a DPI of 72 is perfect.

If you are using Photoshop or a similar programme then you can set the DPI of the image.

If you are using Canva then when saving the image as a jpeg or png it should automatically be set to 72DPI. If you save out for print then the resolution will be more like 300DPI (great for printing a massive poster, but entirely unnecessary for a computer or phone screen).

Format: an often overlooked detail

For websites the best format to save your images as is jpg as they are the smallest.

If your images need transparent backgrounds then you will need to save them out as png.

two computer screens on a desk with programs open to edit website images

Naming Your Images: a helpful addition to website image best practice

The way you name your images is an important part of treating your website images according to best practices. Best practice naming conventions will help you find the images in your website media library easily in the future and it will help your on-page SEO. 

For blog posts: start with the name of your business; then follow that with blog; then the title of the post; lastly sequential numbers starting with 01. 

For product images: start with the name of your business; then follow that with product; then the title of the product; lastly sequential numbers starting with 01. 

The use of either uppercase or lowercase doesn’t really matter. Having all images named using the same conventions is nice, but the use of case is not something you have to be pedantic about.

When uploading images to your website spaces will be replaced with dashes ( – ) so you can get ahead of that and name your images with dashes instead of spaces from the start. If you prefer to use underscores ( _ ) that is also totally alright. The use of either dashes or underscores is a personal choice and does not affect the ability to search images later on.

Below are some examples of well named images.

brand-candy-about-01.jpg

brand-candy-blog-best-practice-for-website-images-02.jpg

brand-candy-logo-01.png

close up of a computer screen displaying a website page with images named according t best practices

Compression: the final step in following best practice for your website images

To make sure your images are loading as fast as they can on your website it’s important to run them through a little compression before uploading them to your site. 

The free option we recommend below optimises images without hurting the quality. It removes some pixels from the image that reduce the size, but our eyes don’t notice when viewing the image on a screen. 

Check out tinypng.com to compress the size of your images for free.

You upload your images to tinypng, it runs the compression and then you download them back to your device. The name will be the same as when you uploaded.

SEO Bonus: image alt text

Image alt text is what screen readers use to describe pictures on your site. Adding image alt text makes your website more accessible. This a great way to boost your SEO (Search Engine Optimisation) as Google rewards sites that are accessible. A lovely added benefit!

The optimal length for image alt text is 125 characters or less.

a person's hands holding a phone displaying a blog post about website optimisation and SEO

Share this: