Getting Started

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:

Background images
Hero images
Blog images
Logos.


💡 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)

PPI: 72

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

PPI: 72

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

PPI: 72

Here’s an example of a Blog Image —




The ideal Thumbnail size is: 

Width: 1280 pixels (minimum width of 640 pixels)

Height: 720 pixels

PPI: 72

Here’s an example of Thumbnail Images —

4. Logo

There are different types of Logos. A few common types of Logos’ optimal sizes are given below:

Square Logo

Height**:** 250 pixels

Width**:** 250 pixels

PPI: 72

Here’s an example of Square Logos —



Horizontal Logo

Height: 100px

Width: 250px

PPI: 72

Here’s an example of Horizontal Logos —




Vertical Logo

Height: 250px

Width: 100px

PPI: 72

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.

Related articles

Image

Image Slider

Updated on: 21/08/2023