XClose

Indigo Demo

Home
Menu

Images and Indigo

Size of images is referred to in pixels or px.
When you resize an image, you are guided by the pixels suggested below.
Once the image has the correct pixels, you place them on a page where you choose how it's going to be displayed i.e. medium, large etc.

Responsive Images

Image size in Indigo is really important.

When using the responsive indigo template all your images need to be allocated the correct size option to give them a maximum width and prevent them from becoming pixilated and looking poor quality!

Sizes

Because the images are responsive they will automatically expand to the available space.

If you need the image to be a certain maximum size on the page, pick the correct size from the drop-down (e.g. small, medium or large and their corresponding pixels).

How to save an image

  • Ensure you resize to the required size in pixels
  • All images should be resized in Photoshop or other image-editing software and saved for Web as JPGs at 60% quality to optimise your website performance.
  • We recommend that an aspect ratio of 16:10 is maintained for all image sizes apart from the banner.

To consider

  1. Resize your images before uploading them to the website. Correct sizing of images will prevent slow pages for your visitors!
  2. Mobiles will download the image even though they do not show it - so it could be costly for site visitors using mobile data on certain data plans!
  3. Be aware that you need to wait till the page has saved completely. Failing to do so, results in any image going back to its default size i.e. 'medium'.

Options available

Small image - this will display at a maximum width of 320px - suggested uploaded image width between 320px and 400px

Medium image - this will display at a maximum width of 400px, a versatile size image that fits nicely in articles when floated on desktops and also full width in mobile - suggested uploaded image width between 400px and 767px

Large image - this will display at a maximum width of 768px, this is the upper limit of a mobile in landscape view and would fit across as a full width page on mobile or works well in desktop and tablet in the main body of the content - suggested uploaded image width between 768px and 989px

XL image - this will display at a maximum width of 990px, this is the upper limit of a tablet in landscape view and would fit across as a full width page on tablet or works well in desktop and tablet in the main body of the content - suggested uploaded image width between 990px and 1399px

SuperXL image - this will display at a maximum width of 1400px, this is the largest image allowed, it would commonly be used as a banner - suggested uploaded image width should be 1400px

Natural Size - this turns off responsive images. This is used for small graphics like icons which need to stay a specific size.
This can only be used for uploaded images less than 320px