Images
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 appliesheight:auto;andmax-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 classqg-figto any<figure>element. - By default any image wrapped in
<figure>will display at a maximum width of 374 pixels. Apply the classmax-width-noneto the<figure>element to display it at full-width. - Remove the border of the figure element by adding
qg-unstyledto 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.
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.
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.
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.
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.
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.