by Tina Yeung,
Love at first sight is real - and our shopping habits prove it. More often than not, we decide whether or not we want to buy something based on how we feel when we first looked at it, and if we want to keep looking at it. This universal experience is key for e-commerce merchants. Instead of our customers being able to touch and hold products, our audience must judge whether or not they buy our goods based primarily on the photographs and videos we offer them.
The creation of high quality photos, animations and branding should start early in your web design project - even before written content or organization is fully decided upon. Like cooking, we need to buy, gather or even grow our ingredients, and images are one of the utmost important “ingredients” on your website. Think of your designer as the cook who combines their knowledge and skills with the ingredients you provide (or create together) in order to create the most appetizing and irresistible website.
The Different Types of Images
Just like ingredients in delicious food, there are many different types of images and visual content that you can choose from, and it’s best to use a variety that compliment each other. To get started, here’s how the Growth Spark team will refer to each ingredient category, and what they’re used for:
- Banner (also sometimes called hero images) - large, high quality images that are usually used as part of a slideshow/slider, or as the background of your home page.
- Featured - the most widely used term for images. A featured image can represent a collection, and gives the viewer an idea of what to expect. It may also be a callout of a sale or promotion.
- Product - images of the physical items you offer. These may be used on a variety of pages, but most often on product description pages.
- Badges - these refer to customized labels you may want to create for your products. They can be made to highlight awards, best selling, new, sale, or even custom sales, like your brand’s (or your customer’s) birthday.
- Icons - the smaller images that are commonly the social media icons, search icon, and even the shopping bag icon.
Each of these types of images are commonly associated with a particular size, but many categories overlap. For example, both hero and featured images are large, and are only differentiated by their use. Product images are high quality, but normally not quite as large, and are generally part of a series.
Banner or Hero Images
Banner images are usually large images that span across the width of your website. These are usually the first image you see when you land on a website.
Because these images take up a lot of visual real estate and often have text or other content on top of them, they need to be able to accomodate all screen sizes, so resolution and quality are of utmost importance.
One of the most common uses of banner or hero images is as the background of websites, with text, buttons and other information displayed on top of them. Background images can be displayed in two ways:
- Resize to fit the screen space
- Maintain original size and crop to fit the screen space
Selecting how your background image will display is especially important for your responsive website, which will need to look just as good on a smartphone screen as it does on a desktop display. The Growth Spark Framework is built to maintain a space that allows for overlay text to show as well as creating a harmonizing ratio between text, images, and white space.
Example A: Resize With Cropping
The image below has been uploaded to a slider area in the Shopify theme settings as a background image:
To the right is how the image would appear on the site. The design of the site automatically centers the image and crops the top and bottom to fit the area. This is because the area we allowed is proportionally 75%-80% of the screen window height. This encourages the user to “peak” at the content that follows. When resizing this area to a mobile width, it looks a little different:
This time we are seeing that the sides of the image are being “cropped” and what is shown is the center of the image. This is a responsive solution to the variety of screen sizes users can view the site. We’ve placed emphasis on the center of the image, which is call the “focal point,” which is the part of the image that is most important for the customer to see. If for any reason, should your images’ “focal point” not be the center of the image, this should be pointed out to the Growth Spark Team ahead of time. This would be important if, for example, the site above wanted to emphasize the shoes over the purse.
Shopify has also created documentation on this behavior within the themes. When you select your images, keep in mind that tall (portrait) images might be cropped from the top/bottom on wide screens such as laptop or desktop, while wide (landscape) images will experience cropping from the left/right sides.
Example B: Resize Without Cropping
Images can also be shown in full at all times, which is appropriate for product images, coupons, or other visual aids that contain important information in them. Keep in mind that smaller screens will cause landscape images to become relatively short because responsive websites resize images to their aspect ratio accordingly:
Understanding the aspect ratio, or ratio of width to height, of images is also a significant part of gathering consistent imagery for your site. For example, a square image of 100px by 100px has an aspect ratio of 1:1, whereas an image that is 400px by 800px has an aspect ratio of 1:2, and an image that is 300px by 900px has an aspect ratio of 1:3. If you have images that you want to look consistent, make sure these images have the same aspect ratio to ensure they resize appropriately on your responsive website.
Banner And Hero Image Recommendations
Here are a few tips to make to keep in mind when working with images within themes.
- By default most themes use a center focal point, meaning that the center of the image is always going to be visible while cropping to fit various screen sizes. If you desire a focal point at a different part of the image, it will require a customized solution.
- Images used in slideshows or as backgrounds should not have text within them. If your images have text, at different device sizes, the text may seem out of focus at larger screen sizes or be too small to read at smaller screen sizes.
- When using images with the intention of putting text on top, choose background images that aren’t visually cluttered and contrast with your text color to ensure legibility.
Images that represent a collection of products are referred to as featured images. These images can be any size, but are usually on the larger size to be more visually appealing and versatile. The following image highlights featured images in green. These vary in size and can be full width as well. Text can be positioned next to or above/below featured images. In some cases, you may even have text within the featured image if you reference the last example below.
Featured Image Recommendations
Featured images can be a variety of sizes and orientations depending on your site’s design. While Shopify accommodates very large images (maximum uploads are 20 megapixels, or approximately 4472px by 4472px), it’s best to use smaller images, you’ll risk excessive load times. If you want the width of the featured image to be full width of the site, we recommend it be a width of at least 2048px.
Individual photographs or renderings of your products are simply referred to as your product images. It’s a good idea to provide enough images to offer the customer a near 360° view of the item. You may also have variations of colors or size your product is available, which are referred to as variant product images.
Product Image Dimensions
Whether your product images are square or rectangular will depend on your overall web design aesthetic and branding - it has no effect on the technical workings of your website. We do recommend consistency when deciding on the dimensions and size of product photos, for a few reasons:
- Visually consistent, uniform product images are more appealing to customers
- If you would like to display thumbnails of product images, such as on a catalog page, having a variety of sizes could potentially break your layout.
Regardless of the shape of your product photos, it is required that each image has a minimum width of 800 pixels.
We do request that, whenever possible, product images be sent to the Growth Spark team as .JPEG files as they tend to retain the highest quality when viewed online.
If you’d like to allow customers to be able to zoom in, your product images must be a minimum width of 2000 pixels.
Badges are most commonly associated with your product pages and lists, but they do not have to be included in the product image itself. For instance, you can create create a customized badge for “new” and tag products that are currently new with this badge, and then easily remove these badges once those products are no longer the newest.
Since badges are relatively small, a square or circular badge should be a minimum of 150px by 150px.
Icons refer to the smaller images on your site. To ensure your icons appear sharp, your designer should be creating icons as scalable vector graphics, or SVGs, instead of .JPEGS or .PNGs. Saving your icon as a scalable vector graphic will ensure that it can be resized without losing the quality of the image. Another benefit of creating your icons as SVGs is they can also be converted into an icon font set. This let’s developers use the icons easily in multiple places. The Growth Spark Team will be able to create icon fonts from your icons if the proper format of SVGs are provided.
Shopify is an incredibly powerful platform for e-commerce, but in order to get the most out of it, you’ll need to add a variety of images that are formatted to draw your customer in and keep them engaged. When you work with Growth Spark to design your website, we’ll help you create a world class image gallery that will serve as the backbone of your branding. Let’s work together to show your customers exactly why your store deserves all of their love and investment - reach out to the Growth Spark team to get started today!