Adding images to Mass.gov

You can either upload a new image or add an image you've used before.

Summary

You can use the editing toolbar (rich text editor) to add images to your pages. Many content types have fields with rich text editors — the authoring interface with formatting buttons at the top. For example, the Overview on a service details page is a rich text editor field.

You can either upload a new image or add an image you've used before.

Important things to know about embedding an image

  • Your image will display at either half or the full width of the editor area (Note: This doesn't apply to an Information Details header media field)

  • The full width of this area is 800 x 470 pixels on a full-size screen

  • Make sure you use an image with a resolution close to these dimensions. An image that is smaller than the size you’ve chosen will be resized to fill the space, and will usually look blurry.

How to add a new image

Step 1

Click on the "Insert Image" button in any rich text field.

Step 2

Click on the Select files button to browse your computer for the image you’d like to upload.

​Step 3

Once you’ve selected an image from your computer, it will appear in the File upload window.

Step 4

Click the Use selected button. If you're using a smaller screen, you might have to scroll a little to see it.

Step 5

A menu will appear with display options.

First, choose whether you want your image to display at full or half width.

Next, add your alternative text. Alternative text isn’t a caption. It replaces the image for users who are unable to see it. Users with screen readers will hear this text instead of seeing the image, and if the image doesn’t load for any reason, the alternative text will appear instead. Alternative text should provide the same information as the image, so be sure it clearly captures the message the image conveys.

Step 6

Your image should now be visible in your rich text field and will appear on the page when you save.

How to add an image you've used before

Step 1

Click on the "Insert Image" button in any rich text field.

Step 2

Click the "File listing" tab at the top left.

Step 3

Search for the image by filename.

Step 4

Click the image you want to use. It will appear at the bottom of the image browser.

Step 5

Click the "Use Selected" button.

Step 6

A menu will appear with display options.

First, choose whether you want your image to display at full or half width.

Next, add your alternative text. Alternative text isn’t a caption. It replaces the image for users who don’t see it. Users with screen readers will hear this text instead of seeing the image, and if the image doesn’t load for any reason, the alternative text will appear instead. Alternative text should provide the same information as the image, so be sure it clearly captures the message the image conveys.

Step 7

Your image should now be visible in your rich text field and will appear on the page when you save.

More on using images on Mass.gov

If you’d like to request access to our image library, which includes free, properly sized, and edited images that content authors can use for various content types, then please complete the image library access request form.

You’ll also find additional tips about images, including information about image sizes, in our Image Guide within the library.

Was this article helpful?

Tell us what you think button