Updated 05/11/2021

Show off those great photos of your products on the storefront! Optimizing best for the web takes a couple of steps, but this article will walk you through best practices for using them on the Storefront.

Cameras and mobile phones take large photos that are good enough to print. However, 4000px wide images like those are too wide to even fit on a monitor. Bigger images do not mean better images and monitors will automatically shrink and expand images to fit the space, affecting the quality or even distorting the image. But by following the tips below you will be able to get your images down to the optimal size without sacrificing quality!

1. Start with a good photo

Try to get the original image or the largest one you have. You can right-click on your image to see what the starting file size is, which will likely be more than 1MB if it's a colorful unedited photo. JPEG format is going to be the most common and keep the file size low.
​

2. Turn it into a square

We recommend you crop and resize your image in a perfect square anywhere from 250px to 400px. Any larger than that is counterproductive because the browser will shrink the image to fit into the spaces where it's shown. (Unless you actually want the hairs on the buds to look fuzzy!)

3. Make sure the File Size is under 250KB (0.25MB)

GrowFlow storefronts allow up to 250KB per image, which should be more than enough to show the trichomes on buds. The larger the photos the longer it takes to load the page, which negatively impacts the user experience for the person browsing the site.

Dropping an image quality down 30-50% from the original usually doesn't make any difference you can pick with the naked eye.
​

No, you don't have to but it's possibly already that which is fine. For the longest time, 72dpi was the standard for monitors (DPI being dots per inch which comes from the printing press). Nowadays many phones and laptops have higher - like 200-300 dpi (or rather, PPI = pixels per inch). Save for web still exists as a photoshop workflow, but if you use the guidelines above you shouldn't need to worry about DPI.

Look for pixelated (blocks) around edges or where the dark edge meets light - that's usually the easiest place to spot. If you overdid it, start over from the beginning image. Sizing up from a small image loses even more quality.

Your computer should come standard with the tools to crop and resize. But here are a couple of other ones you can use for more advanced editing.