If you're here then you have probably already realised the importance of being able to identify the size of the images you're using on your website. If you're still unsure why image dimensions are important, then it's important to remember that loading images which are too wide or tall for the space that they occupy on your website will slow down the loading of your website.
While it might not seem like a big thing, a website which is slow to load will impact a whole host of your digital marketing efforts including your search engine optimisation efforts, paid search ads bidding and costs and the conversion rate on your website (the percent of your website traffic which end up buying from you).
So being able to identify which images are too big on your website is pretty important for your whole digital marketing mix. Think of it another way, have you ever wondered why some of your images appear to be a lower quality when you upload them to a social media platform? It's because they know the size they need to be and have also compressed the video or picture to make the file size as small as possible.
That's because they know the smaller the file size, the faster the content will load and the faster it loads, the more you keep watching. Well, the same is true for your small business website.
How to Find The Size (height & width) of an Image
Firstly it's important to say that if you're looking to find the height and width of an image then you need to be on a laptop or desktop device rather than a mobile. The second thing to note is that it's actually straight forward to find the detail, the important step is knowing what to do with that knowledge.
Find Image Height & Width in Google Chrome
If you're using Google Chrome, follow these steps to find image dimensions:
- Find the image you want to learn about and right click on it
- Choose "inspect element"
- A new window will open showing the webpage code and highlight the image in the code
- Hover your cursor over the image URL and a small box will appear
- The intrinsic size shows the dimensions of the image, the rendered size shows the dimensions of the space
- If intrinsic size is bigger than rendered size then you need to resize your image, making it smaller
Find Image Height & Width in Firefox/Safari
The process to discover image dimensions in Firefox & Safari is the same, however in Safari you'll need to make sure you have the developer tools enabled. You can do this by going to Preferences > Advanced and then making sure the "Show Develop menu in Toolbar" option is ticked.
Now simply follow these steps:
- Find the image you want to learn about and right click on it
- Select "inspect element"
- A new window will open showing the webpage code and highlight the image in the code
- Hover over the text inside src="" in the code and some numbers will appear
- The numbers next to your cursor are the dimensions of the image file (intrinsic size)
- In the browser (where you right clicked) more numbers will appear, these are the dimensions of the space (rendered size)
- If intrinsic size is bigger than rendered size then you need to resize your image, making it smaller
What do I do About Images Image Which are too Big?
If you have image files which are for the space they go into, then make them smaller. It's really easy and we even have an image resizing tool that you can use to do just that. We're also creating a separate video guide to show you how it works if you need help.
You can find all of our videos on our YouTube Channel (don't forget to like & subscribe) and they will also be posted to the website on a regular basis. We've kept them short to make them digestible and covered just the essentials you need to get going, we want you to get the most of out the platform rather than bamboozling you with detail.
