Site width images

Image sizes for your website – “Site width”

Site width image

A site wide image is used by web designers typically as main images on web pages where they don’t want to utilise the full width. This can be for design reasons or in a lot of cases where the material available isn’t good enough quality for large, full width images.

This can be any similar ratio such as 11:7 (1100 x 700), 71:40 (1100 x 640) as long as the height isn’t too long.

We use a site width of 1100px although 1200px is now widely used. Therefore 1100px sets our site width image width.

Screen sizes and devices

How do I measure the site width?

If your website isn’t using a full width layout then the site width will be left of your logo and right of your phone number or other contact reference on the right.

Use a browser extension to measure if you want to get the exact width for your images. I use the Chrome extension Page Ruler Redux.

site-width example

Conclusion

Perfect size for blogs where you don’t utilise a sidebar, 1100px by 690px is a good size to use. The 1100px width comes from the width of your overall website. If you make sure they are all the same size then when you display a list of blog posts, everything will be perfectly aligned

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