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 |
|---|---|---|---|---|---|
|
|
Fixed width: 1200px Edge to edge (nav): 1600px Edge to edge (no nav): 1920px |
Adapts to the amount of content inside the component |
See below: |
||
| Block banner |
|
|
800px |
500px |
See below note 2 |
|
Card |
16x9 4x3 3x4 1x1 |
600px |
See below note 4 |
||
|
Card |
|
300px |
See below: |
||
|
16x9 4x3 3x4 1x1 |
700px |
See below note 4 |
|||
| Content block |
|
Two thirds (2/3) image:
Half (1/2) image:
One third (1/3) image:
|
Adapts to the amount of content inside the component |
See below: |
|
|
Hero banner |
|
Fixed width: 1200px Edge to edge (nav): 1600px Edge to edge (no nav): 1920px |
350px |
See below: |
|
|
Hero banner |
|
Fixed width: 1200px Edge to edge (nav): 1600px Edge to edge (no nav): 1920px |
Small: 270px Medium: 360px Large: 480px |
See below: |
|
|
Hero banner |
|
Full image:
Half image:
Mobile: 990px |
Small: 500px Medium: 625px Large: 750px Mobile: 400px |
See below: |
|
|
Image viewer |
16x9 4x3 3x4 1x1 |
275px |
See below note 4 |
||
|
Image viewer |
16x9 4x3 3x4 1x1 |
Constrained by the size of the container it is in (400px - 1200px) |
See below note 4 |
||
|
Image viewer |
Main image |
Allows for zooming - needs larger image (recommended 2000px) |
N/A |
Displays full image |
|
|
Constrained by the size of the container it is in |
N/A |
Displays full image |
|||
|
Marketing banner |
Two thirds (2/3) image:
Half (1/2) image:
One third (1/3) image:
|
Adapts to the amount of content inside the component |
See below: |
||
|
Marketing banner |
Fixed width: 1200px Edge to edge (nav): 1600px Edge to edge (no nav): 1920px |
Extra small: 250px Small: 350px Medium: 450px Large: 650px |
See below: |
||
|
16x9 4x3 3x4 1x1 |
Fixed width: 1200px Edge to edge (nav): 1600px Edge to edge (no nav): 1920px |
Height is determined by the selected ratio as well as the width of the container the component occupies |
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