The image size of pictures used in websites plays an important role in defining an impressive website. The design of your website can be basic, unique, or based on a pre-designed theme. You can also create a custom website from scratch.
However, if this is the first time you are creating a website with images, our guide can help you get started. Here you will find guidelines and recommendations to get the best image specifications for a functional website.
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 100 pixels | 2:3 |
| Logo (Square) | 100 x 100 pixels | 1:1 |
| Favicon | 16 x 16 pixels | 1:1 |
| Social Media Icons | 32 x 32 pixels | 1:1 |
| Lightbox Images (Full Screen) | 1600 x 500 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 2024
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.
Suggested reading
Website background image size
- Height - 1080 pixels
- Width - 1920 pixels
- Aspect ratio - 16:9
- PPI - 72
Things to consider: Depending on the design of the website, the size of the background image can be up to 2400px by 1600px and under 20MB in file size.
A website background image can provide a wholesome experience by taking up the entire landscape of the page. These background images are key in upping the wow factor of the brand and thus are high in quality, size, and have a good ratio.
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. However, the ideal size is 1920px by 1080px. When uploaded at the recommended size, background images will scale or shrink according to the device. Therefore, depending on the design, the uploaded background image can be the largest image uploaded to the website, with a limit of up to 20MB.
Choosing wide-angled images will make background images fulfill their intended purpose. However, keeping the file size of images as small as possible without compromising the quality is vital for quick loading time. An online image compression software like the one by TinyIMG can keep the quality and reduce the file size of background images.
Website hero image size
- Height - 720 pixels
- Width - 1280 pixels
- Aspect ratio - 16:9
- PPI - 72
Things to consider: Depending on the design of the website images of up to 1800px in width can be used.
Hero images can either take up the entire height or half the height of the page. Hero images will display well with an image size of 1280px by 720px at an aspect ratio of 16:9. If hero images are the central aspect of the website, a width of up to 1800px can achieve the desired effect. The website's loading speed can be affected by the clarity of the image.
Therefore, maintaining a 72ppi of hero images will provide both clarity and a small file size for the best outcome. As a rule of thumb, the recommended load speed of a webpage should be 2 seconds for optimal traffic and SEO purposes.
Today, 90% of website traffic is generated from mobile devices. On mobile websites, the hero images display well at a size of 800px by 1200px. However, content management systems automatically scale images to suit a mobile device browser.
Website banner size
- Height - 250 pixels
- Width - 250 pixels
- Aspect ratio - 1:1
- PPI - 72
Website ad banners can be laid out in different sizes. Vertical, portrait, leaderboard, full/half-page, and square banners are the most common types of website banner images. Most websites opt for a banner image size of 250px by 250px or a 1:1 aspect ratio.
Vertical/skyscraper banners are also popular at 160px by 600px. Banner images should be designed according to the dimensions required and compressed to a small image file size. Keeping the focus area of the image in the middle will avoid any cropping of the pictures when they are displayed on mobile devices. Find out more suggested banned sizes in this guide.
Mobile devices display banner images well when they are 1:9, 1:1, 1:1, or 4:5. It also helps to remember that file sizes of images should be kept as small as possible without compromising on quality. The largest image size on a website should not exceed 20MB.
Website blog image size
- Height - 630 pixels
- Width - 1200 pixels
- Aspect ratio - 3:2
- PPI - 72
Things to consider: It is important to consider the area above the fold (the visible part before scrolling) when choosing the size of the image. If the image is important a larger image size should be used. If the text is important the size of the image can be sacrificed.
When uploading blog images, remember that these images should be suited for sharing across social media channels. Generally, blog images nest well on a website at a 3:2 aspect ratio or 1200px by 630px. Blog images in landscape format are best sized to 1200px by 900px and featured blog images in portrait format are best sized to 900px by 1200px.
High-quality images with small file sizes should be uploaded for blog images. For blog images, the largest recommended file size is 150KB. The smaller the file size, the better the speed of the blog. For the CMS to adapt blog images to different sizes, they should be 72ppi with the focus area centered.
Website logo size
- Height - 100 pixels
- Width - 250 pixels
- Aspect ratio - 2:3
- PPI - 72
Things to consider: Logo images can be square or rectangular. Therefore, a 1:1 or a 2:3 aspect ratio can be used.
The website's logo is the most crucial element that speaks of the brand and all the website's contents. On most websites, logos are displayed on the top left corner of the page or at the top center. Logos are usually uploaded in a square format at a 1:1 aspect ratio or a rectangle format of 2:3.
PNG format is the recommended file format for logo files as they have transparent backgrounds to blend into the website. For desktops, a maximum height of 100px is recommended for logos of different widths.
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
- Height - 16 or 32 pixels
- Width - 16 or 32 pixels
- Aspect ratio - 1:1
- PPI - 72
The optimal size for favicons for websites is 16px by 16px, 32px by 32px, or 1:1 aspect ratio. This size is what all browsers use to display favicons. However, to avoid viewing a stretched version of the favicon on large screens, multiple image sizes are created at a 1:1 aspect ratio.
The most standard formats for favicons are ICO and PNG for compatibility across browsers. Several easy-to-access tools can convert a logo into a favicon suitable for uploading to a website.
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 the 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?
One of the first things that an SEO expert would recommend is the image size of media elements on the website. Uploading large images to websites is counterproductive to the website's overall performance. Valuable website storage space is consumed, and the website's load speed can be drastically reduced. And an overlooked website speed is one of the most common SEO mistakes.
A slow website takes potential customers and website traffic away from your website. The Google Search Engine will down-rank the website, and your business will suffer.
When you upload perfectly sized images for your website theme, the results are not just limited to a seamless website. The CMS will display the images correctly, the bounce rate will be low, and you will be one step closer to a perfect SEO ranking.
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 use. Here are some of the most common image formats used on websites:
- JPEG – Being one of the most common image formats used for images, JPEG is a lightweight lossy compression image format. JPG file formats are great for products, blogs, and background images used on websites.
- PNG – PNG is an image format that uses lossless compression. The alpha channel in PNG format allows background transparency too. PNG is perfect for icons, logos, and other graphics.
- GIF – The GIF file format is a nifty image file format that can be used for short animated clips with small file sizes. GIF also has an alpha channel and is excellent for product images.
- WEBP – WEBP images are a new image format that is becoming popular. The format offers smaller file sizes of images than JPEG at excellent quality, making it great for any product, banner, and featured image.
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
When an image is compressed, similar pixels that make up the image are grouped and condensed using an image compression software like TinyIMG image compressor. Keeping the image file size to the minimum aids in increasing the loading time of the website.
Apart from the load time, the bounce rate is lowered, and the overall user experience is enhanced. Compressing an image removes any metadata that is attached to the images, making it suitable for both SEO and website performance. While the quality of the image is reduced when image compression is applied, viewers can hardly notice the difference on a digital device.
Image SEO optimization
When images are SEO optimized, they help with search engine ranking, speed, storage space, and a seamless user experience. Search engines favor websites with images not found anywhere else on the web. Image search is important to users who look for images to inspire and visually explain subjects. Therefore, image optimization helps search engines understand the content of your website. Here are some of the image optimization elements for SEO:
- Unique image
- Defined dimensions
- ALT tag text and title
- Image sitemap
- Image captions
- Image size optimization
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 the specific web page dimensions can overflow the page, causing other page 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?
Websites are unique according to the style chosen by the creator. Sites that use WordPress, Shopify, Wix, Squarespace, and other CMS, require images of recommended sizes.
In addition to this, custom-designed websites have fixed dimensions required for images. 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 4472px by 4472px, with a limit of 20MB per image at 72dpi.
- The minimum size required for product images on Shopify is 800px by 800px.
- Check if your Shopify theme comes with a guide to the recommended image sizes.
- Note the image sizes that work best on your Shopify store for future use.
Try the TinyIMG Shopify app today with 50 free image optimizations
Install nowWordPress Themes
- The recommended image size in WordPress is up to 1024px by 1024px.
- Most WordPress themes have a full documentation file that helps users find the best image sizes for the theme.
- If you change the image size to suit your design and display, make a note of it.
Custom Websites
- A custom-built website developer usually provides documentation that outlines the best image sizes
- “Right-click” on an image you want to find the dimensions for on a Chrome browser. Choose “Inspect Element” to find the size of the image in the highlighted code.
Summary
With multiple screen sizes of browser-enabled devices available today, image sizes are tough to predict. However, uploading the right image size has profound advantages for SEO and overall site appeal.
This article is an overview of image sizes for website owners, with guidelines for determining the best image dimensions. While the dimensions of the images are important, the file size of the images is also a big concern. Using the lazy loading script will only load crucial images as a priority for users who have image-heavy websites.
Curious to read more? Check out these articles:
Frequently asked questions
Images that are bigger than 20 MB can negatively affect your website speed. It’s better to use smaller images that are up to 2 MB.
Using other pages’ images on your website doesn’t hurt your SEO strategy if the content around it is original. Ensure there’s no duplicate content, and you can freely use images from other pages without it affecting SEO.
The best desktop web page size should be between 1024 x 768 px and 1920 x 1080 px. Meanwhile, for mobile devices, the page size should vary between 360 x 640 px and 414 x 896 px.
A 1920 x 1080 px website means that it is 1920 px wide and 1080 px high. These dimensions are also known as the full HD resolution.
The size of an HTML page varies by website, but 1024 x 960 px is a commonly used size by designers.
