Do your Shopify banners looking pixelated, cropped, or just... wrong? Getting your Shopify banner dimensions right isn’t just about looks — it’s key to site speed, UX and Search Engine Optimisation (SEO).
I always tell people that image optimisation is as much of an art as it is a science. There’s a balance to be struck between what looks good (crisp, sharp image that fits well into its space on the page) and what is technically good (small file size, the correct pixel dimension size and the most appropriate file format).
Here I try to break down the best sizes, aspect ratios, and optimisations to help you create better banner images for your website.
And while there is a focus on Shopify here (that’s what we get asked the most often), it really applies to any website.
So, what are the best Shopify banner dimensions?
The key to a successful Shopify store banner is responsiveness. Your image has to look right on large desktop screens, tablets devices down to a small mobile device. Review your analytics, but your shoppers are viewing your website from a variety of devices.
While Shopify themes can vary, there’s a general sweet spot for a page banner (you might think of this as a ‘Hero Image’ or ‘Slideshow’) that offers the best balance of visual impact and loading speed.
Recommended Shopify banner dimensions
Banner and hero images are used differently throughout your website, but here are some guides to get you started. Remember these aren’t strict guidelines. Every image and website means you have to pay attention to each image individually if you really want to optimise your website.
Home page Hero / Slideshow Banner
- Recommended width desktop: 2000 - 3000 pixels, minimum 1200 pixels
- Recommended width mobile: 1000 pixels
- Aspect ratio: usually full-page or widescreen on desktop, so 3:1 or 16:9
- Notes: Home page heroes often are slightly larger than more regular pages, so if they fill more height, file size will be impacted
General website banner
- Recommended width desktop: 2000 - 3000 pixels, minimum 1200 pixels
- Recommended width mobile: 1000 pixels
- Aspect ratio: usually more likely widescreen on desktop, so 16:9
- Notes: General pages, such as collection pages, often have a slightly smaller screen real estate.
Product images
Note: You can also check out our guide to what makes a great Shopify product image. Product images aren’t technically the same as banners, but they’re often confused — and some Shopify themes even use a lead product image as a banner-style feature.
- Recommended width desktop: 2000 pixels, minimum 1200 pixels
- Recommended width mobile: 1000 pixels
- Aspect ratio: product images are often square, so 1:1 ratio is common
Blog feature images
- Recommended width desktop: 1800 pixels, minimum 1200 pixels
- Recommended width mobile: 1000 pixels
- Aspect ratio: this is theme dependent
Are there any minimum banner dimensions that I need to adhere to?
Yes, we’d recommend aiming for a minimum width of at least 1200 pixels on the desktop view to help ensure a sharp image, and also if your theme uses this image for Open Graph (OG) images—the ones that appear when you paste a link into another platform and an image magically appears—1200 pixels is usually the minimum they require.
If your theme provides you an option for a separate mobile image, like many do, go for a minimum width of 800 pixels. Mobile images often have a different orientation, so the longest side will be the height, and we don’t want to create a large file file size for the smallest device.
Shopify banner optimisation tips for SEO and Speed
Choosing the best image dimensions is important for two reasons. First, it help keep the file size down, and secondly, a 6000 pixel image that will never be seen in a screen space above 3000 pixels wide is bad practice and not good SEO.
Optimising that image for speed is what the SEO bots (and your customers) really care about. Larger dimensions equal larger file sizes equals slower loading pages. And this is a big no no.
A beautiful but gigantic banner image can crush your page load speed, directly hurting your SEO rankings and increasing bounce rate.
Four important banner optimisation considerations
File size is king, but not at the expense of user experience:
Your banner file size should ideally be below 300 KB for desktop images, and below 180KB for mobile. Remember this is an art, not a science! For example, if your mobile image looks pixelated or blurry when you optimise it to 180KB, then turn the dial and accept that this particular image will be slightly larger. We recommend using Squoosh to optimise your images.
Use the right format:
JPG is best for your Shopify banners. Don’t use PNG. This is typically used for images such as logos requiring a transparent background (although modern best practice would suggest using WebP in this scenario), but rarely used for banners images.
Why use JPG and not WebP, which is a far better format?
When you upload a JPEG image to Shopify, it will automatically create a series of images in the background. These images will be further optimised WebP images.
It will serve these images to modern web browsers that support WebP, but if a customer is browsing your store on an older browser that doesn’t support WebP, Shopify will show the optimised JPG that you uploaded.
Also, Shopify automatically serves these optimised images through its enterprise-grade CDN, ensuring fast delivery to customers worldwide.
Descriptive filenames:
Never upload an image named IMG_0024.jpg. Rename it to something relevant, like womens-summer-sale-banner.jpg.
Also, don’t use spaces in the file name, use dashes (not underscores!). This helps Google and the other search engines read the file name.
Alt text is non-negotiable:
This is an important SEO opportunity! Use descriptive, keyword-rich alt text that explains the image. Alt text is primarily there to assist impaired users, but search engines read this text as they crawl your website. In recent times, alt text is becoming considered less of a valuable direct-SEO benefit, but it is hugely important for accessibility, which in turn is considered good SEO.
- Bad Alt Text: “Banner image”
- Good Alt Text: “Shopify summer sale banner featuring 20% off women's activewear collection”
Some frequently asked questions
Q: What is the ideal width for a Shopify banner image?
A: The ideal width for a Shopify banner is generally between 1600 and 2000 pixels. The end game is an image that looks sharp when stretched across large desktop monitors and maintains a good resolution when resized for smaller screens.
Q: What is the maximum file size for a Shopify image upload?
A: Shopify allows a maximum file size of 20 MB per image. However, for a banner image on your homepage, you should aim to keep the file size below 300 KB to maintain fast page load speeds, and ideally if you can upload separate images for mobile view, below 180KB.
Q: How can I make my Shopify banner mobile-friendly?
A: Most modern Shopify themes handle image responsiveness automatically. To ensure the best result, use a wide aspect ratio like 16:9 or 3:1 for desktop, and remember that on mobile, if your theme doesn’t offer an option for a separate mobile image, it will often crop the sides or show a more square/portrait version. Make sure any text overlays on a mobile are clear and legible when overlaid across the image.
Q: Should I use a high DPI for my banner images?
A: No. Images on the web are typically displayed at 72 DPI (dots per inch). Uploading images with a higher DPI (like 300 DPI, which is for printing) will only increase the file size unnecessarily without improving the on-screen quality. Always export your web images at 72 DPI.
In short…
Don't let blurry visuals or slow load times cost you sales. Mastering your Shopify banner dimensions when optimising your images is a simple but powerful conversion rate and SEO optimiser. Aim for high-width, moderate-height dimensions (like 1600 x 500 px), think mobile-first and make a separate mobile optimised image if you are able, and compress your file size to under 300 KB. And do not forget to nail that descriptive alt text!
Does this all sound a little daunting? We can help, just get in touch with us and we can help you optimise much more than just your Shopify banner dimensions.
