BT.com Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Image sizes

Column split images

These are the recommended image guidelines for all images used for components from the 2 split down to the 4 split.

Ratios

We have three standard image ratios to help us keep content alignment consistent across our pages.

These ratios are:

Landscape    16:9
Square           1:1
Portrait          2:3


Column split image sizes


We have two standard image widths regardless of the ratio. These widths are 420px and 640px.

420px

Ratio 16:9    420 x 236px
Ratio 1:1       420 x 420px
Ratio 2:3       420 x 630px

640px

Ratio 16:9    640 x 360px
Ratio 1:1       640 x 640px
Ratio 2:3       640 x 960px


Fluid images


The images will scale down/up in the browser to fit the width of the column or component they are placed inside.


*RFS: Recommended file size

This is a guide only. Some less detailed images will easily be under these file sizes, while a few might be slightly over. Optimise each image according to its merits.


 

Full width images

We use standard image sizes for our full width imagery, with an option for different depths at 960 and 1200bp.

Three images need to be produced to cover all breakpoints. These image sizes are loaded in at the following breakpoints:

320bp

Loads the 420 x 236px image and scales up/down in proportion

600bp

Loads the 960 x 320px image and scales up/down in proportion

960bp

Loads the 1920 x 400, 600 or 800px image and uses the ‘sliding door’ crop.


Sliding door crop


Images using this crop do not scale up or down but stay centred. As the browser window reduces in size the image is cropped left and right, but the image stays at its original height.


Content width images


Follow the same rules as full width images, except for 960bp, which doesn’t use the sliding door crop. Instead, it scales up or down in proportion.

320bp

Loads the 420 x 236px image and scales up/down in proportion

600bp

Loads the 960 x 320px image and scales up/down in proportion

960bp

Loads the 1200 x 400, 600 or 800px image and scales up/down in proportion. See component library (‘Hero’) for full specification and responsive behaviour.

 

*RFS: Recommended file size This is a guide only. Some less detailed images will easily be under these file sizes, while a few might be slightly over. Optimise each image according to its merits.


320bp


600 and 768bp


Full width 960 and 1200bp (uses sliding door crop)


Content width 960 and 1200bp (scales down in proportion)

 

File naming conventions

Follow these naming conventions when optimising images for the website:

[Product]-[Description]-[Dimensions]-[Normal/retina]-[Size]-[Version].[File type]

For example: TV-Game-of-Thrones-S7-420x236-x1-v01.jpg

 


Changelog


1.0.1



1.0.0