Website Image Size Cheatsheet for 2024

Article by Muhammad Adeel Qayum Shaikh16 Oct, 2024

Are you paying attention to your website images and making sure they look good on every screen size and format?

With people browsing on all sorts of devices, it’s key to choose image sizes that enhance user experience. If your images are too big or too small, visitors might end up scrolling and zooming more than they’d like, which could push them to leave your site.

The good news is it’s easy to optimize your images. Ahead, learn how to adjust your images for both mobile and desktop to keep your site running smoothly on all devices.

Optimal image dimensions for desktop and mobile devices

Here’s a guide to recommended image dimensions for both mobile and desktop websites:

Image type	Mobile dimensions (W x H)	Desktop dimensions (W x H)	Aspect ratio
Hero image	360 x 200 pixels	1280 x 720 pixels	16:9
Square logo	60 x 60 pixels	100 x 100 pixels	1:1
Thumbnail image	90 x 90 pixels	300 x 300 pixels	1:1
Background image	360 x 640 pixels	2560 x 1400 pixels	16:9
Social media icons	48 x 48 pixels	32 x 32 pixels	1:1
Favicon	16 x 16 pixels	16 x 16 pixels	1:1
Rectangle logo	160 x 40 pixels	400 x 100 pixels	4:1
Website banner	360 x 120 pixels	1200 x 400 pixels	3:1
Lightbox images (full screen)	360 x 640 pixels	1600 x 500 pixels	16:9
Blog post image	360 x 240 pixels	1200 x 800 pixels	3:2

These dimensions are guidelines and might need adjustments based on your site’s responsive design.

It’s usually best to have the render size of your images smaller than their original upload size.

Best image size for websites

Image size: The ideal pixel size for your images varies by purpose. For example, background images should be larger than images for blog posts.

Pixel width: A width of 2500 pixels works well for full-screen displays in most situations. Images smaller than this might be cropped or look blurry when stretched to fit the screen.

File size: Images larger than 20 megabytes can slow down your website. Aim for smaller files—ideally between 500 kilobytes and two megabytes—to maintain faster load times.

Image attribute: Alt text or alt tags don’t affect your site’s speed but are important for accessibility. They help screen readers interpret images. Keep alt text brief, ideally less than 100 characters.

Why is image size important for websites?

Here are some reasons why image size is important for websites:

Improves user experience

Using properly sized images for each part of your website makes for a better user experience. Visitors can view images clearly without needing to scroll or resize images.

Low-quality or pixelated images can hurt the overall impression of your content. On an ecommerce site, this might make customers doubt the quality of your products or business.

On the other hand, sharp, correctly sized images boost the perceived value of your products and provide more visual details to potential buyers.

Improves site speed

Uploading large images to your site can slow down page loading times. Smaller images (both in file and size dimensions) usually load faster on all devices.

Image load time is sometimes called “contentful paint.” You can measure this and other speed factors with Google’s PageSpeed Insights.

For instance, if a server needs 2.1 seconds to load one image and 4.1 seconds for a larger one, the page load is slow.

With many users abandoning carts if pages take over six seconds to load, it’s crucial to optimize image sizes to keep bounce rates low.

Boosts website ranking

Website ranking shows your site’s position in search engine results. Sites optimized for search tend to rank higher for relevant searches.

Google assesses numerous factors to determine which pages rank highest. The quality of images—essentially, how well they enhance user experience—likely affects your website’s position in search results.

Website image size guidelines

Websites use five main types of images:

Background images
Banner images
Hero images
Blog images
Logos

Each type has specific size needs. Let’s review the typical dimensions for each.

Background images

Background images are typically the largest visuals on a website. They act as a backdrop for a homepage or other key pages. The image spans the entire screen, no matter what device it’s accessed on.

Recommended specifications:

Image height: 1400 pixels
Aspect ratio: 16:9
Image width: 2560 pixels
File size: 20 MB

Banner images

Website banner images vary in size and shape based on their location and purpose. The most common type is a banner ad.

Google Ads is a popular service for banner ad promotion. It offers sizing guidelines for submitted images:

For non-ad banner images, rectangular sizes like 300 x 200 pixels or 970 x 90 pixels often work well.

Recommended specifications:

Image height: Check with the platform
Image width: Check with with the platform
Aspect ratio: Varies
File size: 150 KB (Check with the platform)

Hero images

Hero images are similar to background images but are shorter—about half the height. They help show more text on the screen without needing users to scroll.

Recommended specifications:

Image height: Between 720 pixels and 900 pixels
Image width: Between 1280 pixels and 2500 pixels
Aspect ratio: 16:9
File size: 10 MB

Blog images

Blog images can vary in type and dimensions. For example, the featured image may be 1200 pixels by 620 pixels when uploaded, but it appears smaller at 894 x 462 pixels on the page.

Setting a specific render size for your blog helps streamline your design and keeps file sizes manageable (the Kulala image is 95.1 kilobytes).

Main header images at the top of your blog posts should be consistently sized throughout your blog.

Recommended specifications:

Image height: 800 pixels
Image width: 1200 pixels
Aspect ratio: 3:2
File size: 3 MB

Logo

Your logo is usually one of the smallest images on your site (except for the favicon in the browser tab). Choose either a square or rectangular shape based on your logo design.

Most logos are best in a square format with a 1:1 ratio, but if your logo has a longer name or is text-based, a rectangular shape works better. For instance, Shopify’s logo has a 4:1 ratio.

Recommended specifications:

Image height: 800 pixels
Image width: 1200 pixels
Aspect ratio: 4:1, 2:3, 1:1
File size: 1 MB

Mobile image size recommendations

Choose the right image dimensions

Mobile users often value the ability to zoom in on images. So, it’s important to balance image dimensions with file size.

High-resolution images lend your site a clean, professional appearance with effective zoom capabilities. To keep your design consistent, maintain the same aspect ratio across similar images.

For example, you might choose to add square images to your ecommerce store. The square format is easier to adjust on smaller screens. Additionally, square and vertical images work well on mobile devices, allowing visitors to see more of your content without excessive scrolling.

If you’re using Shopify, you can upload images up to 5000 pixels by 5000 pixels, with a file size limit of 20 megabytes.

For square product images, it’s recommended to use a size of 2048 pixels by 2048 pixels.

Keep in mind that for zoom functionality, your images need to be at least 800 pixels by 800 pixels.

Evaluate file size

Large image files can affect site speed, especially on mobile devices. Many website builders also have limits on the file size you can upload. For instance, Shopify limits file sizes to 20 megabytes.

If you need to compress images to reduce file size, there are online resizing tools available. These tools allow you to modify images or convert them to different file formats.

In general, aim to keep header background images under 10 megabytes, while product photos should be much smaller, around 300 kilobytes.

Resize photos for mobile screens

Shopify resizes your images automatically for smaller screens. But on other platforms, you might need to edit images manually to make them mobile-friendly. Remember, desktop and mobile screens have different orientations.

Large files can slow down your site’s loading time. Lossless compression gives you the best image quality, but it often results in large files that may take too long to load. Instead, use the smallest file sizes that still offer good resolution.

While Shopify’s algorithm and responsive design resizes images well, adjusting file sizes yourself can improve the overall shopping experience.

What is the best image file type for websites?

Selecting the appropriate image file type helps maintain quality and keeps file sizes manageable. Here’s a breakdown of the most common image formats and their ideal uses:

SVG

SVG (scalable vector graphic) is a vector-based format that uses mathematical formulas to create images. SVG files are usually smaller than other formats, which helps speed up loading times. Typically, you can scale SVG to any size without loss of quality.

SVG is most suitable for icons, logos, and other graphics that a business needs to use in multiple locations.

PNG

PNG uses lossless compression to reduce file size while retaining image quality. It’s an excellent choice for images requiring a transparent background due to its ability to preserve detail.

Although PNG files are often larger in size than JPEGs, its focus on transparency makes it ideal for detailed logos and images.

GIF

GIF is a bitmap format that handles basic animations well. It compresses without losing quality and limits images to 256 colors, which keeps file sizes down.

Though the PNG format is preferred for still images, GIFs are still the better choice for short animations and work on all browsers.

HEIC

HEIC (high efficiency image format) is what Apple devices use to store images. Using advanced compression technology, it creates high-quality images with much smaller file sizes than JPEGs. The shortcoming is that HEIC isn’t universally supported on non-Apple gadgets.

WebP

WebP is an image format that Google developed to improve web performance. With WebP, you can have images that are more than 30% smaller than JPEGs or PNGs

WebP uses lossless compression to help sites load faster. However, it’s worth mentioning that not all browsers fully support WebP yet.

TIFF

TIFF (tagged image file format) is a lossless, high-quality format that’s widely supported by image-editing software. You can use it for storing images intended for professional printing, thanks to its high resolution and rich color depth.

TIFF lets you save multiple images or pages in one file. But keep in mind, file sizes tend to be large.

Troubleshooting: image display problems

While managing your site, you might face challenges with how images show up. These can include anything from improper dimensions to missing images.

Here’s how to solve some typical image-related issues.

Image size problems

Problem: Images are either too big or too small, throwing off the page layout and impacting the overall experience.

Solution: If you’re using a template or theme, check the suggested image dimensions. Use your site editor to specify render sizes to ensure images aren’t shown at their entire, unaltered size.

Slow image loading

Problem: Images take too long to load or don’t load at all.

Solution: An improper file format can cause oversized files that delay loading times. Fortunately, you can use an image converter or editor to modify the format. SVG is ideal for logos or graphics that need to scale. For other pictures, consider switching to WebP to shrink file sizes.

Blurry or pixelated images

Problem: Images appear unclear or pixelated.

Solution: Upload images with a higher resolution. Resolution indicates how much detail an image holds, typically measured in pixels per inch (PPI). Higher resolution results in a sharper image, no matter the size. If compression is affecting quality, modify the settings or opt for a lossless format like PNG.

Images not displaying

Problem: Images are missing, leaving broken links or empty spaces.

Solution: Check the image URL. It should point to the file’s location. Make sure the image name in the link matches the actual file name exactly, including the extension (.png, .svg, .jpg).

Maximize the impact of your website images

When it comes to your website images, start thinking less in terms of aesthetics and more in terms of user experience.

When you get the dimensions right, your site loads well and looks great on any screen. A good user experience keeps visitors engaged, encourages them to explore more, and improves your site’s overall performance.

Make sure you strike the right balance between file size and quality. With the proper image dimensions and format, your site can deliver the visual appeal users expect without sacrificing speed.

Learn more:

Best image size for websites FAQ

What is the best image format for a website?

WebP is a great choice for improving website performance. Compared to JPEG and PNG, it can reduce file sizes by up to 30% using lossless compression. However, not all browsers currently support WebP.

What is the difference between image size and resolution?

Image size is the measurement of an image’s dimensions (i.e., its width and height in pixels). Image resolution is the level of detail an image contains—and it’s typically measured in pixels per inch (PPI). A higher resolution results in a sharper and more detailed image, regardless of the size.

What can I do to improve my website’s loading speed?

If your web pages are loading slowly, it might be due to large file sizes when uploading images. Compressing images before uploading can help reduce load times and improve the overall performance of your website.

How can I ensure my images look clear on all devices?

To maintain clarity across devices, it’s essential to upload high quality images that match the recommended dimensions for your website. High-resolution images will appear sharp and detailed, whether viewed on a desktop, tablet, or smartphone.

How do I optimize my background image for faster loading times?

To optimize your background image for faster loading, reduce the image file size by compressing it without losing quality. Smaller file sizes ensure that your background image loads quickly, improving the overall user experience on your website.