Guide to Re-Sizing Images for Shopify’s High-Res Support
- Shopify's high-resolution image support allows merchants to upload large, detailed product photos that look sharp on any device.
- However, merchants must properly optimize images beforehand by compressing files and resizing for thumbnails, galleries, and zooms to balance visual quality and site performance.
- Leveraging image optimization tools and DAM systems can simplify managing and delivering optimized assets to utilize Shopify's high-res capabilities fully.
In this Article
With online shopping more popular than ever, how your product images look on your Shopify store has never been more critical. In fact, a Baymard Institute analysis ascertained that the first action for most eCommerce users after arriving on the product detail page is to begin exploring product images immediately. Yet despite the necessity of high-resolution product images, the analysis found that 25% of the evaluated online stores provide low-quality images that prevent visitors from performing a visual evaluation and exploring a product. Consequently, many would-be customers abandoned products because the available details could not lead to a purchase decision.
Otherwise, crisp, high-resolution photos can help your products engage customers, while blurry, low-quality images can hamper sales. Fortunately, Shopify has recently introduced support for high-resolution images, allowing merchants to upload sharp photos that look fantastic on any device. But with great power comes great responsibility – you need to properly optimize the product images to take full advantage of Shopify’s high-res image support.
This guide will teach you tips and best practices for optimizing product images to ensure clarity, visual impact, and fast loading times. But first, let’s review the critical reasons for using optimized images on your online store.
| In this article you'll learn: | |||
|---|---|---|---|
Why Optimized Images Are a Critical Component in eCommerce
- Improved page loading speeds – Images can easily be the largest files on a web page, so unoptimized images that are overly large or uncompressed can significantly slow down page load times. This creates a poor user experience and hurts your rankings with search engines like Google that factor page speed into SEO. Compressing and properly sizing images keeps file sizes small so Shopify pages load quickly.
- Better user experience – When product images are appropriately sized and formatted for the device and screen they display, it creates a smoother, more seamless shopping experience for customers across devices. On the contrary, pixelated, blurry images on mobile or high-res displays create a poor experience.
- Visual consistency – If image sizes and compression formats vary widely, it can lead to inconsistent visuals across your site. Instead, proper optimization preserves image quality and consistently displays branding and visual assets across platforms.
- Search engine optimization (SEO) – Optimized images use proper alt text for better indexing by search engines. Images with compressed sizes also help pages load faster, an essential factor in SEO. Better yet, the page load speeds gain immensely from suitable image file formats, such as WebP.
- Mobile-friendliness – With more shopping happening on mobile devices (e.g., an OuterBoxDesign study established that at least 79% of smartphone users made an online purchase in the last six months of 2022, and smartphones accounted for over 50% of all eCommerce purchases during the 2022 holiday season), a mobile-optimized Shopify site is likely to outcompete those without optimization. In other words, a competitive store must use optimized images to enhance shoppers’ mobile experience by taking up less data and loading faster on slower networks.
- Cost savings – Smaller optimized images use less bandwidth and put less strain on servers. This significantly reduces monthly hosting costs and improves site performance without needing more expensive hardware.
- Faster product updates – Optimized images can be uploaded and processed faster when adding new products or updating inventory. This keeps your catalog current and avoids delays.
- Company brand reputation – Using pixelated, distorted, or blurry images reflects poorly on a brand, conveying a lack of care for detail and visual presentation. Contrarily, properly optimized images project a polished, professional appearance.
How Shopify Handles and Converts Images
Images are a crucial part of Shopify themes and stores – they’re used for product photos, logos, icons, and more. The platform makes it easy for users to upload images so much that many merchants mistakenly believe that when they do so, the theme or platform will automatically modify, resize, or compress images to optimize them.
Far from it. On the contrary, Shopify does not actually change or edit the original image files. Instead, the merchant is responsible for tweaking each image appropriately (such that it meets crucial standards for web images) before uploading them. Shopify simply delivers and displays the photos as they are provided.
Besides the standard web image display specifications, Shopify uses unique criteria to ensure users meet a high level of quality while not impacting the performance of stores. To appreciate the importance of these requirements, we must re-acquaint ourselves with why optimal image sizing matters. Three primary reasons drive the need to resize images (and videos) specifically for Shopify without compromising on quality. They include:
- User experience
- Page speed
- Search engine ranking
Shopify requirements are grouped into three categories based on the digital asset, i.e., image, video, and generic (document) files.
Shopify's Image Requirements:
- File Size: Your image files should be a maximum of 20 MB (megabytes).
- Resolution: They should have a maximum resolution of 20 MP (megapixels).
- Aspect Ratio: The aspect ratio should fall between 100:1 and 1:100.
- File Formats: Shopify accepts JPEG, PNG, WEBP, HEIC, and GIF formats.
Shopify’s Video File Requirements:
- File Size: Video files must not exceed 1 GB (gigabyte).
- Resolution: The maximum video resolution allowed is 4K.
- Video Length: Videos should be no longer than 10 minutes.
- File Formats: Accepted video formats are MOV and MP4.
Shopify’s Generic File (PDF) Requirements:
- File Size: Generic files should have a maximum size of 20 MB.
- File Formats: Any file type is accepted except HTML.
Shopify’s ultimate objective with the requirements is to allow large, detailed product photos that look incredibly crisp on high-res displays, and abandoning the rules has a steep penalty. For example, not optimizing massive 12MP (megapixel) or 24MP images from a digital camera will result in long load times and wasted bandwidth. Likewise, uploading tiny, low-res images will display poorly across devices. Therefore, meeting Shopify’s resolution, aspect ratio, and format specifications ensures images fully utilize Shopify’s high-res support for maximum quality.
Shopify's Content Delivery Network (CDN)
A CDN is a network of proxy servers and data centers spread out across different locations. Its primary purpose is to provide web content to users in a faster and more efficient way. The CDN stores cached content on edge servers closer to users, which helps reduce delay. It achieves this through caching, which involves storing a copy of your site’s content in various servers (often called proxy servers) located in different places worldwide. Put simply, a CDN is a network of tightly linked servers whose primary job is to deliver web content as securely, reliably, cheaply, and quickly as possible. Shopify leverages the system specifically to distribute image assets and files to data centers worldwide to deliver them to users quickly.
Here is the low down of how the Shopify CDN works. When a merchant uploads an image to their store, the original high-resolution image file is stored on Shopify’s servers. This is considered the “source” file. The CDN will then use that source file to dynamically generate and cache multiple resized and formatted versions of the image, known as “derivatives,” to optimize delivery across devices.
For example, when a user loads a product page on a mobile phone, the Shopify CDN will detect the mobile device and deliver a smaller, optimized version of the image for fast loading over mobile networks. But when another user loads the same page on a desktop device with a high-res screen, the CDN will deliver a larger derivative optimized for that resolution. The CDN creates and caches these derivatives in real-time as needed.
So, Shopify’s CDN reduces bandwidth usage while ensuring customers worldwide see appropriately sized and formatted images for their specific browsing scenario.
Read our article on Product Attributes.
Shopify Themes' Responsiveness Feature
We have seen that the Shopify CDN delivers different derivatives of the source file based on the specific request of the user’s device. However, it helps to note that this responsiveness is a feature of Shopify themes, not the CDN. The CDN merely responds to requests.
Shopify themes are designed to be responsive, meaning they adapt and resize content to optimize the browsing experience on any device. A vital aspect is serving correctly sized images for the user’s screen resolution, a function achieved with the CDN’s help. The themes accomplish this using the responsive images feature – the theme code contains logic that detects the visitor’s device screen size as well as network connection speed.
Based on those factors, the theme automatically requests the most optimized image derivative from Shopify’s CDN to serve that specific user. This ensures fast loading times and crisp image quality on any device.
For example, a user on a mobile phone may receive a small 800px image, while a desktop user with a 1440p monitor may receive a larger 1440px image for the same product. The theme seamlessly handles loading the suitably sized image.
Shopify's Compression
We learned earlier that Shopify does not actively modify or edit the original uploaded image files. But be that as it may, its servers perform some light compression and standardization on images before delivering them to users’ devices. Specifically, when images are uploaded and saved on Shopify’s servers, it will do two things:
- Apply mild lossless compression to the image file. This reduces file size by 10-15% with no loss of quality by optimizing how the image data is stored. This helps reduce image weight and speeds up loading.
- Convert images to 72dpi resolution. The standard web/screen resolution is 72dpi (dots per inch) compared to print, which is usually 300dpi or higher. Converting to 72dpi removes excess image data unsuitable for web use. This further reduces file size while maintaining visual quality.
However, Shopify does not alter dimensions, resize images, or apply aggressive lossy compression that degrades visuals. Those optimization steps are still the merchant’s responsibility before uploading. So, in summary, the very minor compression and conversion that Shopify applies provides small file size improvements but does not replace proper image optimization by the merchant beforehand. Instead, the bulk of optimization still relies on properly preparing images.
Image Optimization
While Shopify performs minor optimization, running digital assets through additional optimization tools is highly recommended. This will significantly reduce file sizes and improve page loading speeds.
Many free and paid tools, such as TinyPNG, Optimizilla, Photoshop, Squoosh, ImageOptim, ShortPixel, and more, are available. These tools compress images through lossless and lossy techniques while maintaining quality. On the one hand, lossless compression reduces file size with no quality loss by optimizing data storage. On the other hand, lossy compression shrinks files more aggressively by selectively removing unnecessary image data. Therefore, it helps to find an optimal balance.
The goal is to find the smallest file size that still appears high-quality for its intended display size. Pre-optimizing this way gives the merchant fuller control over the final image quality and compression level. Doing this optimization beforehand rather than relying solely on Shopify’s servers results in significantly smaller images and faster page loads. Just be sure to preview image quality at 100% scale before uploading optimized versions. The time investment in optimization delivers dividends in site speed and user experience.
Challenges of High-Resolution Product Images
While high-resolution Shopify product images can make merchandise pop on Shopify stores, ultra-high-res photos pose challenges if not properly handled. Let’s explore the potential pitfalls of using large, unoptimized images on your online store.
Large File Sizes Slow Page Loads and Hurt SEO
One major challenge with high-res product photos is their large file size, often 5-10MB or more for 12+ megapixel images straight from a DSLR camera. These massive images can drastically slow page load speeds, especially on mobile platforms. Slow load times degrade user experience and hurt SEO rankings since speed is a factor in SEO. Using properly compressed and resized images keeps file sizes small for fast performance.
Finding a Balance Between Quality and Performance
There is a delicate balance between image quality and website performance. On the one hand, overly compressing images to minimize file size can make the images look pixelated, blurry, and low quality. On the other hand, using full uncompressed images drastically bloats file size and page load times.
If the Image Files are Too Large, Shopify will Not Accept Them
With Shopify’s image, video, and generic file requirements, if your images are so large that they exceed the requirement, you will not be able to upload them into your Shopify store. This challenge is fairly common, as many photographers supply their customers with very high-res photos. Thus, it is up to the marketing manager or eCommerce manager to manually re-size these images in Photoshop to meet Shopify’s requirements.
Therefore, the critical objective is to find the optimal middle ground – compressing images just enough to achieve reasonably fast load times while maintaining high enough quality for an appealing user experience. Some trial-and-error testing of different compression levels can help identify the sweet spot between speed and visuals for your Shopify product images. Optimizing the digital assets for a user’s device and network conditions can also help strike the right balance in real-time. But most crucially, paying close attention to performance metrics and image quality allows you to tune images for an ideal compromise.
Properly Sizing Images for Different Store Views
A single product image may need to be displayed in multiple different sizes throughout your Shopify store. This includes:
- Thumbnails – Smaller versions of an image, usually under 200px wide, shown on product listings and category pages. These need to be crisp when viewed in the tiniest configuration.
- Image galleries – Mid-sized images around 800px wide, displayed in product image galleries. They should balance quality and faster loading.
- Product zoom – Full-size images that can be zoomed and panned, requiring the original high-res photo. Loading full images just for zooms can impact performance.
Optimizing and generating sized image derivatives for each view, maintaining performance and user experience, is a complex but vital task. You must scale down large original images for thumbnails and galleries but not for zoom features. Align image sizes with context, meeting Shopify’s format requirements, for an optimized and contextually relevant visual experience.
Optimization Tips and Best Practices
Exploring image importance, Shopify handling, and essential product photography tips to enhance your Shopify store’s visual appeal and performance.
Effort in image optimization pays off: faster loading, better SEO, reduced hosting costs, and enhanced user experience. Leverage Shopify’s high-res images effectively.
Use Image Compression Tools to Reduce File Size Without Visible Quality Loss
We mentioned tools TinyPNG or Squoosh that can significantly reduce image file sizes to desired results. The compressed files will be much smaller, saving on bandwidth and speeding up page loading without any visible reduction in image appearance. They may also help you adjust images to meet Shopify’s requirements. Nevertheless, it helps to recall that some tools only handle one image compression at a time, considerably slowing down your workflow. In addition, some tools don’t allow you to choose a compression level, so you’re stuck in a trial-and-error process.
Maintain High-Res for Zoom Views and Lower for Thumbnails and Galleries
The right balance between performance and quality is the overarching objective for image optimization in eCommerce. Use high-res originals for detailed zoom views; opt for lower-res versions for thumbnails and galleries, balancing quality and performance. This ensures crisp zoom capability while preventing overly large images from bloating page sizes. Common sizing guidelines are:
- Thumbnails: 200px width or lower
- Image galleries: 800px width or lower
- Zoom view: Original high-res image
Resize high-quality images for various store needs to optimize speed. Remove unused high-res files from Shopify to avoid image bloat.
Optimize Alt Text, Titles, and Captions for SEO
Boost Shopify SEO with descriptive alt text, aiding search engines in image understanding. Add titles and captions for further relevance.
Effective alt text describes the image in detail, enhancing accessibility and SEO, and avoiding generic phrases for improved relevance.
Metadata optimization categorizes product photos, aiding search engines to display them in relevant Shopify product images search effectively. This enhances discoverability and SEO ranking.
Leverage Digital Asset Management (DAM) Solutions
We kept the best for last. Optimizing images is vital for a high-performing Shopify site, maximizing product presentation and site potential. To help with optimization, we suggested using image compression tools to prime them for the Shopify CDN. Digital Asset Management (DAM) systems streamline image management, aiding merchants with vast catalogs, simplifying organization, and optimizing visuals effectively.
For example, consider a merchant who elects to deploy a solid DAM tool like Catsy PIM and DAM. Catsy DAM is a cloud-based software platform that simplifies managing Shopify product images and digital assets for eCommerce.Merchants benefit from image optimization features, enhancing Shopify product images and more, including:
- Bulk image editing – Catsy digital asset management has a visual editor that allows users to crop, resize, compress, and convert thousands of product images in bulk with just a few clicks. This automates the tedious process of resizing high-res images for thumbnails and galleries.
- AI tagging – Catsy will automatically tag product images based on content analysis with machine learning algorithms. This makes it easy to search and manage massive catalogs of product photos in the DAM for use in Shopify.
- Shopify integration – This is perhaps the most critical Catsy DAM feature in the context of using it with Shopify. Catsy Shopify PIM offers a direct API connection for syncing assets and metadata from Catsy to Shopify. Meaning, newly optimized and tagged product images can be pushed to your Shopify media library in seconds.
- Powerful search – Catsy empowers Shopify users with efficient image search and filters, using SKU, color, keyword, date, and product name criteria. Catsy DAM’s robust filtering capabilities ensure users do not have to sort through a mountain of unorganized image files.
DAM tools and Shopify image optimization sync seamlessly, streamlining asset management, saving time, and enhancing web performance with optimized visuals.
Conclusion
High-resolution Shopify product images empower stores, elevating product presentation and driving conversions through captivating visual details. However, as we’ve explored, ultra-high-res photos come with challenges that can hamper site performance and workflow speed.
Therefore, properly optimizing images before uploading them to Shopify is crucial. Essential e-commerce practices: compress files, resize for various views, optimize metadata, and balance quality with speed for success.
But while these steps will get you far, the most effective approach for merchants managing large volumes of product images is to utilize a DAM software. Catsy’s eCommerce DAM provides powerful features to automate the optimization process, including bulk image editing, automatic tagging, seamless Shopify integration, and robust search. Leveraging the technology allows users to truly unlock the potential of Shopify’s high-resolution image support, and ultimately, drive more revenue across stores.
Image optimization enhances page speed, user experience, SEO, cost-efficiency, and brand professionalism across all devices. Shopify’s high-res support allows large, detailed images, but they must be properly optimized.
Shopify requires images to be under 20MB, with a maximum resolution of 20MP, an aspect ratio between 100:1 and 1:100, and JPEG, PNG, WEBP, HEIC, or GIF formats. Videos must be under 1GB, maximum 4K resolution, under 10 minutes, and MOV/MP4 formats.
No, Shopify does not actively modify original image files. Instead, merchants must optimize images themselves before uploading. Shopify only applies minor lossless compression and converts images to 72 dpi (dots per inch).
Keep high-res originals for product zoom views requiring fine details. But generate lower-resolution versions for small thumbnails (200px or below) and product galleries (800px or below). This balances quality and performance.
A DAM tool like Catsy allows bulk editing to easily compress, resize, and convert batches of images at once. Catsy streamlines image tagging, aids search, and syncs optimized assets with Shopify via API for efficient management.
