Website Image Size
Here is a quick overview of some basic resolution concepts:
- PPI (pixels per inch) refers to how many pixels will appear in a single inch of any digital screen. PPI, also known as pixel density, is used to measure the clarity of images. The higher the PPI, the greater the detail will appear in the image.
- DPI (dots per inch) is another way to measure clarity but on paper. This is an important measurement for any printed versions of your logo, as it will determine the dots of ink.
- Resolution is the total number of pixels that will appear on the screen. It is always measured in both width and height, so it will always be written as 500 x 500 pixels (px), for example.
- Bytes refer to the actual file size and can be measured in kilobytes (KB), megabytes (MB), and gigabytes (GB).
The recommended image resolution for the web is 72 DPI. This resolution ensures images display well on most monitors without losing visual quality. Using a higher DPI can result in larger file sizes, leading to longer loading times, and negatively impacting user experience and SEO.
Easier to reduce the size
Keep in mind that it’s much easier to start with a large size and go smaller, rather than trying to expand one that is too small. You can use an image resizer to help make adjustments.
Recommended image sizes for websites
| Website Image Type | Image Dimensions (W x H) | Max File Size | Image Aspect Ratio |
|---|---|---|---|
| Hero Image | 1280 x 720 px | 2 MB or smaller | 16:9 |
| Background Image | 1920 x 1080 px 2560 x 1440 px (Recommended) | 2 MB or smaller | 16:9 |
| Logo (Rectangle) | 800 x 200 px | 200 KB or smaller | 4:1 |
| Logo (Square) | 800 x 800 px | 200 KB or smaller | 1:1 |
| Favicon | 16 x 16 px 32 x 32 px 48 x 48 px (Recommended) | 20 KB or smaller | 1:1 |
| Blog Image | 1920 x 1080 px 2560 x 1440 px (Recommended) | 2 MB or smaller | 16:9 |
| Vehicle Image (HQ) | 800 x 450 px (Recommended) 1280 x 720 px | 2 MB or smaller | 16:9 |
| Website Ads Banner | 250 x 250 px | 1 MB or smaller | 1:1 |
| Thumbnail Image | 150 x 150 px | 200 KB or smaller | 1:1 |
| Mobile app icons | Android Launcher: 192 x 192 px Android Play Store: 1024 x 500 px Android Play Store Logo: 512 x 512 px Apple App iPad + iPad mini X2: 152 x 152 px Apple App Store iPad X2: 167 x 167 px Apple App Store iPhone X2: 120 x 120 px Apple App Store iPhone X3: 180 x 180 px Apple App Store X1: 1024 x 1024 px Apple iPad Mini: 768 x 1024 px Apple iPad Pro: 2048 x 2732 px Apple iPad Retina: 1536 x 2048 px Apple iPhone 4: 640 x 960 px Apple iPhone 5, SE: 640 x 1136 px Apple iPhone 6, 6s, 7, 8: 750 x 1334 px Apple iPhone 6, 7, 8 Plus: 1242 x 2208 px Apple iPhone X: 1125 x 2436 px | 10 KB or smaller | Varies |
It is important to note that these are general guidelines, and the ideal image size will vary depending on the website layout and design. Additionally, it is extremely important to optimize all images for website performance by resizing and compressing them.
Recommended Logo sizes for social media
| Social Media Type | Image Dimensions (W x H) | Max File Size | Image Aspect Ratio |
|---|---|---|---|
| Profile photo: 180 x 180 px Cover photo: 820 x 310 px | 10 KB or smaller | Varies | |
| Profile Photo: 110 x 110 px | 1:1 | ||
| Profile picture: 400 x 400 px Background picture: 1584 x 396 px | 10 MB | Varies | |
| Profile picture: 400 x 400 px | 5 MB | 1:1 | |
| Profile picture: 165 x 165 px | 10 MB | 1:1 | |
| TikTok | Profile photos: 20 x 20 px (minimum) | 1:1 | |
| YouTube | Channel profile picture: 800 x 800 px | 1:1 | |
| Google My Business | Profile picture: 720 x 720 px (minimum resolution :250 x 250 px) | 5 MB | 1:1 |
Image file types
JPEG and PNG are the two most commonly used image formats for websites.
- JPEG is ideal for photographs and images with many colors. Such as the hero, background, and blog images.
- PNG is ideal for images with fewer colors and transparent backgrounds. Such as your logo images.
Both formats can be compressed and are compatible with all modern browsers.
WebP is an image format developed by Google. It provides lossless compression for images on the web, often reducing file size by more than 30% compared to JPEG or PNG. However, it is not yet universally supported by all browsers.
Landscape image format
Landscape images are optimal for websites due to their visual appeal. The horizontal orientation seamlessly complements the widescreen displays of modern devices, providing a natural and expansive canvas for showcasing images and graphics. Landscape images align with the conventional left-to-right reading pattern, ensuring users can effortlessly absorb content without excessive scrolling.
This format allows web designers to present images with greater detail and context, enhancing the overall storytelling capabilities of a website. Moreover, landscape images tend to occupy more screen real estate, making them particularly effective for capturing attention and creating memorable visual experiences for site visitors. Ultimately, landscape image format contributes to a more aesthetically pleasing and user-friendly web design and is essential for retaining and engaging audiences in the digital age.
Further Reading
You may also want to read about stock photos and where you can purchase them.