Adding an image using the WYSIWYG

Adding images to your web page is a good way to create a visual connection with your content. Images can help attract and guide readers through your content and can cross language barriers a lot better than text at times. Below are guidelines for adding images from the media library using the what-you-see-is-what-you-get (WYSIWYG) and other components designed for image display.

Only use images you have permission to use

• Be careful using images in the media library that have been uploaded by another editor. You should always check if you are able to use an image.
• Don’t use other images you have sourced yourself from Google or anywhere else as using unlicensed images can incur large penalties.
• Don't use images from other NSW Government websites or social media channels without permission

Insert an image in the WYSIWYG

1. In a WYSIWYG toolbar click on the Insert Media icon.
   
   
   • It is best practice to upload your images via the Media page first to ensure it is tagged correctly. Learn more about Uploading images to the CMS.
2. Search for the image by Name (which is the Title you gave the image when you uploaded it) and Apply filters.
3. When you have found your image, check the box on the image and click insert selected button.
4. Once the image is displayed in the WYSIWYG, click on the image and an edit bar with edit options will show. Hover over the edit bar icons to see their function displayed.
   
   • Caption (optional) – add a caption to the image which will appear below the image. Selecting the caption will add the field below the image for you to edit.
     • Note: the Caption is read by screen readers. If using captions consider that the alt text is also read by screen readers.
       • Make the caption and alt text different.
       • Make the alt text blank (alt="") if the caption is clearly describing the image.
     • Link (optional) – you can link the image to a URL, email or phone number.
     • Override the Alternative text that has been added with the media file. It is mandatory to have alt text but you can leave the alt text that has been added with the media file.
       • You may choose to update the alt text on the page to make it more contextual, for example, an image with the general alt text of 'two women pointing at a computer' placed on a NSW Department of Education page could have the new alt text of 'a teacher explaining a new concept to a student.' Contextual alt text improves the accessibility and SEO of a page.
       • If you update the alt text for the image, follow the guidelines.
     • View mode (optional) controls the size of the image in the WYSIWYG.
       • Large (full width) – this is the preferred size for landscape (horizontal) oriented images.
       • Medium (half width of the WYSIWYG) – should be used when you have a reasonable amount of text to wrap around the image. Medium images should be aligned either left of right.
       • Download – should only be used when the image is linked to a file that can be downloaded.
     • Align (optional) your image – None, Left, Centre or Right.
     • On mobile, images automatically stack and go full width.

Note: If you are aligning multiple images of the same size on a page, we recommend using an Image block or a Feature block. This ensures the images display in the same dimensions on the page. (Adding multiple images in a WYSIWYG can result in images displaying in different sizes.)

Need any more help?

If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.