Correct Use of Photos

Many of the components of the ST4 template are built to include images. The images used in components need to be a specific size. This template takes advantage of photography to enhance your website and photos are used in larger sizes than in the previous template. When selecting photos for your website, obtain the original, non-altered image whenever possible.

The image sizes used in this template are to web standards and are based on aspect ratios.

Headshot (1:1 Ratio)

A 1:1 ratio means that an image’s width and height are equal, creating a square. The most common 1:1 ratio used is the 500 x 500 pixels headshot. 

Photograph (3:2 Ratio)

The 3:2 ratio has roots in 35-millimeter film and photography and is still widely used for print sizes. The minimum size is 750 x 500 pixels.

Classic (4:3 Ratio)

A 4:3 ratio is typically used for TV displays, computer monitors, and digital cameras. The minimum size is 800 x 600 pixels.

Standard Hero (16:9 Ratio)

The 16:9 ratio is mostly seen on presentation slides, computer monitors, or widescreen TVs. The minimum size is 1920 x 1080 pixels. It is commonly used when the page has a right sidebar.

Ultrawide Hero (21:9 Ratio)

The 21:9 ratio is used for the homepage hero and can also be used on interior heroes when the page does not have the right sidebar. The minimum size is 2520 x 1080 pixels.

Images used within content of a wysiwyg editor can be a nonspecific size. You may need to adjust the image size so it can fit with the text area of a page.