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