How to Turn Shopify PNG Product Images Into Smaller AVIF Files

If your Shopify product images arrive as large PNGs, you can make a lighter upload copy without sending the original to a random converter. This guide uses four free browser tools from Tiny Online Tools to inspect the file, remove metadata when appropriate, convert it to AVIF, and check the result before it reaches Shopify.\n\nYou need the original PNG and a current browser that can encode AVIF. Keep the original file unchanged; the goal is to produce a separate web-ready copy.\n\n## 1. Check What Is Inside the PNG\n\nStart with Image Metadata Viewer. Drop in the PNG and review the reported metadata before doing anything else. The tool supports JPEG, PNG, and WebP, so it is also useful when a supplier sends a mixed batch.\n\nLook for information that should not travel with a public product image: a device name, timestamp, location data, creator field, or editing notes. Not every PNG has useful metadata, but checking first means you make a deliberate choice instead of assuming a storefront upload will remove everything.\n\nExpected result: you know whether the source file has metadata worth clearing and you still have the untouched original.\n\n\n\nThis is a useful extension of the pre-publish habit in Three Browser Tools I Use Before Publishing Shopify Images: inspect the source before optimizing it.\n\n## 2. Make a Clean Working Copy When Needed\n\nIf the first step found metadata you do not want in the upload copy, open Remove Image Metadata. Add the PNG, run the cleanup, and download the cleaned copy. The tool accepts JPEG, PNG, and WebP and is designed to remove EXIF, GPS, and other embedded metadata.\n\nUse the cleaned copy as the next step’s input. Do not overwrite your original asset. Keeping both files gives you a simple rollback path if you later need the source for print, a marketplace with different requirements, or a design edit.\n\nExpected result: you have a separate PNG with the metadata decision already made.\n\n## 3. Convert the Working Copy to AVIF Locally\n\nOpen PNG to AVIF Converter, add the cleaned PNG, and choose a quality setting. For photographic product images, start around 70 to 80. For flat graphics, screenshots, or assets with fine edges, start closer to 85 to 95 and compare the output before committing. The tool uses the browser’s AVIF encoder, so the conversion happens locally rather than uploading the image to a server.\n\nDownload the AVIF with a clear filename such as linen-shirt-blue-front.avif. Use a naming pattern that makes it obvious which file belongs to which Shopify product and view. That small discipline is just as valuable as the format change when you are handling a collection launch.\n\nExpected result: a smaller AVIF copy that preserves the visual detail you need for the storefront.\n\n\n\nIf the source is already JPEG or WebP, Compress Image is the better first stop; it provides a direct quality control and byte-savings view. For PNG originals, AVIF is the more useful test because it keeps an alpha channel while giving you a modern web format.\n\n## 4. Check the Output Before Shopify Sees It\n\nOpen the downloaded AVIF locally and inspect the parts customers notice: product edges, fabric texture, small labels, shadows, and transparent areas. If you see softness or artifacts, go back one step and increase the quality setting. Do not choose a quality value from a rule of thumb if the image itself says otherwise.\n\nThen upload the AVIF to the relevant Shopify product or theme workflow. If your setup serves several formats, keep the original PNG as the fallback source and let your theme or image pipeline choose the best version for each browser.\n\nExpected result: the product page has a lighter image asset without a surprise change in color, crop, or detail.\n\n\n\n## 5. Keep the Workflow Repeatable\n\nFor a small catalog, the four steps are quick enough to run one image at a time. For a launch batch, write the rule down: inspect, clean if needed, convert, visually check, then upload. It is the same kind of control that keeps Shopify product CSV cleanup from becoming an import-day gamble and keeps a campaign-page color preflight from turning into last-minute rework.\n\nA useful folder structure is: originals/, clean/, and storefront/. Put the untouched source in originals, any metadata-cleaned copy in clean, and the approved AVIF in storefront. This also makes image handoffs easier for a teammate, following the same principle as my three-step image handoff before every Shopify upload.\n\n## Troubleshooting\n\n- The converter is unavailable: AVIF encoding needs a modern browser. Update the browser or use a browser that supports AVIF encoding.\n- The image looks soft: raise the quality setting and compare the product edges again. Flat graphics usually need a higher setting than photos.\n- Transparency looks wrong: verify the source PNG has the intended transparent background before conversion, then inspect the downloaded AVIF before upload.\n- You need the exact original later: that is why the original remains in a separate folder; do not replace it with the web copy.\n\nThe key is to treat image optimization as a small, verifiable preparation step—not a blind conversion. Start with one product image in Tiny Online Tools, keep the original, and compare the AVIF copy before you upload it.