Image Specifications Quick Reference

Find recommended specifications for all the different types of images you can use throughout Columbia Sites.

NOTES:

  • All specs are listed height x width in pixels.
  • All images should be 72 dpi.
  • All images are NOT TO EXCEED 2000 x 2000 pixels or 1MB in size.

Hero images
450 x 1400

Additional considerations:
Depending on the size of the browser window. not all of the hero image will be displayed. The image will get wider with the browser, however the height will generally stay consistent. This is why we recommend images that are very wide, and not tall.

Feature images
456 x 1400

Additional considerations:
Feature images need to be high quality enough to be full width, however we recommend not making the image too tall, or else it will dominate the content on the page. If an image smaller than 

Image carousels
Basic pages: 456 x 705
Landing pages: 456 x 1400

Image cards
The full pixel width of the desktop layout is set to 1170px. Therefore,

  • If your image card spans the entire screen, the image must be at least 1170 px wide
  • If your image card spans half the screen, the image must be at least 585 px wide (1170 px / 2)
  • If your image card spans one third of the screen, the image must be at least 390 px wide (1170 px / 3)
  • etc...

IMPORTANT: If you want all the image cards to be the same size and shape, they must all be created in the same width and height pixel ratio.  

Inline image
Width less than 300px

Additional considerations:
The image should be narrow enough for text to comfortably wrap around. There is no set height specification. When arranging the inline image in the editing interface, place it before the text block you would like the image to appear next to.

Single image
With sidebar: 709 px wide
Without sidebar: more than 640px wide

Sidebar image
705px wide