This article is from Shopify, and was republished and shared through Elksourcing with the permission of Shopify.
Original link:https://www.shopify.com/blog/image-sizes
When it comes to choosing file types and dimensions for your images, keep in mind quality, page load times, zooming capability, and marketplace requirements, especially if you are selling on multiple platforms. Let’s take a look at the optimum dimensions for photos and how to choose your file type while keeping mobile in mind for improved user experience.
Choosing the Right Dimensions
It’s vital to strike a balance between images that are large enough so users can zoom in and those that are an optimum size so they don’t take up too much space and slow down your page load times. On Shopify, you can upload images of up to 4472 x 4472 pixels with a file size of up to 20 MB. But the website maker typically recommends using 2048 x 2048 pixels for square product photos. These are high-resolution images that give your store a professional and well-rounded look with great zoom capabilities. Keep in mind that for zoom functionality to work your images have to be more than 800 x 800 pixels.
Similarly, Amazon and Etsy, have a 1000 x 1000 pixels image requirement to enable zooming.
To maintain a uniform look along your product line and on your collection pages, you should keep the width and height aspect ratio of all your feature images the same, say square. Your feature image is the first image of a product that will appear across your store – on your home page, cart page, checkout page, and a variety of collection pages. Keep all your thumbnails, too, the same size and shape to convey a polished store look. Keep in mind, many of your customers will be browsing on mobile too and square images are easier to reposition for smaller screens.
Source: Beardbrand
Choosing the Right Format
Let’s take a look at the file formats most widely used in product photography and what they each bring to the table. They are listed here by how commonly they are used in product photography.
JPG
JPG is the most common digital image file format out there. It is widely supported and boasts a small file size with a good color range. Its compression allows you to strike a balance between file size and image quality. Shopify recommends JPG, in particular, because it can deliver images with a relatively small size and good quality, which works well for product photos.
PNG
PNG was created to improve the GIF format by removing its 256 color limitation. It’s widely accepted, lossless (reduces file size without reducing quality) and supports transparency (say for transparent backgrounds). The downsides are that PNG file sizes can be large because of the lossless compression and the format is not as universally compatible as JPG.
GIF
GIF offers small file size by compressing and reducing images to 256 colors. Although it has been widely replaced by PNG, it is still used for animation as it’s the only format that both supports it and is universally recognized by browsers.
TIFF
TIFF is a lossless compression format that is widely supported by a range of editing and web applications. It offers high quality resolution, and multiple images and pages can be conveniently saved in a single file. However, the file size tends to be large.
BMP
BMP is commonly used in the Windows ecosystem. It supports data compression, alpha channels (used in Photoshop to store additional information that you can use to manipulate parts of the image, like add transparent backgrounds), and almost universal compatibility. Uncompressed, it offers perfect images but file sizes can be very large as well.
Overall, JPG is certainly the most convenient when it comes to combining smaller size with decent quality. While PNG offers a higher quality lossless compression, it does so at the heavy cost of a larger file size. GIF is useful if you are offering 360 degree shots and want lightweight files. BMP and TIFF, by comparison, can offer great quality, but life sizes are usually rather heavy and impractical.
Source: Jaelynn Castillo
Sizing Images for Mobile
Shopify automatically resizes your images to fit smaller screens, but certain images can sometimes require manual editing. Keep in mind that desktop and mobile screens are not only different size but have opposite orientation. And while Shopify tries to accommodate that with gentle cropping, it will be best if your images are square and your product is vertically and horizontally centered.
Also, images with overly large resolutions, of say Shopify’s maximum of 4000 x 4000 pixels, can come out blurry when resized for mobile. So reducing your image to a more manageable size and shape that keeps mobile in mind can help your store look better across all devices. Keep in mind that large files also slow down your site’s loading time. And in ecommerce, and especially in mobile, every second matters, so optimizing your images should be a priority.
So, while lossless compression can give you the highest quality image, it often creates large files that take forever to upload (especially in bulk), and can slow down your page loading times, causing visitors to abandon your store. This is especially true on mobile where internet speeds can be slower and waiting for an image to finally appear frustrates shoppers.
While Shopify’s responsive designs and algorithms are good at resizing and displaying your images across devices, giving them a hand with thoughtful file sizes can mean an even smoother shopping experience.
