10 min read
Choosing the right image sizes is an important part of creating a high-performing and user-friendly site. Whether you’re building on a pre-designed theme or a custom-built site, selecting the proper dimensions and a consistent aspect ratio will help maintain a good user experience and fast speeds.
If you’re unaware of what are the best image sizes for your website, keep reading our guide. Learn the best aspect ratio to use to keep your site fast and the recommended resolution for high image quality.
Key highlights:
Websites should generally aim for an image width between 1280-1920 px while keeping the file size under 200KB to ensure optimal page speed.
Use 16:9 or 3:2 aspect ratios for standard landscape images, and 1:1 for square photos to get the best results. In terms of resolution, keep it at least 72PPI (pixels per inch) at a minimum.
For blog images, 1200 x 630 pixels is a common choice, while rectangular logos are 250 x 150 pixels, and large visuals like hero images are around 1280 x 720 pixels.
Generally recommended image sizes for websites
Here is a cheat sheet of standard image sizes for web pages best suited for a desktop with a resolution of 1920 x 1080 px (which is the most popular according to the statistics).
| Website image type | Image dimensions (W x H) | Image aspect ratio |
| Background image | 1920 x 1080 pixels | 16:9 |
| Hero image | 1280 x 720 pixels | 16:9 |
| Website banner | 250 x 250 pixels | 1:1 |
| Blog image | 1200 x 630 pixels | 3:2 |
| Logo (rectangle) | 250 x 150 pixels | 3:2 |
| Logo (square) | 100 x 100 pixels | 1:1 |
| Favicon | 48 x 48 pixels | 1:1 |
| Social media icons | 32 x 32 pixels | 1:1 |
| Lightbox images (full screen) | 1100 x 800 pixels | 16:9 |
| Thumbnail image | 150 x 150 pixels | 1:1 |
While image dimensions are important, a smaller image file size can make a difference in your page weight, ensuring faster loading times. Make sure to compress your website images - try TinyIMG online image compression tool for free!
Website image guidelines 2025
Image sizes greatly influence the user experience, Search Engine Optimization, and overall website performance. Irrespective of the type of image file used, the key to a great website is the size of the images. Here is a detailed overview of the guidelines for general image size specifications across websites.
Website banner size
Website banners can have a different size depending on their purpose and placement. Common banner ad sizes are leaderboard (728 x 90 px), wide skyscraper (320 x 50px) and medium rectangle (300 x 250 px), but you’ll have to check with the ad platform.
Meanwhile, desktop banners can range up to 1600 px in width and 500 px in height.
- Width – 1200-1600 pixels
- Height – 300-500 pixels
- Aspect ratio – various
- PPI – 72
Website background image size
The recommended size for website background images is 1920 x 1080 pixels and no more than 200KB in file size. As long as the pixels per inch (PPI) value is at 72, you can upload a background image size of up to 2400px by 1600px or 16:9 aspect ratio.
- Width – 1920 pixels
- Height – 1080 pixels
- Aspect ratio – 16:9
- PPI – 72
Website hero image size
The ideal size for a website hero image (full-screen) is 1280 x 720 pixels at an aspect ratio of 16:9. However, depending on the site’s design, it can be up to 1800 px in width. Also, maintaining a 72ppi will provide both clarity and a small file size for hero images.
- Width – 1280 pixels
- Height – 720 pixels
- Aspect ratio – 16:9
- PPI – 72
Website blog image size
Generally, blog images nest well on a website at a 3:2 aspect ratio or 1200 px by 630 px. Blog images in landscape format are best sized to 1200 px by 900 px and featured blog images in portrait format are best sized to 900 px by 1200 px. The ideal file size should be below 100KB.
- Width – 1200 pixels
- Height – 630 pixels
- Aspect ratio – 3:2
- PPI – 72
Website logo size
Standard logo sizes range from 250 to 400 px in width and can be square (1:1) or rectangular (3:2). For example, for a 250 px width, a 150 px height is recommended. Since logos require transparency, you should use the PNG format.
- Width – 250 pixels
- Height – 150 pixels
- Aspect ratio – 3:2 or 1:1
- PPI – 72
If you don't have a logo yet, you can create a basic version using one of the best online logo makers.
Website favicon size
The most popular size for a favicon is 16 x 16 px and a 1:1 aspect ratio. However, Google Developers recommend a size larger than 48 x 48 px (like 32 x 32 px or 96 x 96 pc) for favicons so it would look good on all devices.
- Width – 16 or 32 pixels
- Height – 16 or 32 pixels
- Aspect ratio – 1:1
- PPI – 72
Website thumbnail size
A common size to use with website thumbnails is 150 x 150 px with a 1:1 aspect ratio. However, the size can vary depending on its placement. For example, product image thumbnails can reach 300 x 300 px, so consider your website’s design.
- Width – 150 pixels
- Height – 150 pixels
- Aspect ratio – 1:1
- PPI – 72
Mobile image size recommendations
Most responsive websites will automatically resize all images to display on mobile devices. The image sizes have to be designed to fit mobile versions of websites like desktop websites. If desktop images are too big, the display on mobile devices will be distorted. Therefore, correct dimensions need to be set for images for automatic scaling on mobile.
Images with an aspect ratio of 1:1 will have no problem displaying on mobile devices. However, depending on the automatic resize setting, some cropping may occur on mobile devices for images with aspect ratios of 16:9 or 3:2. For this reason, the safest approach with responsive images is to keep the focus area of the subject in the middle.
Why is image size important for websites?
Website image size is important because it helps improve performance, image SEO, and user experience. Here are the main reasons why choosing the correct image sizes matters:
- Faster page performance. Oversized images can reduce the page load time, while images with wrong dimensions can cause unexpected layout shifts. All of this can contribute to higher bounce rates and a detrimental user experience.
- Improved SEO. Since images make up around 40-44% page weight according to research by Web Almanac study, they can drastically affect website speed. Since speed is a ranking factor on Google, correct image sizes can help improve SEO.
- Mobile-friendliness. Picking the right sizes for website images helps make them look responsive on all devices, including mobile.
- Reduced resource usage. When you pick the right image dimensions instead of placing an oversized image on your site, you save up storage and bandwidth. Considering hosting plans come with resource limits, proper image sizing can help lower hosting costs.
What image format to use for the web?
Since different image formats can be used on a website, it is tricky to choose which ones to stick with. Many websites have already adopted the WebP format, as Google states that it offers a 25-34% smaller image file size than PNG or JPG files of similar quality.
However, the best format will depend on the use case. Here are some of the most common image formats and when to use them:
| Format | Best for | Pros | Cons |
| WebP | General website images (most used) |
|
|
| JPEG | Photographs, general web images |
|
|
| PNG | Transparent images, like logos |
|
|
| GIF | Short animations |
|
|
| SVG | Illustrations, icons, logos |
|
|
Other image optimization aspects
There is more to just ensuring that the dimensions of an image are accurate when considering SEO. Below are some of the other important aspects to consider for image optimization.
Image compression
Image compression is the process of reducing the file size without changing image dimensions. When an image is compressed, similar pixels that make up the image are grouped and condensed using software like the TinyIMG image compressor. Any hidden metadata, like camera details, is also removed.
Compression helps lower the page weight, influencing faster page load times. This also affects bounce rates, since Google found that even a jump from 1 to 3-second load time could increase them by 32%.
While the quality of the image is reduced after compression, viewers can hardly notice the difference on a digital device.
Image SEO optimization
Optimizing your images can also contribute to higher SEO rankings. Ensuring your images are properly sized can lead to better page speed, which Google considers a ranking factor.
Plus, unique images with proper file names and alt texts can end up in image search results for certain queries.
Here are some of the image SEO and performance optimization tips:
- Create unique and original images
- Define image dimensions
- Generate proper alt texts and file names
- Generate an image sitemap
- Use correct image sizes
Web page dimensions
When choosing the right size for images, it’s crucial to take a look at your web page dimensions. Having images that are too large for a specific web page can overflow the page, causing other elements to be pushed out of place. Browsers may also automatically scale it down, but it still wastes bandwidth.
It’s recommended that the standard webpage dimensions on desktop would be between 1024 x 768 px and 1920 x 1080 px, while on mobile – between 360 x 640 px and 414 x 896 px. However, it largely depends on your target audience and what devices they primarily use.
How to find out image sizes for your website?
Image sizes depend on your website design. For example, particular sizes may be recommended for WordPress, Shopify, Wix, Squarespace, and other CMS themes, while custom-designed sites may have other recommendations.
While finding the image dimensions for a website can seem daunting, here are some tips to help you find the image sizes for standard website platforms:
Shopify themes
- Shopify allows users to upload images of up to 5000 x 5000 pixels, with a limit of 20MB per image at 72 dpi.
- Product images can be up to 5000 x 5000 pixels, but the recommended size for square photos is 2048 x 2048 pixels.
- Check if your Shopify theme comes with a guide to the recommended image sizes.
- You can review the full Shopify image size recommendations in our guide.
Image compressorFree plan availableWordPress themes
- The recommended image size in WordPress is up to 1024 x 1024px.
- Most WordPress themes have a full documentation file that helps users find the best image sizes for the theme.
- Featured images usually come with a 16:9 aspect ratio, like 680 x 382 pixels.
Custom websites
- A custom-built website developer usually provides documentation that outlines the best image sizes – check with them for more information.
Summary
Finding the right image sizes for your website can be challenging, especially across multiple screen sizes. Different themes or custom-built sites have different guidelines on what works best, but the general recommendations are similar.
Content images should be around 1200 pixels in width, logos can be square or rectangular from 250 to 400 px in width, and banner ads have custom sizes based on the ad platform.
If you have a large website with hundreds of images, managing their sizes manually can be difficult. In such cases, we recommend using a third-party image optimization app. For example, Shopify users can leverage TinyIMG to automatically resize oversized images when detected.
Frequently asked questions
The file size of your website images should be no bigger than 20 megabytes, as anything bigger can negatively impact your website speed. For most cases, smaller images up to 2 megabytes are enough.
Using another page’s images can harm your SEO efforts if you’re unauthorized to use it. The website can give you a takedown notice or report you to Google for copyright infringement. However, if you have permission to use it and have optimized it according to best image SEO practices, then your SEO won’t be harmed.
The standard screen resolutions are between 1024 x 768 px and 1920 x 1080 px on desktop. On mobile, it can be between 360 x 640 px and 414 x 896 px.
A 1920 x 1080 pixel resolution means that the width of a website is 1920 pixels and the height is 1080 pixels. This means that the website’s size is a total of 2,073,600 pixels.
The size of an HTML page varies by website, but 1024 x 960 px is a commonly used size by designers.
