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:

• Gallery
• Grid layout
• Text/Image
• Windows

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 no larger than 4 MB. Any file larger than 4 MB will not display on the front end of the website. Images that are 150 MB will upload to Govstack, but will not display. 

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.