Skip links and keyboard navigation

Overview

Images are used to provide a visual representation of context. Images should be relevant to the content—avoid using images as unnecessary decoration.

When to use images

Accessibility

Default

View  example in Storybook

Code

<p>
    <img src="https://picsum.photos/926/521" class="img-fluid" alt="default responsive image example">
<p>

Figure

Using the <figure> element for an image provides a range of configuration/style options like a border, caption, credits, sizing, placement, linking, and viewing a larger version of the image in a lightbox.

View example in Storybook

Code

<figure>
    <img src="https://picsum.photos/374/210" alt="Example image as a figure">
</figure>

Figure with caption and credits

View example in Storybook

Code

<figure>
    <img src="https://picsum.photos/374/210">
    <figcaption>
        Wheel of Brisbane at South Bank
        <div class="figure-cc">
            © Alice Duffield
        </div>
    </figcaption>
</figure>

Figure with no border

Remove the border of the figure element by adding qg-unstyled to the <figure> element.

View example in Storybook

Code

<figure class="unstyled">
    <img src="https://picsum.photos/374/210" alt="Example figure image with no border">
    <figcaption>
        Wheel of Brisbane at South Bank
        <div class="figure-cc">
            © Alice Duffield
        </div>
    </figcaption>
</figure>

Figure pulled left

By default, the figure element is centered. You can add the class pull-left to align the figure element to the right.

View example in  Storybook

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus vehicula iaculis. Pellentesque pretium quam sit amet nulla finibus, in porta ex sagittis. Sed suscipit erat at posuere egestas. Suspendisse aliquet consectetur velit vel ultricies.

Pellentesque facilisis sit amet augue ac luctus. Donec blandit luctus orci dignissim porttitor.Vivamus condimentum pretium leo eget sodales. Phasellus vel nulla id tortor scelerisque finibus. Praesent ultricies pharetra erat, id imperdiet massa finibus vitae.

Mauris pharetra massa risus, quis consequat neque volutpat at. Nam lorem purus, sollicitudin et ex at, porta aliquam mauris. Duis imperdiet sapien et elit iaculis sagittis.

Figure pulled right

By default, the figure element is centered. You can add the class pull-right to align the figure element to the right.

View example in Storybook

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus vehicula iaculis. Pellentesque pretium quam sit amet nulla finibus, in porta ex sagittis. Sed suscipit erat at posuere egestas. Suspendisse aliquet consectetur velit vel ultricies.

Pellentesque facilisis sit amet augue ac luctus. Donec blandit luctus orci dignissim porttitor.Vivamus condimentum pretium leo eget sodales. Phasellus vel nulla id tortor scelerisque finibus. Praesent ultricies pharetra erat, id imperdiet massa finibus vitae.

Mauris pharetra massa risus, quis consequat neque volutpat at. Nam lorem purus, sollicitudin et ex at, porta aliquam mauris. Duis imperdiet sapien et elit iaculis sagittis.

Code

<!-- Pull-left example -->

<figure class="pull-left">
    <img src="https://picsum.photos/374/210" alt="Example figure image pulled-left">
    <figcaption>
        Pull-left example 
        <div class="figure-cc">
            Figure credits
        </div>
     </figcaption>
</figure>

<!-- Pull-right example -->

<figure class="pull-right">
    <img src="https://picsum.photos/374/210" alt="Example figure image pulled-right">
    <figcaption>
        Pull-right example 
        <div class="figure-cc">
            Figure credits
        </div>
    </figcaption>
</figure>

Full-width figure

To display the figure at full-width, add the class max-width-none.

View  example in Storybook

Code

<figure class="max-width-none">
    <img src="https://picsum.photos/374/210" alt="Example figure image full-width">
    <figcaption>
        Full-width example 
        <div class="figure-cc">
          Figure credits
        </div>
     </figcaption>
</figure>

Figure with view larger image

The image can be viewed at a larger size in a lightbox by using the following template. By defining data-fancybox you can group images to be navigated in the same lightbox.

View  example in Storybook

Code

<figure>
    <a href="https://picsum.photos/926/521" data-fancybox="gallery_id" data-analytics-link-group="swe-images">
        <span>View larger image</span>
        <img src="https://picsum.photos/374/210" alt="Example of figure with view larger image"><img class="figure__expand-icon" src="https://static.qgov.net.au/assets/v4/latest/images/Expand.svg" alt="Enlarge image">
    </a>
    <figcaption>
    View larger image example 
        <div class="figure-cc">
            Figure credits
        </div>
    </figcaption>
</figure>

Additional usage guidance

  • Some images can be specifically sized, if research indicates that it would benefit the audience. For example, the road signs on the Transport and Motoring franchise are sized so the proportions are the same as the actual signs.
  • Preserve the aspect ratio—don’t stretch or squeeze the image.
  • Save as a jpg or png.
  • Don’t mirror (flip) images for aesthetic reasons.
  • For naming convention guidelines, refer to the URL design guidelines.

Images must be relevant to the content and where practical, taken in Queensland. Consider the following:

  • Is the steering wheel on the correct side of the car?
  • Are things like street signs, service uniforms or clothing correct for Queensland?
  • Are landmarks relevant to the content? For example, don’t use a photo of a South East Queensland river on a page about North Queensland.
  • Are there any cultural awareness issues regarding the subject matter of the photo?
  • If the picture shows people working, does it include the appropriate personal protective equipment to comply with health and safety laws?
  • Does the photo contain number plates or other personally identifying details?
  • Does the image look professional and appropriate (e.g. avoid clipart)?
  • Has consent been obtained and recorded for all of the people in the image?
  • Is the subject of the image clear?

All images should be:

  • owned by the Queensland Government
  • in the public domain or
  • suitably licenced (check for a Creative Commons licence).

Always consider:

  • Is the image royalty free?
  • Has credit been given if necessary?
  • Is there a signed consent (release) form from everyone in the photo?

If an image is taken by a Queensland Government employee (in the course of their work) or a freelance photographer commissioned by a government agency, copyright belongs to the State of Queensland and the statement in the website footer is sufficient. The photographer is not credited in this instance.