What image dimensions should you use for your website? That’s what we are here to find out. Finding the right image sizes for your website or blog doesn’t have to be difficult.
But before that, If need some help getting finding images then check out my Article on best places to get royalty free pictures or if you want to learn how to make our own images and logos then I highly recommend you check these articles out.
- Effective ways to create your Images and Logos
- Snappa | Create images and Logos for Social Media/Websites
- Best place to Find Royalty Free Pictures
Why should you use the right image size (dimensions)?
Getting the right image size use to be a big issue but it’s not much of an issue with the newer versions of WordPress because of the inclusion of responsive images not scaled by CSS. BUT if you absolutely need the exact size and quality then I would still recommend you go through the process. By doing so, you will accomplish 3 major things.
- Load your web pages faster
- Create a better user experience
- in turn, it will increase your SEO rankings
What image size should you use?
- Are you using it as a Banner or Header?
- Are you using the image for Article or Post image?
- A Thumbnail on a grid?
- or just for decoration or illustration?
Answering these questions can help you decide what image size you should use for each element that you put on your website. And before you can answer those questions you need to select a Website Design or theme that you want to use.
If you are here then you either haven’t started your website yet or you are looking for a way to better optimize the size of your image. Let’s assume you haven’t built your site yet but you’re torn on what image size you should use.
How to Find Images Sizes of a Website
One of the easiest ways, is to first, find a website or theme that already has the layout that you want and you can inspect the images sizes on the site as an example.
Find images size on Google Chrome and Windows Edge browsers
- Right click on image
- Select Inspect and Developer Tools window will appear
- Two Options
- At this point the code in the developers tools is already highlights so all you have to do is hover your mouse pointer over the highlighted code and the dimensions of the image will appear.
- Alternative you can also select the element tool in the Developers window. It will be highlighted when you activate it now you can just hover your mouse on any image on that site and see the dimensions.
Find image sizes on Mozilla/Firefox browser
- Right click on a image
- Two options
- You can Inspect the image just like the other browsers above OR
- You can select View Image Info and a window will pop up displaying all the elements on the page. You can view all the images info just by scrolling up or down the list and selecting the image.
Option two is the best way to get the image info on Firefox.
Find image sizes on MAC/Safari browser
You can use the same method to inspect an image on Safari as we did with the other browsers as well. The only difference is that you have to turn on Developer’s menu first. Here’s how to turn on Developer menus.
- Select Safari
- Go to Preferences…
- Select the Advanced tab
- Click on the checkbox to turn on “Show menu in menu bar”
- Close the window and select Develop
- Click on “Show Web Inspector” and the developer window will appear
Now you should be able to hover over any image on the page to get the dimensions.
Example of using the Wrong image size
Why it’s important to use the right size (dimensions) for your image is because some themes or elements on that theme may be using a certain size, like for instance, a slider may only use an image that has a 16:9 aspect ratio (a rectangular shape) and your upload is a 1:1 ratio (a square shape) then it’s either going to stretch out that square shape to fit the aspect ratio or it’s going to leave blank spaces where it needs to. And that is going to look weird.
Quick and Simple fixes to the Issue
If you already loaded the image into WordPress then you could crop the image to the right size but depending on your image, it doesn’t always work the way you want it.
The best option is to just use the correct image size in the first place or use tools to crop and resize the image.
Where to find images
Once you got the image sizes that you want to use for your website or blog. You need to find the images you are going to use. Here are some excellent sites that you can use to get Royalty Free image.
Check out my Article on Best place to find Royalty Free Images & Videos if you want to learn more about them and see more options.
If you want to create your own images or logos then check out my article on 3 Effective Design Methods.
FOLLOW ME ===========================