Images, Picture & Figures

Images

The <img> tag defines an image in a HTML page. It has two required attributes: src (specifies the URL of an image) and alt (specifies an alternate text for an image).

See the Adding images into the Media Library article for a full guide on how to upload images and how to find the URL to use within your HTML.

Pro tip: To link an image to another page or document, simply nest the <img> tag inside <a> tags.

Editorial Suite pro tip: Create article images no wider than 750px. When floating images within an article you must use a helper div to wrap the image and all the content it floats with. See the Editorial Suite Helpers section on how to do this.

Create a wrapper div then add an image using the HTML <img> tag as follow.

To centre the image on the page add the following class to the <img> tag.

To float the image left within the page add the following classes to the <img> tag. If you are using the Editorial Suite see the tip.

To float the image right within the page add the following classes to the <img> tag. If you are using the Editorial Suite see the tip.

Picture

The <picture> element allows you to display different images for mobile and desktop. Loading the most appropriate image for mobile first can save bandwidth and page load times.

Pro tip: Use a simpler version of an image for mobile by cropping or modifying the image.

Editorial Suite pro tip: Create article images no wider than 750px. For feature images use the <picture> tag and make the desktop version no wider than 1110px. See the Editorial Suite Helpers section on how to do this.

Create a wrapper div then use the <picture> element to display different images for mobile and desktop. Always add the URL for the desktop image in srcset="..." and the mobile image in src="...".

Figures (Image with caption)

Add images with short descriptions by using the HTML <figure> tag as shown.

Basic <figure> tag with image and figure caption.

To centre the figure on the page wrap the content in <figure class="figure-center">.

To float the figure left within the page wrap the content in <figure class="figure-floating figure-floating-left">.

To float the figure right within the page wrap the content in <figure class="figure-floating figure-floating-right">.

Our store

Images, Picture & Figures

Images

Picture

Figures (Image with caption)