Often we can run into the problem where the pictures we want to display on our website are not sized correctly for the site. Since the storefront is often a first impression for your client, this is a big problem. You want it to look professional, and a blurry or badly sized picture can take away from that. At VersaAgency, we've developed a basic strategy to help you size your pictures for a professional look.
The average display your customer likely uses are listed as follows:
Desktop is likely 1920 px wide and 1080 px tall.
Tablet is likely 600-900 px wide
Mobile is likely 400 px wide
Let's take a look at 3 of the main kinds of images and sizes you will generally need for your storefront!
Background image
You may choose to include a background image on your storefront. This will generally take the entire width of the webpage and will often be more subdued so it does not distract from the main content of the storefront. Since it is so large, you will want the image resolution to be at least 1980 px. Since it is not the main content, however, you can likely afford a lower resolution picture.
Product Image
You will want your product imagery to be front and center. Typically, it will be around 500 px wide and could be up to 500 px tall. These images should be as sharp as possible, since they will be the focus of the user's attention. It's a good idea to take these pictures at a high resolution and scale them down to maintain quality.
Advertising/general website imagery
General website imagery can be found around your storefront. These might be banners and other media that have text superimposed onto a background image. You will want this imagery to engage the user. Make sure that the image doesn't clash with or blend with the superimposed text or the website. Ideally, it will be consistent with the theme of your storefront.
