Embedded images

See how different images of different sizes display on a generic content page.

EdWeb sets the rules for how generic content images display, depending on the screen size

Accessibility

Images are a useful way to complement information and make your page look more appealing.

However, images should not be used in place of information, and each page should make sense without the image.

Make sure you add appropriate alt text for anyone unable to view the images.

Avoid too many images

We don't recommend that you use a lot of images on the same page on your own site. Several are shown here for demonstrative purposes only.

Dynamic behaviour – size and alignment of your images

Content images are added manually into generic content pages.

Behaviour of images on EdWeb varies depending on the size of screen they are being viewed on, and on the width and ratio of the image itself. This is handled by EdWeb – you can’t manually alter the alignment of your images.

Key points

Alignment

Images will either float right or display across the full content width.

Portrait images will always float right – which means they display aligned to the right, with text wrapped around them.
Landscape images of 1200px or wider will always display the full width of the content area.
Behaviour of other images will vary depending on the screen size.

Image size

Images will never display as bigger than the original size, but often display smaller, depending on the screen size.
151px wide images, and narrower, will always display in the original size.
Landscape or square images are likely to appear bigger than portrait images with the same width.

This page shows a variety of images of different widths and ratios to see how they display. Note that images originally the same width display differently depending on their aspect ratio.

Plain box of 1300x400px — Because this image is landscape and over 1200px, it will always display the full width of the screen.

Check different screen sizes

Remember that your images will display differently depending on the size of screen they are being viewed on.

Don’t spend time optimising how images appear on a desktop view; consider how they will look on all screen sizes. One of the reasons it's best to avoid too many images is that it's impossible to make your page look perfect for all devices.

We can't tell you exactly how your images will look, but you can check for yourself how your final page looks on different screen sizes.

Responsive design and accessibility - more on how your site will display

Plain box of 1300x1600px — Portrait images always float right.

Captions

If your image is wider than 151px, you can add a caption, as you can see from images on this page.

Avoid long captions

However, you should avoid using captions that are too long, considering the width of the displayed image, as this can cause the design to break.

It’s better to add a fairly short caption, for example a photographer credit, with further associated information on the text of the page.

What is 'generic content'?

The page types section on this site explains more about the generic content type.