Taiga Image Size Cheat Sheet
Selecting the right image dimensions is crucial for creating a visually appealing and functional online store. In this article, we'll discuss the importance of choosing the right aspect ratios and dimensions for your images and provide some recommendations to ensure your website looks great on all devices.
Choosing the right image dimensions and aspect ratios ensures your images look great on various devices and screen sizes. Rather than focusing on specific pixel dimensions for your theme, it's essential to consider Shopify's image limits and choose dimensions that match your desired aspect ratio.
Supported aspect ratios
Our theme supports multiple aspect ratios in different sections, allowing you to tailor your images to fit the design and layout of your store. The supported aspect ratios include:
- Natural (automatic aspect ratio)
- Portrait (2:3)
- Portrait (3:4)
- Square (1:1)
- Landscape (4:3)
Recommendations for hero elements
For hero elements, we recommend using landscape dimensions for desktop images and portrait dimensions for mobile images. If you're unsure, you can use 16:9 or 4:3 ratios (and vice versa).
Image optimization and automatic resizing
Our theme automatically optimizes image sizes for different devices, ensuring your images look great on any screen. This feature takes the guesswork out of resizing images and allows you to focus on creating a visually appealing online store.
Shopify image size suggestions and upload limits
Shopify provides guidelines for image sizes and upload limits. Images uploaded to Shopify can't exceed either of the following limits:
- 20 megapixels
- 20 megabytes
For more information on Shopify's image size suggestions, refer to this article: https://www.shopify.com/blog/image-sizes
Troubleshooting: Colors are not displayed properly
When you view an image on your online store, the colors in the image might look different from those in the original that you uploaded to Shopify. This discrepancy can occur due to color profiles.
Color profiles are sets of data stored in files with .ICC or .ICM extensions, often embedded into images to help standardize the way colors appear on different devices. These profiles ensure that images look consistent across various screens and devices.
However, when images are displayed on your online store, their color profiles are removed. This removal can result in slight color differences between the original image and the one displayed on your website.
However, when images are displayed on your online store, their color profiles are removed. This removal can result in slight color differences between the original image and the one displayed on your website.
To mitigate this issue, consider the following steps:
-
Check if your image editing software allows you to save images without an embedded color profile. Saving images without color profiles can help ensure that the colors you see during the editing process will be closer to those displayed on your online store.
-
Use the sRGB color profile when editing your images. This profile is widely supported across devices and web browsers, making it the most suitable choice for online use.
-
If you still experience color discrepancies after following the above steps, consider adjusting the colors in your images to account for the differences in display.
For more information on managing images and color profiles in Shopify, visit: https://help.shopify.com/en/manual/online-store/images/theme-images
Conclusion
Understanding the importance of image dimensions and aspect ratios can help you create a visually stunning and functional online store. By selecting the right aspect ratios and dimensions, optimizing images for various devices, and adhering to Shopify's image limits, you can ensure your store looks great on all screens. If you have any further questions or need assistance, don't hesitate to contact our support team.