In content images

Image sizes for your website – “In Content Images”

In content images

In content images are used in the content of your pages and posts to add interest and to break up otherwise large areas of text.

Rectangular – “Landscape Orientation”

A ratio of 10:7 is a typical example of this image type. Use this image if you don’t have much text to go with it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

In content image
in-content-size

Square

A ratio of 1:1 for square images. Use this image if you have more text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rectangular – “Portrait Orientation”

A ratio of 7:10 is a typical example of this image type. Use this image if you have lots of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Why does this all matter?

If you are really keen on your image but don’t have a lot to say, it can look a bit strange

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cropping and Reducing

When creating your images, cropping the images before reducing rather than just reducing can often help keep interest in the image

Cropping vs Reducing

In Conclusion

Use images with the appropriate dimensions. If you are taking your own images always consider taking both portrait and landscape so you can decide when you write your blog which one you want to use.

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¬†

    View
  • Letterbox Image – Large, main page image

    View
  • Website width Image – Page and Blog posts

    View
  • In content Images

    View