Website Image Size Guidelines for 2024 - Shopify (2024)

Today, more people browse the internet on mobile devices than on desktop computers. With a variety of screen sizes in use, you need to choose the best image sizes when you build your website, so that all your visitors have a good user experience—no matter their device.

If you don’t optimize your images, your website visitors might see images that are too small and blurry, or too big, increasing load times and forcing unnecessary scrolling and zooming.

The good news is it’s easy to make your images compatible with multiple devices. By choosing the right image dimensions, keeping file sizes minimal, and using a responsive website design, you can provide a top-notch browsing experience.

Follow the tutorial below to optimize your images for mobile and desktop devices.

Best image size for websites

Pixel width: 2500 pixels is perfect for stretching full-screen across a browser in most cases. Any image smaller than that might get cut off or appear blurry if it needs to fill the browser width.

Image size: The best overall (pixel) size of your images depends on your use case, e.g., background images need to be bigger than a blog post image.

File size: Anything bigger than 20 megabytes in size can dramatically impact your website speed. Smaller images (up to two megabytes in size, but around 500 kilobytes) are better in most cases.

Image attribute: Image attributes (alt text or alt tag) are text-based and don’t impact your website’s performance. However, they are used to interpret images via screen-reader software, so keep attribute text short and concise.

Best image dimensions for desktop and mobile devices

The table below provides the recommended dimensions for images on both desktop and mobile websites:

These are suggested sizes, which may need to be adjusted based on whether you use a responsive website design.

It’s almost always a good idea for the render size of your images to be smaller than their upload size.

Why is image size important for websites?

For websites, image size is important for three main reasons:

• It creates a better user experience.
• It improves website page speed.
• It helps with website ranking.

Creates a better user experience

Having correctly sized images for every use case on your website helps improve the user experience. Visitors can access an appropriate level of detail, and won’t need to scroll to see the entire image.

When images are low-quality, pixelated, or too small, they can impact the perceived quality of your content. For an ecommerce website, this could lead to customers questioning the quality of your business or products.

Conversely, high-quality, correctly sized images enhance the perceived value of your products and deliver more visual information to potential customers.

For example, see how these images from sustainable shoe store Allbirds enhance the user experience by clearly pointing out the various features of their product:

Improves website page speed

When you upload large images to your website, it takes longer for the server to load the page. Smaller images (both in dimensions and file size) tend to load more quickly across devices.

Image loading speed is often referred to as “contentful paint.” You can check your web page’s contentful paint and other page-speed metrics using Google’s PageSpeed Insights.

Here’s an example of slow page-loading speeds caused by large images. The server took 2.1 seconds to load the first image and 4.1 seconds to load the largest image:

When half of customers abandon shopping carts if pages take more than six seconds to load, it’s important to optimize your page speeds to avoid a high bounce rate.

Helps website ranking

Website ranking refers to the position of your website in search engine result pages. Websites optimized for search will rank highly for relevant user search queries.

Google uses a host of metrics to determine which web pages rank at the top of their search results. The quality of images (or, more accurately, the improved user experience they generate) is a likely factor in Google’s algorithm.

Website image size guidelines

There are five main types of images you’ll see on a website:

• Background images
• Hero images
• Website banner images
• Blog images
• Logos

Different size requirements apply to each type of web image. Let’s take a look at the most common sizes.

Background images

Background images are generally the largest images on a website. The image serves as a backdrop to a homepage or other landing page.

For example, bicycle retailer Cowboy lets its product take center stage by using it as a homepage background. It fills the screen, no matter what device it’s viewed on.

Recommended image width: 2560 pixels

Recommended image height: 1400 pixels

Aspect ratio: 16:9

Recommended file size: 20 MB

Hero images

Hero images are similar to background images but tend to be smaller in height—about half the size. A hero image is a great option if you need to feature more text on the screen without making users scroll to see it.

In the example above, BLK & Bold uses a hero image with a narrow aspect ratio to fill the screen yet leave room for content beneath.

Recommended image width: Between 1280 pixels and 2500 pixels

Recommended image height: Between 720 pixels and 900 pixels

Aspect ratio: 16:9

Recommended file size: 10 MB

Website banner images

Banner images can be different sizes and shapes, depending on where they live and what you want to show your visitors. The most typical type of website banner is a banner ad.

Google Ads is one of the most popular services for promoting banner ads. They provide sizing guidelines for submitted images:

If you’re thinking about a banner image that’s not an ad, the rectangular options (e.g., 300 x 200 pixels or 970 x 90 pixels) are generally better.

Recommended image width: Check with the ad platform

Recommended image height: Check with the ad platform

Aspect ratio: Various

Recommended file size: 150 KB (Check with ad platform)

Blog images

Blog images can vary in type and size. The post above comes from sleep experts Kulala, and while the upload size of the featured image is 1200 x 620 pixels, the rendered size is smaller, at 894 x 462 pixels.

Setting a render size for your web pages helps refine your design and keeps files small (the image in the Kulala post is just 95.1 KB).

When it comes to the main header images of your blog posts (those at the top of the page), they should be uniformly sized across your blog.

Recommended image width: 1200 pixels

Recommended image height: 800 pixels

Aspect ratio: 3:2

Recommended file size: 3 MB

Logos

Your logo will likely be one of the smallest images on your website (unless you count the favicon in the tab bar). Depending on your logo design, you should opt for either a rectangular or square aspect ratio.

Most logos lend themselves to a square 1:1 ratio, which you can see in the bottom-left of the Kulala example above.

Rectangular ratios work well for longer brand names or where the logo consists of words rather than a graphic. Shopify’s own website logo uses a longer 4:1 ratio.

Recommended image width: 100 pixels

Recommended image height: 100 pixels

Aspect ratio: 1:1, 2:3, 4:1

Recommended file size: 1 MB

Mobile image size recommendations

Choose the right image dimensions

On smaller mobile screens, many users appreciate being able to zoom in on an image. So, try to strike a balance between image size and file size.

High-resolution images give your website a professional and well-rounded look, with great zoom capabilities. Keep the aspect ratio of similar images the same to maintain a uniform design across page types.

For example, you might make all product images in an ecommerce store square. Square images are easier to reposition on smaller screens. Additionally, square and vertical images fit well on mobile screens, allowing visitors to see more of your images without needing to scroll.

Keep file size in mind

Images with larger file sizes can impact your site’s speed, especially when visitors are using a smartphone. Many website-building platforms also have maximum file size constraints on uploads. For example, Shopify uses a maximum file size of 20 MB.

If you need to compress your images to reduce their size, there are online image resizing tools that can help. With these tools, you can reformat large image files into new dimensions or file types.

For the most part, you’ll want header background images below 10 MB, while product photos should be much smaller—around 300 KB.

Resize photos for mobile screen dimensions

Shopify automatically resizes your images to fit smaller screens. But on other platforms, images may require manual editing to make them mobile-ready. Keep in mind desktop and mobile screens have opposite orientations.

Again, remember large files slow down your site’s loading time. While lossless compression can give you the highest quality image, it often creates large files that may take forever for your website to load. Consider using the smallest image files with the best resolution.

While Shopify’s responsive designs and algorithms are good at resizing and displaying your images across devices, giving them a hand with thoughtful file sizing can make for a smoother shopping experience.

What is the best image file type to use?

The right image file type ensures high-quality images, while keeping the file size manageable for better website performance.Here are the most common image file formats and their best use cases:

JPEG

JPEG (or JPG) is one of the most widely used digital image file formats because it offers a balance between file size and image quality. It’s a popular choice for displaying photographs and complex images with many colors.

However, JPEG uses lossy compression, which means some image quality is lost when the image is compressed.

PNG

PNG is a lossless compression format, meaning it reduces file size without sacrificing image quality. It supports transparency, making it a good choice for images that require a transparent background.

While PNGs often have larger file sizes than JPEGs, their ability to retain their clarity makes them suitable for detailed graphics and logos.

SVG

SVG (scalable vector graphic) is a vector image format, meaning it uses mathematical equations to render an image. This allows SVG images to be scaled to any size without quality loss.

SVG is an ideal format for logos, icons, and other graphics that need to be used in multiple locations. SVGs are also typically smaller in file size than other formats, helping to improve load times.

HEIC

HEIC, or high efficiency image format, is a file format used by Apple devices. It uses advanced compression technology to create high-quality images with smaller file sizes than equivalent JPEGs.

However, HEIC is not universally supported on non-Apple devices.

WebP

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.

This can significantly improve website load times, but it's worth noting that WebP is not yet universally supported by all browsers.

GIF

GIF is a bitmap image format known for its ability to support simple animations. It uses lossless compression and reduces images to a maximum of 256 colors, resulting in smaller file sizes.

While GIF has largely been replaced by PNG for static images, it remains a popular choice for short, looping animations and is universally recognized by browsers.

TIFF

TIFF, or tagged image file format, is a high-quality, lossless format widely supported by image-editing applications. It's ideal for storing images for professional printing due to its high resolution and color depth.

With TIFF, multiple images and pages can be conveniently saved in a single file. However, file sizes tend to be large.

How to find out image sizes on a website

The fastest way to look up the size of an image on any web page (without downloading the image) is to use your browser’s Inspect tool.

This method works on Mac and Windows, with Safari, Chrome, or Firefox browsers.

Go to the web page and hover over the image you want information about. Right-click with your mouse to bring up the option menu and look for Inspect:

Clicking on Inspect will bring up the page’s HTML code (it can look intimidating, but don’t worry).

In the inspection panel, information about the image you clicked on should be highlighted. When hovering over the relevant code, the image will also become highlighted:

In this case, the browser tells you how many pixels the image is using. If you resize the webpage, that figure will change accordingly.

If you’re looking for the original upload properties of the image, hover over the image storage link:

To exit the inspector panel, just click the X in the top-right corner.

Image optimization tools

Online image optimizer tools are a simple, fast (and usually free) way to resize your website’s images. Here are three popular image optimization tools:

• Image Resizer
• Image Optimizer by Squirai
• LoyaltyHarbour Image Optimizer

Image Resizer

Shopify’s free online image resizing tool is a convenient way to adjust your images for use across marketing channels and social media.

You can choose from a variety of official dimensions for Instagram posts and stories, YouTube thumbnails, and other types of social content.

Image Optimizer by Squirai

Squirai’s image optimizer tool is speed-tested to ensure your images are SEO-ready. It automatically optimizes all the images on your website—including new ones you add later on.

Plus, you can customize and apply a watermark to protect your product photography without needing to know any code.

LoyaltyHarbour Image Optimizer

LoyaltyHarbour Image Optimizer works similarly to the tool by Squirai, automatically compressing images across your website.

In addition, the dashboard allows you to automatically set image alt text and convert to the best image file type for better page speed.

Alternatively, if you have the ability, you can also use Photoshop to help reduce the file size. But this can be a more complicated process than the above tools.

Troubleshooting: image formatting issues

As you manage your website, you’ll probably encounter image formatting issues at some point. Issues with images can range from incorrect sizing to broken links.

Let's look at solutions to some common problems with website images.

Incorrect image size

Issue: Images appear too large or small, and may break the layout of a webpage, resulting in a compromised user experience.

Fix: If you are using a website theme or template, look for resources on the correct image dimensions for your design. In your website builder, be sure to select render sizes for each image so that images don’t display in their full, original size.

Slow loading times

Issue: Images load more slowly than the rest of a webpage—or not at all.

Fix: The wrong file format can lead to unnecessarily large file sizes that affect loading times. Use an image editing or conversion tool to change the file format of your images. For graphics or logos, consider using SVG for scalability without loss of quality. For other images, consider converting to WebP to compress large files.

Poor image quality

Issue: Images appear pixelated or blurry.

Fix: If your images appear pixelated or blurry, try sourcing a higher-resolution version. Remember, image resolution differs from image size. Resolution refers to the amount of detail an image holds, often measured in pixels per inch (PPI). A higher resolution means a sharper image, regardless of size.

If image quality is being reduced by compression, adjust its compression settings or switch to a lossless compression format like PNG.

Images are not displaying at all

Issue: Broken image links resulting in no image appearing.

Fix: Verify the source URL of your images. This URL should lead directly to the location of your image file. Compare the image file name in the URL with the actual name of your image file. They should match exactly, including the file extension (.jpg, .png, .svg).

Optimize website images for success

Adding images to your website isn’t just about making things look good—it's a key factor for enhancing user experience and boosting search engine rankings.

The size of your images affects both of these elements. Too large, and your web pages may load slowly. Too small, and your images can appear pixelated or blurry.

Be sure to understand the image dimension requirements of your website design, and pick the right file format to balance image resolution and file size.