The Image tool adds visuals such as photos to your site. Images are great to help engage people and tell the story of your project in pictures. There are a range of ways you can use images however on this page we are just talking about adding an image into your content.

Settings

Basic

• Image - allows you to select or upload an image file.
• Alternative Description - requires you to enter alternative text to make the image accessible.
• Image Caption - allows you to provide caption text to display with the image. Could include image source i.e. if a photo, credit the photographer.
• Open Image in Lightbox - allows visitors to click the image to expand it in a lightbox

Display

• Size - alters the width and height of the image.
• Position - alters the justification of the image.
• Image border - allows you to add a simple border to the image.
• Caption position - choose from top or bottom for the caption position.

Advanced

• Block Title - allows you to give your image a heading.

Practice tips

• As you use the Image tool, you'll notice it takes you to an option to upload an image that has already been saved in the File Manager. If you haven't put your image in the File Manager, you can choose to upload your image at this time using the instructions below.
• Crop your images - use a known aspect ratio (16:9, 4:3 or 1:1) to ensure consistency.
• Resize your images - smaller images are better because they load faster, but you need to make sure the image isn't visually degraded.
• Compress images - you can further speed up your site by adding compression to your images via Photoshop or other editing programs. Again, make sure the images aren't visually degraded.
• Another important consideration in working with imagery and optimising for the web is understanding the different image filetypes. Generally speaking there are four image types we work with:
  1. .jpg is the most common filetype in use on the web and allows for compression algorithms to be applied to the image to reduce its file size. It is mainly used for images photographs or other 'flattened' images.
  2. .png allows the creation of images with transparent backgrounds. This is important if we want to put a logo or an icon on top of a coloured background but don't want a big white box sitting behind it.
  3. .gif is another similar filetype to .png that allows for transparent backgrounds.
  4. .svg is increasingly used on the web and is a vector based format as opposed to 'raster' formats like .jpg and .png. This means that a .svg asset such as an icon will never lose quality when we zoom in on it, whereas a .png will start to look fuzzy. We use .svg mainly for user interface elements or interactive content that we want to have control over such as an element on an interactive plan.