Image sizes for your website – “Letterbox”

Letterbox size

A letterbox image is used by web designers typically as main images on fullwidth web pages. We use either 500, 550 or 600px height by 1900px in width.

The image is designed specifically to always cover 100% of the viewing screen in width but in a lot of devices show some of the the main header text below it.

Screen sizes and devices

How it works

The image below shows you its original full dimension. Note the 1 – 20 scale on the left and right. Because the Letterbox image size (above) is set for 100% width of any device and the Responsive Design of the page tries to make the content within the image as big as it can, your device will crop some of the image unless you are viewing it on a very large TV screen where is needs all of the 1900px width to maintain its dimensions.

Try going back to the Letterbox image at the top of this page to see what numbers are on the left and right edges.

letterbox image dimension

Conclusion

To handle all screen sizes and resolutions create your image no less than 1900px  in width and between 500 and 600 px in height and make sure the main content of the image is in the centre.*

*Make sure the main content of the image is in the centre. You can actually set how the device displays the image i.e. “Make sure you always show the righthand side” but let’s not do that here.

A Guide to the website images we use on your websites

Please find below a list of the image sizes we use to help you add them to your website yourself.

  • HERO Image (Banner) – Extra Large, Homepage 

  • Letterbox Image – Large, main page image

  • Website width Image – Page and Blog posts

  • In content Images