Images

Photos can make your pages come alive, but only if you use them properly. Learn more about working with images on Mass.gov.

Guidance on using images

General tips

Use smaller files sizes

In many cases, you can upload image files up to 256MB. However, larger image files take longer to load, especially on mobile devices. Consider using images no larger than 5MB for best usability.

Banner images should be decorative

Banner images, from Service pages to Info Details pages to Promo pages, should be decorative only, and not include any text or information not already covered on the page itself. This is for both accessibility considerations and because banner images automatically resize according to the user’s browser, which can crop images in unexpected ways. If there are concerns anything important could get cropped by auto-resizing, or missed by visually impaired individuals, then the image should not be in a banner and instead embedded somewhere else on the page.

Image rights

If you didn't take the photo, make sure you have permission or the license to use it. Attribution is not enough to avoid copyright infringement.
If there is a recognizable person or private property in the image, you should obtain written permission to use their likeness or property on the website
Credit all images
All images uploaded to the site must have permissions to be used sitewide. The license can't be tied to a specific agency or organization.
If you are using any images that are labeled Shutterstock on social media, read our license and use agreement.

Image quality

Images should be well-lit and in focus
Photography should strive for authenticity
Only use photos that were shot in Massachusetts for any images that include recognizable scenery
Only use full-color images (i.e. no black-and-white, no sepia-tones)
Include credits with the image if it is being sourced (with permission)

Accessibility and search engine optimization (SEO)

You should optimize content for individuals who use screen readers or users on low-bandwidth connections that prevent images from loading.

Alternative text isn’t a caption. It replaces the image for users who don’t see it. Alternative text should provide the same information as the image, so be sure it clearly captures the message the image conveys. This increases the number of individuals who can access information and helps improve search engine optimization (SEO).

Using photos on social media accounts like Facebook, Twitter, and LinkedIn can make your agency stand out and help you engage followers.

The Shutterstock photos in the Mass.gov image library are available for use on all Commonwealth social media accounts. Shutterstock’s use instructions recommend sizing the image appropriately so it doesn't appear blurry.

Image Library

The Mass.gov image library on SmugMug has free, properly sized, and edited images content authors can use for various content types.

Requesting access

To get access to the image library you must:

Complete the image library access request form.
After completing the form, make a ServiceNow request letting us know you have completed the form.
Only use the images on mass.gov. They are not approved for printed materials.

Request an image to be added

If you can't find what you are looking for in the Mass.gov image library, you can ask to have an image downloaded from Shutterstock. We use this process to make any images downloaded by authors and editors available to all.

Step 1: Go to Shutterstock to find an image you'd like to use (you don't need an account to search for an image). Use the search bar and enter keywords that describe the type of image you want.

Step 2: Once you find an image, copy the Shutterstock ID#, located just below the image, to a Word or text document on your desktop or write it on a piece of paper.

Step 3: Submit a ServiceNow support request asking for the images you have chosen to be downloaded and added to the Mass.gov image library. Paste or type the the ID#(s) of the image(s) you would like to have downloaded into the request.

The Mass.gov team will download the image for you and place it in the image library. You will get a response via your ServiceNow request with a link to the image in the library and the name of the gallery where you may find it in the future.

Optimizing images

It is important to use the appropriate image format and filename when you save an image file to help preserve image quality, improve search engine optimization (SEO), and make it easy to find and organize files.

JPEGs vs PNGs

JPEGs are best used for saving standard photographic images. JPEGs do not offer transparency; for example, if you were to save the circular logo or seal as a JPEG, the image will have a “white box” around it.

PNGs are best used for custom graphics, illustrated images, and when you need a transparent background.

Choosing file names

Create short, descriptive file names that include keywords and the dimensions of the image. Including the size as well as an “-opt” tag or something similar will help you find different versions of an image that has already been optimized to use on different social channels or Mass.Gov webpages. Here is an example:

File Name: 2015-MA-Sales-Tax-Holiday-opt-1024x512.png

How to resize images

Adobe Photoshop is the standard program for creating and editing images. You can also try Adobe Express for free. (See directions for using Adobe Express.) If you cannot use either of these apps, use an online web app like ImageResizer or Pixlr to create files (Pixlr allows you 3 free "saves" per day). Here is how to open a new image file and adjust an image size in Pixlr:

Step 1: Open editor

Go to the Pixlr website

Step 2: Select your image

Choose "Create a new image" or "Open image from computer."

If you create a new image, enter the dimensions according to Mass.gov guidelines.

Step 3: Adjust image size

Select "Image" from the dropdown menu, then choose "Canvas size." Enter the new dimensions, and hit "OK" when done.

Note: Clicking "Image size" will stretch the image to a new aspect ratio.

Step 4: Save image

To save an image, select “File” from the dropdown menu, select “Save”, and enter the filename and format appropriate for the image. This will usually be a JPG. Select “My computer” or “Pixlr library” depending on where you want to save the file.

How to compress image files

Compressing images is essential for optimizing the web experience for end users, but also for improving data management for each agency on the Mass.gov CMS. Compressed files take up less space, enabling agencies to reduce data usage and save money on storage. And images will load quickly for users, using less data on mobile devices.

There are several ways to compress image files, but we suggest using the free Optimizilla online image compressor. You can compress and adjust up to 20 images at once, making it one of the most convenient tools available. Here is a step-by-step guide on compressing files with Optimizilla.

Step 1: Select Image

Drag and drop or select the "UPLOAD FILES" button

Step 2: Adjust compression settings

Click on an image thumbnail to adjust compression settings. JPGs are compressed by lowering quality settings, and PNGs are compressed by lowering color settings.

Step 3: Repeat process for each image

Repeat the process for each thumbnail and select "DOWNLOAD ALL" when finished.

Step 4: Save Image

Use the appropriate image format and filename when you save an image. This helps preserve image quality, improves search engine optimization (SEO), and makes it easy to find and organize files.

Adding images in rich-text fields

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 an Information 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 "Files 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.

Image size by content type

Organization page images

Banner image

Add the image you have chosen from the selection of Organization page images.

Size: If you want to add your own image, it should have an aspect ratio of 4:1 and be a minimum of 1600 x 400 pixels. Images using a different ratio will be cropped, and smaller images will be distorted. 256 MB limit

Allowed types: png, gif, jpg, jpeg

Banner image mobile

This is an optional mobile-optimized background image. If you don’t use this, the regular banner image will be automatically cropped on mobile devices.

Size: Minimum of 800 x 400 pixels. 256 MB limit.