Appearance
Image guidelines
Images are a key part of your store's success. High-quality, consistent, and optimized images make your store look professional and appealing to shoppers. Follow these tips before uploading your images to Shopify:
Sizes
To maintain a professional appearance for your store:
- Always use high-resolution images to ensure crisp and clear visuals.
- Avoid low-resolution images, as they can appear pixelated and make your site look unpolished.
- Suggested minimum dimensions for different image types:
Image Type Minimum width Description Product images 1280 pxOptimal clarity and zoom functionality. Banner images 2048 pxBalanced resolution across devices. Collection images 1280 pxConsistent and sharp appearance for collections.
Optimizing your image size ensures a polished and professional online store.
Aspect Ratio
Aspect ratios depend on the image type and the intended use of the image. However, there a few general guidelines to keep in mind:
- Consistent aspect ratio: Use the same aspect ratio for similar image types to ensure neat side-by-side display.
- Uniform product images: Ensure all product images within a collection have the same aspect ratio for a cohesive look.
- Edit with tools: Use Shopify’s image editor or external tools to crop images to the desired aspect ratio before uploading.
Formats
These are the formats that we recommend for your images so that they are optimized for the best possible performance.
| Format | Use Case |
|---|---|
WEBP | Great quality and faster loading times; also supports transparent backgrounds. |
JPG | Ideal for high-quality images with faster loading times (no transparency). |
PNG | Best for images requiring a transparent background. |
GIF | Avoid using GIF due to their large file size and slow loading times. Use MP4 videos, where possible, as an alternative. |
Optimization
Large image files can slow down your website, which may drive customers away. Optimizing your images helps achieve a balance between great quality and fast page load speeds.
Editing software
To optimize and resize your images to the same size, you can use the following software:
- Figma
- Affinity photo
- Canva
- Photoshop
- Apple photos
Compression tools
Here are some FREE tools you can use to optimize your images:
Conversion tools
Additionally, you can convert images:
Image tips
Follow these tips to make your images stand out and enhance your store’s professionalism:
- Use appealing product images that grab customer attention.
- Stick to plain white backgrounds for a clean, professional appearance.
- Showcase clothing or accessories on a mannequin or model for better presentation.
- Include multiple angles of your products for clarity and improved customer experience.
- Always use high-resolution images to avoid blurred or pixelated visuals that harm credibility.
- Ensure a consistent aspect ratio for all images of the same type to maintain visual harmony.
- Optimize your images for fast loading times to enhance user experience and reduce bounce rates.
- Include zoomable images to allow customers to see fine details of your products.
- Use lifestyle photos to demonstrate products in real-world scenarios, making them more relatable.
- Add alt text to your images to improve SEO and ensure accessibility for visually impaired users.
- Keep file sizes under 10 MB and use formats like WEBP or JPG for quality and speed balance.
- Perform regular image audits to update outdated images or replace underperforming ones.
Bullet image sizes
IMPORTANT
While we provide recommended image dimensions, the actual display size may vary depending on the screen size.
- To maintain aspect ratio, browsers may crop images to fit their containers.
- To avoid cutting off important parts, leave extra space around the main subject of your image.
Landscape
Used for full-width banner images such as: Hero banner, Video hero, Slideshow
| Minimum size (Width x Height) | 2000x1125px |
| Recommended aspect ratio | 16:9 |
| Recommended format | .webp or .jpg |
| Download example image | Download |
TIP
Use high-resolution images with extra space around key content to ensure your banner looks great on all screen sizes.
Portrait
Used for vertical layouts with multiple columns such as: Product card, Hero multicolumn, Image with text, Product page, About page, Password page
| Minimum size (Width x Height) | 800x1422px |
| Recommended size | 1080x1920px |
| Recommended aspect ratio | 9:16 |
| Recommended format | .webp or .jpg |
TIP
Make sure to use a consistent aspect ratio for all the images of a particular type to make them display better side by side.
Square
Used for layouts such as: Blog featured image, Reviews
| Minimum size (Width x Height) | 900x900px |
| Recommended size | 1080x1080px |
| Recommended aspect ratio | 1:1 |
| Recommended format | .webp or .jpg |
Logos
Used for layouts such as: Header logo, Logo list, Press page
| Minimum size (Width x Height) | 400x250px |
| Recommended aspect ratio | 16:9 |
| Recommended format | .webp or .png |
Product image
Recommended sizes for your product images depend on the Product card aspect ratio you've selected in your theme settings.
If you're using the Portrait aspect ratio:
| Minimum size (Width x Height) | 1080x1920px |
| Recommended aspect ratio | 9:16 |
| Recommended format | .webp or .jpg |
| Download example image | Download |
If you're using the Square aspect ratio:
| Minimum size (Width x Height) | 1080x1080px |
| Recommended aspect ratio | 1:1 |
| Recommended format | .webp or .jpg |
| Download example image | Download |
If you're using the Landscape aspect ratio:
| Minimum size (Width x Height) | 1280x720px |
| Recommended aspect ratio | 16:9 |
| Recommended format | .webp or .jpg |
TIP
Make sure all your images use a consistent aspect ratio. This helps avoid layout issues like uneven grids or unexpected cropping.
Collection featured image
Recommended size for the featured image shown at the top of a collection page.
| Minimum size (Width x Height) | 1200x500px |
| Aspect ratio | 12:5 |
| Recommended format | .webp or .jpg |