Best Shopify Image Sizes for 2025 (Complete Guide for Every Image Type)
Shopify image sizes play a bigger role in your store’s success than many realize. If your images are too large, pages load slowly and frustrate shoppers. If they are too small, products look blurry and unprofessional. The right balance keeps your store fast, clean, and trustworthy, which directly impacts how long customers stay and how confident they feel about buying.
In this guide, we share the best Shopify image sizes for 2025, covering product photos, collections, banners, logos, and more. You will also find the best image file formats to use, practical image optimization tips, and a cheat sheet that you can refer to at any time.
Shopify Image Sizes Cheat Sheet & Detailed Guidelines
Before diving into the exact dimensions for each image type, it is important to note that technically, any image size can work in Shopify. The best size always depends on your goal and your theme settings.
Shopify allows uploads up to 5000 × 5000 px and 20 MB, but most stores do not need files that large. For the best balance of quality and speed, we recommend aiming for around 2048 × 2048 px for product images, with a minimum of 800 × 800 px if you want the zoom function to work.
In the table below, we will show the Shopify-recommended product image size quickly.
| Image type | Desktop image dimensions (W × H) | Mobile image dimensions (W × H) | Recommended ratio | Best format |
| Product image | 2048 × 2048 px | 800 × 800 px (minimum for zoom) | 1:1 (Square) | JPEG / PNG |
| Collection image | 1024 × 1024 px | 800 × 800 px | 1:1 (Square) | JPEG / PNG |
| Banner image | 2000 × 600 px | 1200 × 400 px | 16:9 or 21:9 (Wide) | JPEG |
| Hero image (full-width) | 1920 × 1080 px | 1080 × 1080-1350 px | 16:9 (Landscape) | JPEG |
| Logo image | 250 × 100 px (rect) / 200 × 200 px (square) | Scales automatically | Varies (square or rectangle) | PNG / SVG |
| Favicon | 32 × 32 px | 32 × 32 px | Square | PNG / ICO |
| Background image | 1920 × 1080 px or larger | 1080 × 1920 px (portrait) | Flexible (16:9 or taller) | JPEG |
| Image with text overlay | 1800 × 1000 px | 1200 × 800 px | 16:9 | JPEG / PNG |
| Blog featured image | 1200 × 628 px | 1200 × 628 px | 1.91:1 (Facebook OG) | JPEG |
| Slideshow image | 1600 × 600 px | 1200 × 500 px | 16:9 | JPEG |
| Social sharing (OG) | 1200 × 630 px | 1200 × 630 px | 1.91:1 | JPEG / PNG |
| Newsletter image | 600 × 400 px | 480 × 320 px | 3:2 | JPEG / PNG |
1. Product image
For Shopify product image sizes, the best size is 2048 × 2048 px with a 1:1 square aspect ratio. This resolution is sharp enough for zooming and looks clean on both desktop and mobile. Shopify requires a minimum of 800 × 800 px if you want the zoom feature to work.
For example, as you visit a Shopify store like Allbirds, you will notice how all product thumbnails are perfectly square and uniform. This consistency makes the page easy to browse and puts the focus on the products, not on mismatched image sizes.
When uploading product photos, always crop them to a perfect square before adding them to Shopify. If you shoot with a camera or phone, use a photo editor (like Canva, Photoshop, or even Shopify’s free image resizer) to set the crop to a 1:1 ratio. This way, no matter how you photograph the item, it will display neatly across your store.
2. Collection image
Shopify collection image sizes can technically be any size (up to 5000 × 5000 px), but for a clean, consistent layout, a square format works best. A size of 1024 × 1024 px is ideal, though 800 × 800 px still looks sharp.
Consistency matters here, too. If one collection is square and another is rectangular, the layout on your collection page will look uneven. A uniform square shape makes your store look clean and easy to browse.
If your theme allows a full-width banner style for collection pages, you can use a rectangular image (e.g., 2000 × 600 px) instead. Check your theme settings first:
- Grid layout, then square images (1024 × 1024 px) look best.
- Banner layout then rectangular images (wide format) work better.
3. Shopify image banner size
Banner images are often used at the top of homepages or collection pages to highlight campaigns, promotions, or seasonal products. A safe recommendation is 2000 × 600 px on desktop and around 1200 × 400 px on mobile, which works out to a 3.3:1 aspect ratio. This size is wide enough to look polished without being too tall.
On Gymshark, banner image sizes use a 4:1 ratio (e.g., 2880 × 720 px) for an ultra-wide, panoramic look. This keeps the banner slim but still bold, making the content below more visible without pushing it too far down the page.
Here’s the recommendation: always place your main subject or message in the center of the banner. Themes often crop from the sides on mobile, which can cut off details. If your theme supports panoramic banners like Gymshark’s, test both desktop and mobile views in the theme editor before publishing.
4. Hero image (full-width)
Hero images are the big, eye-catching visuals at the top of your homepage. They can technically be any size, but they work best when horizontal and wide. A common recommendation is 1920 × 1080 px (16:9 ratio) because it looks cinematic on desktop and scales well on laptops and larger screens.
For example, on Kylie Cosmetics, hero image sizes often come in around 1920 × 1077 px, which is close to 16:9 but not exact. The important part is that the subject is centered, so it still looks sharp and balanced on smaller screens. Many stores follow this approach, keeping the image wide but not sticking strictly to a fixed ratio.
You should always keep your main subject or message in the center third of the image. Shopify themes often crop from the edges on mobile, and this helps protect the focus. Preview your hero image on both desktop and mobile before publishing, since what looks perfect on a widescreen may lose impact on a phone.
5. Logo image
Your logo is the face of your Shopify store, so it needs to be clear and sharp in all places, from the header to checkout. A safe size is 250 × 100 px for rectangular logos or 200 × 200 px for square logos. Shopify automatically adjusts the logo size to fit your theme’s header, but starting with these dimensions ensures crisp results.
Let’s look at Allbirds. The simple black-and-white wordmark logo is clean and minimal, making it easy to read across desktop and mobile devices without distortion.
Your logo should be uploaded in PNG format (for transparent backgrounds) or SVG format (for scalable images). If you use PNG, keep the background transparent so it blends with any header style. Before finalizing, check how your logo looks in both the desktop header and mobile navigation bar as sometimes a logo that looks perfect on desktop appears too small or cramped on mobile.
6. Favicon
A favicon is the small icon that shows up in browser tabs, bookmarks, and search results. On Shopify, the recommended favicon size is 32 × 32 px, using PNG or ICO format.
Also on Allbirds, the favicon is a simple “a” mark and a stripped-down version of their branding. Even at a tiny size, it stays clean and recognizable, which helps reinforce the brand across devices.
We recommend that instead of trying to fit your entire logo into a small square, you create a minimal icon or lettermark specifically for the favicon. Make it bold and simple to ensure it remains clear, even on high-DPI mobile screens.
7. Background image
Background images are often used for sections like landing pages, full-width blocks, or promotional areas in your theme. A good size for desktops is 1920 × 1080 px, while on mobile a 1080 × 1920 px (portrait) format works better. Since background images stretch and crop depending on screen size, the exact dimensions can vary by theme.
Tips from LitOS:
- Upload a high-resolution image (at least 1920 px wide).
- In your theme editor, add overlay text separately instead of baking it into the image.
- Use the focal point tool (in themes like Dawn) to tell Shopify which part of the image to keep visible on mobile.
- Preview in both desktop and mobile to make sure the subject isn’t cut off.
8. Image with text overlay
This type of image is often used in Shopify sections where text (like headlines or CTAs) sits directly on top of the image. A good size is around 1800 × 1000 px, which gives enough room for both visuals and overlay text.
On Wanderlust + Co, the homepage features a close-up jewelry photo with the message “you deserve jewelry that gets you” and a call-to-action button on top. The image is clean and minimal, making sure the overlay text stays readable.
Always upload a plain image without text baked in, and let the theme editor handle the overlay. That way, your text stays sharp, readable, and responsive across all devices.
9. Shopify blog image size
Blog featured images appear at the top of your Shopify blog posts and also show up when the article is shared on social media. The recommended size is 1200 × 628 px (a 1.91:1 aspect ratio), which aligns with Facebook’s Open Graph standards.
On Allbirds’ blog, the featured image is a clean lifestyle shot that introduces the post and doubles as the preview image when shared. It’s simple, centered, and looks consistent across channels.
Design your featured image with social sharing in mind. Keep the main subject or title text centered so it looks good both on your blog and when pulled into social feeds.
10. Slideshow image
Slideshow images are commonly used on Shopify homepages to showcase multiple promotions or featured products. For optimal results, use a resolution of 1600 × 600 px on desktop and approximately 1200 × 500 px on mobile, maintaining a 16:9 aspect ratio.
For your store, you should place your key subject (product, model, or text area) in the center third of the image. Shopify themes often crop from the edges on mobile, and this helps make sure nothing important is lost when the slideshow resizes.
11. Social sharing images
Social sharing images are what appear when someone shares your store link or blog post on platforms like Facebook, LinkedIn, or Twitter (X). Shopify follows Open Graph standards, so the recommended size is 1200 × 628 px (close to a 1.91:1 ratio).
You can use a dedicated OG image instead of relying on Shopify to auto-pull one. This gives you control over how your store looks on social media and ensures your previews aren’t cut off or blurry.
12. Newsletter images
Newsletter images are the visuals you include in Shopify email campaigns. The best size is 600 × 400 px for desktop and about 480 × 320 px for mobile, with a 3:2 ratio. This keeps your images sharp while ensuring emails load quickly.
You tip for you is to always compress your newsletter images before uploading. A file size under 200 KB is ideal for email, so subscribers don’t have to wait for images to load (or worse, have them clipped).
Every Shopify theme handles images a little differently since some crop banners tighter, some stretch hero images wider, and others let you set focal points. That’s why even if you follow the recommended sizes, it’s worth previewing everything inside your theme editor to make sure your store looks the way you want across desktop and mobile. The right image sizes are the foundation, but theme settings are what bring them to life.
If you’d rather not spend hours testing and adjusting, our team at LitOS can help. We specialize in customizing Shopify themes, optimizing images, and building stores that look stunning while loading fast. Get in touch with us here →
Best Image Formats for Shopify
Beside Shopify image sizes, each image format has its own strengths and weaknesses that affect how your store looks and loads. The right choice depends on what you’re uploading, like a product photo, a logo, or a background. Even if Shopify automatically converts some files for performance, starting with the right format makes a big difference.
Here’s a closer look:
| Format | Strengths | Weaknesses | LitOS recommendation |
| JPEG (JPG) | – Small file size, loads quickly even on slower connections – Widely supported across all browsers and devices – Handles complex colors, gradients, and photos well | – Compression is “lossy,” so some detail is always lost – No support for transparency – Can look blurry if compressed too much | Best for product images and lifestyle photos where file size matters most |
| PNG | – Lossless image quality (no detail lost during compression) – Supports transparency for logos and icons – Renders text, line art, and flat graphics very sharply | – File size much larger than JPEG – Can slow down pages if used for large photos | Use for logos, icons, graphics, or images needing transparency |
| WebP | – Smaller file size than JPEG/PNG at similar quality – Supports both transparency and animation – Widely supported by modern browsers- Shopify auto-delivers WebP when possible | – Not supported by very old browsers – Harder to edit directly compared to JPEG/PNG | Upload JPEG/PNG, let Shopify serve WebP automatically for speed |
| SVG | – Infinitely scalable without losing quality – Perfect for logos, icons, and simple vector designs – Lightweight for flat graphics | – Limited Shopify support (not resizable or editable in the same way as raster images) – Can cause issues if too complex | Best for logos, flat icons, simple brand marks |
| GIF | – Supports basic animation – Universally supported – Good for very small, simple moving graphics | – Very poor for photos (grainy quality) – Large file sizes slow down performance – Outdated compared to video or WebP animations | Avoid for photos; only use for small, simple animations |
Even though Shopify supports many formats, each one has its place. JPEG is still the most suitable for product photos because it balances quality and speed, while PNG and SVG shine when you need crisp logos or graphics with transparency.
Behind the scenes, Shopify will often serve WebP automatically to keep your store fast, so you don’t have to worry about it. GIFs, on the other hand, are best left out if you want movement, WebP or video will give you sharper results with quicker load times.
Best Practices for Shopify Image Sizes
1. Use consistent aspect ratios across your store for uniform design
At LitOS we have seen stores lose their professional look just because product photos were cropped in different shapes. Some were square and others rectangular, and the result was a messy grid. Keeping all your product images the same ratio, usually square 1:1, makes the layout clean and easy to browse.
2. Always upload high-resolution images (up to 2048 px or higher) for zoom
Shoppers often zoom in to check fabric, texture, or fine details. If your images are low resolution, the zoom feature only highlights the blur. Uploading high-quality images around 2048 px ensures products look sharp at every size. Shopify automatically creates smaller versions, but it cannot improve a poor image.
3. Compress images before uploading to reduce file size
A slow store can frustrate visitors before they even see your products. At LitOS we always compress images before uploading using tools like TinyPNG or Squoosh. The result is a lighter file that loads faster, yet still retains its crisp appearance. This one step can make a big difference in conversion rates.
4. Place focal points in the center for banners and slideshows to prevent cropping
Large visuals often look great on desktops but can lose important details on mobile devices. Many themes crop up when the screen is smaller. Keeping the subject or message centered makes sure your images still look good across all devices.
5. Test on both desktop and mobile to check responsiveness
Every Shopify theme treats images a little differently. At LitOS we always preview stores on both desktop and mobile before going live. This helps catch issues like cropped banners, stretched logos, or uneven thumbnails before customers notice them.
Images are not just decoration. They guide the customer’s eye, create trust, and support the buying decision. When your visuals are clean and consistent, the entire store feels more professional and reliable.
FAQs about Shopify Image Sizes
Does Shopify have strict image size requirements?
Shopify does not force you into one exact size, but there are limits. The maximum is 5000 × 5000 px and 20 MB per image. For best results we recommend staying closer to 2048 px for sharp detail without slowing down your store.
Does Shopify automatically resize images?
Yes. When you upload a high-quality image, Shopify creates different versions for thumbnails, collections, and product pages. This saves you time, but it also means you should always start with the highest quality version you have.
Does Shopify compress images?
Shopify applies automatic compression so your store loads faster. In most cases the difference is invisible to the customer. At LitOS we still recommend compressing before upload so you control the balance between speed and quality.
Why are my Shopify images blurry?
Blurry images usually come from uploading files that are too small or overly compressed. Even if your theme stretches them to fill the space, the quality will not improve. Always upload images at least 2048 px on the long side to stay sharp.
Key Takeaways
Optimizing your Shopify image sizes is one of the simplest ways to improve both the look and performance of your store. The right dimensions make your pages load faster, keep your design consistent, and give customers the confidence to buy.
At LitOS we see image issues hold stores back all the time, and the fix is usually quick once you know what to look for. If you want help setting up your Shopify store with the right image sizes, layouts, and theme settings, our team can make it easy. A well-optimized store does not just look good, it sells better.
Have a project in mind? Contact us now →
