Saving Your Images for the Web

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 platform 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.

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.

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.

About the author

Holly Cardew is the Founder of Pixc, a platform to help eCommerce stores edit and optimize their product photos so they can increase sales. Pixc turns average product images into beautiful ones by editing and removing the background within 24 hours. Starting out as a teenager, selling on eBay and creating her own online marketplace, Holly has a background in eCommerce, online marketing, graphic design and building distributed teams. She is also experienced in building and running Shopify stores, and growing large social media followings. In 2016, Holly was included in the Retail and eCommerce Forbes 30 under 30 list. Holly splits her time between San Francisco, Brisbane and Sydney. When Holly is not working, she loves travelling, exploring new places, beautiful design, typography and coming up with new business ideas.