Image Size Guide

  1. Home
  2. Knowledge Base
  3. Features
  4. Image Size Guide

In order to deliver faster page speed, Architect automatically optimizes each image loaded to ensure it will look best on the individual device. You can follow our sizing guidelines to manage your images.

Note: Architect optimizes the images, but keep in mind that images that are ideal on desktop may not look best on mobile. Review each image in each layout and either hide images on devices or create a new versions for different devices as needed.

Relevant Terms

Aspect Ratio: the ratio of the width to the height of an image

Image Resolution: the actual size of the image

Suggested Size – Image Type

Large images will provide great resolution for site visitors, however, the size directly affects the page speed of your site. It’s best to load images in the size they will be displayed.

Our suggestions for image size:

  • Background Image: 1980 pixels
  • Desktop Image: 1660 pixels
  • Tablet Image: 1440 pixels
  • Mobile Image: 600 pixels
  • Thumbnail Image: 150 pixels

Note: you can check pixel size by multiplying pixel width by height.

Suggested Size – Widget Type

Icon Widget

Pre-designed or uploaded icons can be added into your site using this widget.

Specifics

  • Common aspect ratio: 1:1
  • Common resolution: 200 x 200 (most sizes will work) and SVGs can be re-sized without losing resolution.

Slider Widget

Images used in this widget are typically quite large; we recommend using wide images, and substantial padding to ensure that any resizing won’t crop the image.

Specifics:

  • Common aspect ratios: 16:9 and 3:4. Aspect Ratio for square sliders: 1:1
  • Common resolution: 1600 x 900 pixels, 1280 x 720 pixels, and 1280 x 960 pixels
  • Image ratios should match the slider
  • Aspect ratios on mobile may require the opposite as the desktop. You can “hide on mobile.”

This widget has multiple layout options which define the suggested ratio of images, however, any aspect ratio is suggested.

Specifics:

  • Aspect ratio for square galleries: 1:1
  • Aspect ratio for tall galleries: 2:5
  • Image rations should match
  • Common resolution: any resolution under 1500 pixels

Favicons

Favicons must use an aspect ratio of 1:1 and should have a resolution size of 24 x 24 or 36 x 36.

Was this article helpful?

Related Articles

Join Now