For those of us who aren’t experienced photographers/graphic designers/web developers, image file formats can be confusing to understand. Here we give a brief summary of the most commonly used image file formats and then go on to discuss using images in Shopify.
JPEG
This is probably the best known of all image file formats. JPEG files are compressed quickly in the camera, and thus result in a loss of detail and quality. They are essentially set up to store as many images as possible. Most cameras/phones will have options for different quality levels of JPEG (e.g., low, medium, and high). This basically means that the better the quality that you require, the less compression the camera will perform on the original photograph.
Generally speaking JPEGs should be used:
- When the photos are for personal use, for social media, albums, and small prints and not intended for large size prints
- When you don’t intend to enhance or edit the photos much in post-production (e.g., using Photoshop)
- For sharing images via email (without the intention of large size prints)
Pros
- Small file sizes means more can be stored
- Quicker file transfer times, due to smaller file size
Cons
- Loss of quality due to image compression
- Less opportunity for image manipulation in photo editing software
TIFF
This is a file format which printers or publishers often ask for. Even if the end file format required is a JPEG, the initial captured file would be TIFF. These file formats are usually uncompressed, and as a result offer the opportunity for extensive post-processing.
Pros
- Ability to manipulate photos extensively in photo editing software
- Option to print at the highest quality and at much larger sizes
Cons
- Much bigger file sizes
- Longer transfer and loading times due to file size
PNG
Designed in the 90s as an improvement for GIF file format, PNG files are ideal for use on the internet. Unlike other file formats, the digital quality of PNG files doesn’t mean big file sizes (not ideal when you need web pages to load quickly). The other benefit of PNG files are that they allow for partial (effects like drop shadows) or total transparency which is ideal for overlays or logos.
Pros
- Lossless compression means good image quality, which isn’t compromised when editing
- The ability to maintain transparency, which is ideal for things like overlays or logos
Cons
- Quality will not be good enough for printing at any size
GIF
Like PNGs, GIF files are ideal for use on the internet. Lossless compression means image quality is not sacrificed, and like PNGs they also offer the ability to maintain transparency (but can’t support partial transparency) and also allow for animation. However, the limitation of GIF files are that they can only contain a maximum of 256 colours, and therefore are not the best choice for photos, but rather images with a limited colour palette.
Pros
- Small file sizes makes these ideal for use on the web
- Files can contain animation
Cons
- Limited colours means it is not the best choice for photos
- Does not support partial transparency like drop shadows
BMP
Another lossless file format, BMP was invented by Microsoft, initially for use on the Windows platform but is now recognized by programs on Macs as well. BMPs are large file sizes as colour data is saved in each individual pixel in the image without any compression. As a result this provides a high quality digital file, which is great for use in print, but not ideal for web usage.
Pros
Can be used for printing as images are saved in high quality format
Cons
Large file sizes means a lot of storage is required
PSD
This file type is what Adobe Photoshop uses as a default to save data. The big advantage of PSD files are that it allows for manipulation on specific individual layers, rather than on the main image itself. This makes it absolutely essential for any sort of extensive manipulation of the original photograph – such as retouching. This gives far greater flexibility and the ability to fine tune an image as layers can be added, removed or edited at any time without any effect on the original photo (as long as all editing has been done on layers) or other layers. But remember that once a layered PSD file is flattened (this process essentially merges all of the layers) it can’t be undone, so make sure you save your file as a PSD file before flattening.
Pros
- Ability to manipulate the image extensively on separate layers
- Once the image is ready it can be re-saved as any other file format
Cons
- Layered files can be incredibly large in size due all of the additional data stored
Using Images in your Shopify Store
Shopify supports the following image formats:
- JPEG or JPG
- Progressive JPEG
- PNG
- GIF
Shopify serves images in WebP format on supported browsers.
Note: Except for converting unsupported formats to supported formats, Shopify doesn't modify your images on upload. If you upload an image that is not a supported format, then Shopify converts it to either JPEG or PNG. Most image formats are converted to JPEG.
When to use JPEG images
JPEG images are ideal for photography and other still images with complex colours. The JPEG format has a palette with millions of colours. JPEG also has lossy compression, which can help to keep page loading times fast without a noticeable loss in image quality.
Use the JPEG format for the following kinds of images:
- products
- banners or slideshows
- pages and blog posts.
When to use PNG images
PNG images are ideal for graphics and icons with flat colours and without gradients. The PNG format is also able to support transparency.
Use the PNG format for the following kinds of images:
- logos
- icons
- borders and trims.
Compression rates
To keep load times fast, Shopify compresses images when they're displayed on your online store. Compressing an image means reducing its file size to allow for faster page loading. Compression might result in a change in image quality, depending on your image's format, size, and original quality.
Shopify's image quality levels after compression are as follows:
- JPEG: Between 65 - 90
- PNG: 90
- GIF: no change in quality
For JPEG images, the quality level of a compressed image depends on the quality of the original JPEG image as well as the output size:
|
Original quality |
Output size |
Output quality |
|
86 or more |
Height or width of 1024px or more |
85 |
|
65 - 85 |
Height or width of 1024px or more |
Original quality |
|
64 or less |
Height or width of 1024px or more |
65 |
|
76 or more |
Height and width both less than 1024px |
75 |
|
65 - 75 |
Height and width both less than 1024px |
Original quality |
|
64 or less |
Height and width both less than 1024px |
65 |
Upload limits
Image uploads to Shopify have restrictions in terms of both megapixels and file size (measured in megabytes). Megapixels are used to indicate how many millions of pixels make up an image. Megabytes are used to indicate how many millions of bytes of memory or disk space an image takes up.
Images uploaded to Shopify can't exceed either of the following limits:
- 20 megapixels
- 20 megabytes
To find our more, including colour profiles, head over to the Shopify Help Centre.
