6. Icon Theme: Understanding Image Sizes and Ratios

The Icon theme is image rich design and relies on the usage of large high-quality lifestyle imagery. In this article, we will go through the different images throughout the theme with suggested sizes/ratios.

Slideshow

Our themes let you create a slideshow of images on your homepage. You can set the rotation frequency, and provide text over the slideshow image that links to a page in your store. Slideshow images should always be landscape orientation (wider than they are tall). The height of the slideshow on your site is completely dictated by the height of the tallest image you use. In the example below the slideshow height is set by the taller image (a city with trees), then the shorter image has a white space below. 

To avoid the extra white space below an image you must make all your slideshow images the same ratio (or size).

If you set your Slideshow to enable full-width, then use images that are 1920px wide. If the Slideshow is not set to full-width than use images that are 1200px wide. We suggest the following resolutions…

Full-width - 1920px x 900px 
Not Full-width - 1200px x 800px 

Image Gallery

There are several configurations you can use for the image galleries, but here are some size suggestions…

  • 1 image - 1600 x 900px (W x H)
  • 2 images - 900px x 600px (W x H)
  • 3 images or more - 600px x 400px (W x H)

Image with Text Overlay

We suggest using a 1920px wide x 1000px tall, you may use a shorter height, however, a good height is recommended as these parallax images will move as you scroll down the page.

Blog post featured images

You can use any height images although landscape images will always look best. Images of 900px wide will display sharp and fill their required specs.

Cropping Images

If you need help cropping your images check out our tutorial  here.