Skip to main content Skip to footer

Learning Centre

Add an Image

Images allow you to customize the look and feel of your website and really showcase your community. You can add images in Govstack to use in a variety of content components on your website, including:

Before you can add an image in Govstack, you need to create a media folder.

Upload an image

To add an image to a media folder, you need to:

  1. Select the 'Media' tab from the Govstack main menu
  2. This will open the 'Media' section in the back office. You can now select the folder you want to add an image to
  3. From here, you can drag and drop an image file where it says 'Drag and drop your file(s) into the area'. Or, you can click where it says 'or click here to choose files' to browse your computer's folders to find the image file
  4. Once the image is uploaded, click 'Save' to complete the process

Image size restrictions

Image files you upload to the 'Media' tab should be less than 150MB in size. Image file sizes larger that 150MB will be blurry and will not properly display on a page.

Images used on Govstack are based on the aspect ratio of the image and not on pixel size. A single image can have multiple aspect ratios which can be adjusted to create a new image.

Image optimization

You can optimize the images on your website to improve page load times and user experience. Large, unoptimized images can slow down your website, potentially leading to increased bounce rates, and perceived rendering issues. Optimizing images is not the same as cropping or editing images within the Govstack media section.

Raster and vector images are two different types of graphics files. The recommended format depends on the type of image and its intended use.

There are several ways to optimize your image. You can use a program like Photoshop, or use an online tool to help reduce the size of a JPEG file or of a PNG file.

We recommend that raster images are optimized 50% to 70% to get the best results. Vector images, like SVGs, can be optimized by removing unnecessary code.

Add a WebP file

To add or use a WebP file as an image, you will need a Photoshop plug-in to make sure the image is compatible with Govstack. 

Add alternative text

After adding an image to the media library, you need to add alternative (alt) text for the image to meet accessibility requirements. Learn how to write accessible alt text for your images.

To add or edit alt text for an image:

  1. Navigate to the image you'd like to add alt text to in the 'Media' library
  2. Select the image's file name (not the image icon itself)
  3. Next to 'Alternative text' field, add your alt text
  4. Click 'Save'

The alt text you add to an image in the media library will be used whenever the image is shared on a page using a content component. However, you are able to override the alt text when adding an image to a Text component.

Edit, delete or move an image

Learn how to edit the crop and focal point for an image, move an image to another media folder or delete an image.

You can edit the crop and focal point for your images which will determine how the image appear when used in various content components.

To move an image to a different media folder, you need to:

  1. Select the 'Media' tab from the Govstack main menu
  2. Select the folder that contains the image you want to move
  3. Click on the image you want to move (not on its file name)
  4. Select 'Move...'
  5. Select the media folder that you want to move the image to from the options available. You can also search for the folder's name in the search bar provided
  6. Click 'Submit' to complete the process

To delete an image from a media folder, you need to:

  1. Select the 'Media' tab from the Govstack main menu
  2. Select the folder that contains the image you want to delete
  3. Click on the image you want to delete (not on its file name)
  4. Select 'Delete...'
  5. Select 'Yes, delete' to confirm that you want to delete the image

More information

This section is to provide further explanation and information on some of the terms used above.

Raster images are the most thought of form when thinking of images. Raster images are pixel based. The images are compiled of pixels containing unique colours and tones to create an image. JPEG, PNG, and WebP are all examples of raster images.

Vector images keep track of points and line paths, instead of pixels. Vector images can be scaled smaller or larger without impacting the quality. SVG is an example of a vector image.

JPEG is a type of raster image. JPEGs are commonly used for photographs. It will display as a low-resolution version of the image first and then gradually improve in quality as the image loads.

PNG is a type of raster image. PNGs are best used for graphics or images with flat, solid colours: like a logo or icon. PNGs should be saved with a transparent background.

WebP is a type of raster image. WebP is the modern and preferred image format for optimization. We recommend this format to get the best performance and user experience when working with detailed, photo-like images.

SVG is a type of vector image. SVGs are excellent for logos, icons, and graphics that need to be resized without losing quality.