Image sizes, file formats and naming conventions

  • make sure images meet the required minimums for heights and widths based on the component requirements specified in the table below otherwise you risk pixelation/distortion
  • reduce your image file sizes for optimal web performance
    • set the image resolution to 72 pixels/inch
    • choose "save for web" option

Image sizes by component

Component Variation Ratios Minimum width Minimum height Disclaimers
Component:

Background image block

 Variation: Ratios:


Minimum width:

Fixed width: 1200px

Edge to edge (nav): 1600px

Edge to edge (no nav): 1920px

 Minimum height:

Adapts to the amount of content inside the component

 Disclaimers:

See below:
Component: Block banner Variation:

Standard

Extended

 Ratios:

Minimum width:

800px

 Minimum height:

500px

 Disclaimers:

See below note 2
Component:

Card

 Variation:

Regular with image

 Ratios:

16x9

4x3

3x4

1x1

 Minimum width:

600px

 Minimum height: Disclaimers:

See below note 4
Component:

Card

 Variation:

Mini

 Ratios:

Minimum width:

300px

 Minimum height: Disclaimers:

See below:
Component:

Contact information block

 Variation: Ratios:

16x9

4x3

3x4

1x1

 Minimum width:

700px

 Minimum height: Disclaimers:

See below note 4
Component: Content block Variation:

With image

 Ratios:

Minimum width:

Two thirds (2/3) image:

  • Fixed width: 1200px
  • Edge to edge (nav): 1600px
  • Edge to edge (no nav): 1920px

Half (1/2) image:

  • Fixed width: 600px
  • Edge to edge (nav): 800px
  • Edge to edge (no nav): 860px

One third (1/3) image:

  • Fixed width: 600px
  • Edge to edge (nav): 600px
  • Edge to edge (no nav): 640px
 Minimum height:

Adapts to the amount of content inside the component

 Disclaimers:

See below:
Component:

Hero banner

 Variation:

Standard

 Ratios:

Minimum width:

Fixed width: 1200px

Edge to edge (nav): 1600px

Edge to edge (no nav): 1920px

 Minimum height:

350px

 Disclaimers:

See below:
Component:

Hero banner

 Variation:

Long text

 Ratios:

Minimum width:

Fixed width: 1200px

Edge to edge (nav): 1600px

Edge to edge (no nav): 1920px

 Minimum height:

Small: 270px

Medium: 360px

Large: 480px

 Disclaimers:

See below:
Component:

Hero banner

 Variation:

Adaptable

 Ratios:

Minimum width:

Full image:

  • Fixed width: 1200px
  • Edge to edge (nav): 1600px
  • Edge to edge (no nav): 1920px

Half image:

  • Fixed width: 600px
  • Edge to edge (nav): 800px
  • Edge to edge (no nav): 860px

Mobile: 990px

 Minimum height:

Small: 500px

Medium: 625px

Large: 750px

Mobile: 400px

 Disclaimers:

See below:
Component:

Image viewer

 Variation:

Gallery thumbnails

 Ratios:

16x9

4x3

3x4

1x1

 Minimum width:

275px

Minimum height: Disclaimers:

See below note 4
Component:

Image viewer

 Variation:

Single thumbnail

 Ratios:

16x9

4x3

3x4

1x1

 Minimum width:

Constrained by the size of the container it is in (400px - 1200px)

 Minimum height: Disclaimers:

See below note 4
Component:

Image viewer

 Variation: Main image Ratios: Minimum width:

Allows for zooming - needs larger image (recommended 2000px)

 Minimum height:

N/A

 Disclaimers:

Displays full image
Component:

Images

 Variation: Ratios: Minimum width:

Constrained by the size of the container it is in

 Minimum height:

N/A

 Disclaimers:

Displays full image
Component:

Marketing banner

 Variation:

Marketing block

 Ratios: Minimum width:

Two thirds (2/3) image:

  • Fixed width: 1200px
  • Edge to edge (nav): 1600px
  • Edge to edge (no nav): 1920px

Half (1/2) image:

  • Fixed width: 600px
  • Edge to edge (nav): 800px
  • Edge to edge (no nav): 860px

One third (1/3) image:

  • Fixed width: 600px
  • Edge to edge (nav): 600px
  • Edge to edge (no nav): 640px
 Minimum height:

Adapts to the amount of content inside the component

Disclaimers:

See below:
Component:

Marketing banner

 Variation:

Slogan banner

 Ratios: Minimum width:

Fixed width: 1200px

Edge to edge (nav): 1600px

Edge to edge (no nav): 1920px

 Minimum height:

Extra small: 250px

Small: 350px

Medium: 450px

Large: 650px

 Disclaimers:

See below:
Component:

Text on image

 Variation: Ratios:

16x9

4x3

3x4

1x1

 Minimum width:

Fixed width: 1200px

Edge to edge (nav): 1600px

Edge to edge (no nav): 1920px

 Minimum height:

Height is determined by the selected ratio as well as the width of the container the component occupies

 Disclaimers:

See below:

Disclaimers

Note 1

  • max widths for edge to edge are based on the most common resolution of 1920px

Note 2

  • background images are fluid, therefore when resizing through different break point some unintended cropping may occur - to mitigate for that:
    • always set the focal points (position x, position y) to image's key information i.e. (right, top)
    • you can only have 1 focal point on an image

Note 3

  • component adjusts to the amount of text it contains
  • ensure the images are long enough so as they expand, they do not get distorted and pixelated

Note 4

  • if the image ratio matches the selected ratio of the component the entire image will be presented

Image file formats

Use JPG or PNG format for most images on calgary.ca.

GIF format can be used for illustrations (like logos), but never for photos, as this format can't display all the colours required to reproduce a photo.

Image file names

Image names should have:

  • Three to five descriptive keywords (include keywords that make it easier to identify an image from its name.  It’s easier to identify an image named "fire-fighter-recruitment-305.jpg" over one named "image12345.jpg")
  • Width x height (in pixels)
  • Dashes (-) to separate each word, not an underscore