[Shopify] Types and Features of Image Formats that can be Uploaded in Store, and Best Shopify App for it

“There are various formats for image files, such as PNG and JPEG, but which one should I use?”

“How do I differentiate and optimize image formats?”

Have you ever thought about these things if you are building and managing an online store on Shopify? There are various types of formats for images in the world, and you would want to choose an image that contributes as much as possible to your sales (conversion). In this article, we will introduce the types of image formats that can be added as Shopify product images and the best Shopify app for it!

Types of Image Formats that can be Added as Product Images on Shopify

Shopify supports the following seven types of image formats as of March 29, 2023:

1. JPEG
2. Progressive JPEG
3. PNG
4. GIF
5. HEIC
6. WebP
7. AVIF

In the following sections, we will briefly explain the features of each format.

JPEG

JPEG stands for Joint Photographic Experts Group, and is a file format for image data. Its features are that it can handle full-color (about 16.77 million colors) images and has a non-reversible compression function. When an image file is compressed, the file size becomes smaller and the page loading speed increases. Generally speaking, faster page loading is advantageous for SEO, so JPEG is one of the most suitable formats for product images.

However, the disadvantage is that the image quality deteriorates as the compression rate becomes higher and the data capacity is reduced. Also, JPEG images cannot be transparent. There are two types of extensions, “.jpeg” and “.jpg,” but they do not differ in functionality.

Shopify Official Help recommends using JPEG for the following types of images:

• Products
• Banners or slideshows
• Pages and blog posts

Progressive JPEG

Progressive JPEG is an extended version of JPEG, and its basic features are the same. The difference lies in how it is displayed on the web. Progressive JPEG displays the image roughly first, and gradually becomes clearer as it is displayed.

For example, if the internet connection speed is relatively slow, Progressive JPEG may have the advantage of increasing the loading speed of the entire page. However, it may not be very effective in an environment where there are no concerns about the connection speed. In modern times, there is almost no advantage to using Progressive JPEG in Shopify.

PNG

PNG stands for Portable Network Graphics, and is a format developed for use on the web. It also supports full-color. The difference from JPEG is as follows:

• The image quality does not deteriorate because of reversible compression function, but the file size becomes larger than JPEG (more than twice as large). Therefore, the page loading speed is slower than JPEG.
• Images can be transparent.

Shopify Official Help recommends using PNG for the following types of images:

• Logos
• Icons
• Borders and trim

In short, it is best to use it for elements that should be displayed in high quality but have a relatively small impact on the overall page loading speed.

GIF

GIF stands for Graphics Interchange Format, and is a format that can display simple animations or videos. Have you ever seen a momentary video on a website? That’s a GIF.

As opposed to JPEG and PNG, GIF can only use up to a maximum of 256 colors, so it may be difficult to use as a product image. If you want to put a video, Shopify supports it in a different way, so use that instead. (Reference: Shopify blog “Realize More Realistic Product Pages! 3D Model and Video Support Function Released”)

HEIC

HEIC is an extension attached to HEIF (High Efficiency Image File Format) format files. HEIF means high-efficiency image file and has been used as the standard image file format instead of JPEG on iOS since iOS 11.

Its feature is that the file size is light (about half of JPEG) while maintaining high image quality. This may sound like an upgrade to JPEG, but the big disadvantage is that it may not be compatible with Windows PC. In modern times, where there are still many Windows PCs in the world, it is safer to avoid using HEIC.

WebP

WebP is an image format developed by Google. In short, WebP is a format that takes the best parts of JPEG, PNG, and GIF. The elements are as follows:

• Higher compression rate than JPEG, PNG, and GIF (non-reversible compression).
• Supports full-color (about 16.77 million colors).
• Images can be transparent.
• Supports animation.

In addition, it is a strong point that it is compatible with almost all web browsers, including Safari, despite being a format developed by Google. Therefore, at present, it can be said that WebP format is optimal for product images in online stores.

Now, you may be thinking, “How can I create WebP images?” Don’t worry. Shopify has already solved that cooncerns. We will explain this in detail in the next section.

AVIF

Finally, AVIF is a file format for compressing images as HEIF (High Efficiency Image File) format using the same compression method as the video compression method “AV1”. Its features are as follows, and at first glance, it seems to be better than WebP.

• Higher compression rate than WebP (non-reversible or reversible compression can be selected).
• Supports HDR (High Dynamic Range) in terms of color. HDR is a function that allows you to set brightness, color bit depth, and color gamut, and can express brightness and colors that are close to reality.
• Images can be transparent.
• Supports animation.

On the other hand, the disadvantage is that it is currently only compatible with some major web browsers (Google Chrome, Opera, Mozilla Firefox, etc.). Therefore, although the performance is excellent, using WebP is currently more advantageous than AVIF. In the near future, the day may come when WebP is replaced by AVIF.

Shopify’s Automatic Image File Format Selection

Actually, Shopify automatically compresses and displays images in online stores to reduce loading time and displays them in the optimal file format according to users’ browser (Reference: Shopify Official Support). For example, if it is detected that the visitor’s web browser supports WebP or AVIF formats, Shopify will display the image in that file format. Also, GIFs are automatically converted to animated WebP formats. Some of you may wonder, “Is this really happening?” Yes, it is. As shown in Shopify’s content delivery network’s “Optimized, fast, and dynamic file transformation”, the JPEG file is actually automatically converted.

In fact, when you try to save the image from the product page of the store, the extension will be displayed in WebP format or other optimal formats. If you’re curious, give it a try. In this way, if you create an online store on Shopify, you don’t need to worry about the format of the product images you add. This automatic image file format selection feature is not available in E-commerce malls such as Amazon, so Shopify is advantageous for SEO from the perspective of page loading speed.

Best Shopify App to Add Product Images

As mentioned in the previous section, Shopify’s current specifications automatically optimize image file formats, but this feature is believed to have been starting from early 2023 (according to our research). Therefore, if you have not updated your product images since before 2022, it would be possible that the automatic image file format selection function may not be applied to your store. Therefore, even for existing product pages, it is recommended to add the product images again for faster display. This leads to SEO improvement, UX enhancement, reduced bounce rates, and ultimately, increased sales if they can be displayed automatically in WebP format or other optimal formats.

However, manually re-adding all the images is not realistic. In such cases, we recommend using the Shopify app called “Product Imager: Bulk Add IMG“. With this app, you can complete to re-add the images with just two operations.
Note: Product Imager: Bulk Add IMG is a Shopify app developed and operated by our company that automates to add product images. The Shopify app is available here.

<Two operations required to re-add product images> Note: Please also refer to the app screen.

1. Perform “Product Data Export”: When you export product data, a CSV file containing existing product data and image file names will be downloaded.
2. Perform “CSV File Upload”: Simply upload the CSV file exported in step 1. This will re-add all existing product images.

Note that this method is for cases where image files have already been uploaded to the “Files” page of the store admin screen.

Conclusion

In this article, we have introduced the types and features of image formats that can be added as Shopify product images, and the best shopify app for it. We hope that this article has been helpful to you in building and managing your online store on Shopify. If you have any questions or comments, feel free to contact us “info@marketdive.jp”.