Images

Deprecation notice

It's recommended to stop using the classes qg-cut-in / qg-cut-in-alt and figure-credits, and replace existing instances with qg-fig and figure-cc respectively.

For more details on how to create a similar layout see figure pulled left/right and figure with view larger image below.

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

to identify things (e.g. road signs and their meanings)
to humanise a story
to aid navigation—relevant thumbnails.

Accessibility

don’t use images as the only way of conveying information (unless it’s the only way that information can be conveyed).
don’t use images of text (including phone numbers).
include alt text and a caption on ‘content images’ (i.e. images that are more than purely decorative).

Default

Images are made responsive with the class img-fluid . This applies height:auto; and max-width:100%; to the image so that it scales with the parent element.
For the standard SWE content area, the recommended image dimensions are 926 x 521px (an aspect ratio of 16:9). In a viewport of 991px, the image displays at its maximum width of 926px.

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.

Within <div id="qg-primary-content"> wrap the image in the standard HTML <figure> element.
Outside of <div id="qg-primary-content"> also add the class qg-fig to any <figure> element.
By default any image wrapped in <figure> will display at a maximum width of 374 pixels. Apply the class max-width-none to the <figure> element to display it at full-width.
Remove the border of the figure element by adding qg-unstyled to the <figure> element.

Code

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

Figure with caption and credits

Should be sentence case and have no closing punctuation.
The image only requires ‘alt text’ if the caption doesn’t convey some specific detail apparent to sighted users.

Wheel of Brisbane at South Bank
© Alice Dufflield

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.

Example of a figure image — Wheel of Brisbane at South Bank
© Alice Duffield

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.

Wheel of Brisbane at South Bank
© Alice Duffield

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.

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.

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.

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.

Skip links and keyboard navigation

SWE components

Images

Overview

When to use images

Accessibility

Default

Code

Figure

Code

Figure with caption and credits

Code

Figure with no border

Code

Figure pulled left

Figure pulled right

Code

Full-width figure

Code

Figure with view larger image

Code

Additional usage guidance

Skip links and keyboard navigation

Log in to For government

Select your agency

SWE components

Images

Overview

When to use images

Accessibility

Default

Code

Figure

Code

Figure with caption and credits

Code

Figure with no border

Code

Figure pulled left

Figure pulled right

Code

Full-width figure

Code

Figure with view larger image

Code

Additional usage guidance

Image optimisation

Image suitability

Sourcing images