Images are an important part of the Windsor Law Centre for Cities website. High-quality images help grab visitor’s attention. The following specifications will help us maintain a good user experience:
Dimensions, Aspect Ratio, Resolution
- Full width photos: 2560 x 800 pixels | 16:5 aspect ratio | 72 DPI
- Graphics with text: 1200 x 600 pixels | 2:1 aspect ratio | 72 DPI
Template – Full Width Feature
- Full width photos: 2560 x 400 pixels | 72 DPI
- Graphics with text: 1200 x 400 pixels | 2:1 aspect ratio | 72 DPI
Please provide assets in the following formats to ensure images load quickly and are optimized for web use:
- Photographs: JPEG
- Logos: PNG
- Illustrations: PNG
- Images with text: PNG
- Keep the area of focus in the centre of the image.
Images may be cropped at different resolutions therefore, to ensure the important elements of an image are visible, use images where the focal point is vertically and horizontally centred. For example, on large monitors, the image may stretch to fill the width of the browser which means the top and bottom of the image will be cropped. On smaller screens like mobile phones, the left and right sides may be cropped to fit the width of the device.
- Avoid using text in images.
Text should ideally be placed in the HTML of the website to ensure legibility across various screen sizes and for visitors using assistive devices. If you must include text, ensure it’s placed in the centre of the image.