What should be the optimal size of an image on your website?
In this article, you will learn everything you need to know about ‘What should be the optimal size of an image on the website’. To know the details, keep reading the documentation below.
Why is image size important for websites?
A website's image size is important for three reasons:
— Enhances user experience
— Speeds up website pages
— Boosts website rankings
Choosing the wrong image size can affect all three of these metrics simultaneously. Therefore, by using the best image sizes for each use case on your webpage, you can help improve all of them at once.
The optimal size of images in Dorik
As a general rule, the recommended optimal size of an image should be twice as large as the area size in which the images will be used.
💡 However, this optimal size of images in Dorik is only a recommendation for your sites, this is not the final one that you need to follow for your images as the optimal size of images varies from website to website as well as device to device
Follow all the steps below to know the recommended optimal size —
- Choose the area where you want to use the image
- Know the area size (you can know it by taking a screenshot)
- Use the double size for your image than the area size
To know the process refers to the Screenshots & GIF below —
Choose the area where you want to use the image
Know the area size (you can learn it by taking a screenshot)
Here you can see the area size is 767*527
Use the double size for your image than the area size ( you may use 1534*1054)
Specific guidelines for websites’ optimal image size
In this section, our focus will be on specific types of images for the web, as they all differ in size requirements. Websites typically contain these below-mentioned main types of images:
💡 However, the below-mentioned optimal size of images is only a recommendation for your sites, this is not the final one that you need to must follow for your images. Because the optimal size of images varies from website to website as well as device to device.
1. Section Background Images
Height: 700 to 1400 pixels
Width: 2500 pixels (recommended size is to be between 1920px to 2500px)
Here’s an example of Section Background Images —
2. Hero Images
Height: Between 720 pixels and 900 pixels
Width: Between 1280 pixels and 2500 pixels
Here’s an example of a Hero Image —
3. Blog/Thumbnail Images
The optimal size of blog images varies from blog to blog. The ideal size of the blog image is:
Height: 630 pixels
Width: 1200 pixels
Here’s an example of a Blog Image —
The ideal Thumbnail size is:
Width: 1280 pixels (minimum width of 640 pixels)
Height: 720 pixels
Here’s an example of Thumbnail Images —
There are different types of Logos. A few common types of Logos’ optimal sizes are given below:
Height**:** 250 pixels
Width**:** 250 pixels
Here’s an example of Square Logos —
Here’s an example of Horizontal Logos —
Here’s an example of Vertical Logos —
💡 You do not need to worry about the file size of your images, because the file size will be automatically optimized in Dorik.
Updated on: 21/08/2023