How to correctly size an image for your website.

October 20, 2022

What is Image Sizing?

Every website is slightly different when it comes to correctly size an image, and there is no simple answer to what is the correct image size all websites should use. However, with the information within this blog you should be able to work out what the correct size an image you should be using for your website is.

What resolution is my website designed for? What is full width and content width?

A full width element is a part of a website that will expand to both corners of your screen. There is no limited resolution for this section. As a screen size gets bigger, so does the element. A example of this can be seen below:

A content width element is a part of a website that is locked to a certain resolution. As the users screen expands, it does not expand the content and will add borders to the side of the screen. A example of this can be seen below:

How do I know what size an element is?

Each browser comes with a built in developer tools menu that will let you view the exact sizing of content on a page. For the following example, we will be creating a new information item and need a image to set for it:

Therefore, we will need to work out the size for each of the images on the page so we can keep the sizing consistent.

If you are using Google Chrome then you can press F12 and the developer tools menu will come up. Please see a image below of what this would look like:

When you are on the developer tools menu, you can select the mouse icon in the top left to enable the selection mode.

You will then be able to hover over any page element and it will show you the sizing that is being used. For example, hovering over one of our about us images it will show information about the image and also the sizing used for it:

size an image

The above image shows that the resolution of this is 554x347px. Therefore, for future images in this section we would set the image sizing as this to keep it consistent. This is a handy tool to easily check what resolution images go up to if you are replicating content to match existing design. However, what if you do not have existing content to copy and are making a whole new design?

Summary

Unfortunately, we cant give you the exact resolution to use as for every website it will be slightly different. However, you can easily check what the size of existing content is and match the size to check what resolution to uses.

Are you keen to further increase your website SEO scores? Check out our WordPress SEO To Do List 2020 (5 Steps) blog.

Need help with your next development project? Let’s talk.

Get in touch