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). See the Assistive Technology Group's wiki for more detailed information on creating alt tags for different types of images.

Using images on social media

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

Complete the image library access request form if you want to use this resource.

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. 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.
Shutterstock image example
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. If you don’t have Photoshop, use an online web app like Pixlr to create files. 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

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
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.
Allowed types: png, gif, jpg, jpeg.

Mosaic images

The highlight image is a portrait-oriented image on the left side of the mosaic.
Size: Exactly 300 x 500 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.
Non-highlight images are the 4 images that make up the grid on the right in the mosaic.
Size: Exactly 400 x 300 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Binder banner image

Size: Minimum 600 x 450 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Guide image

Use a horizontal image that relates to the overarching theme of the Guide.
Size: The image should be a minimum of 1600 x 400 pixels. A white crosshair shows the focal point of the image that should remain in view as the image scales for different browser sizes. Click on any part of the image to change the focal point. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Location image

A horizontal image of the location described on the page.
Size: At least 800 x 400 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Service image

This is an image for the banner area.
Size: Minimum of 1600 x 400 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.
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.
Allowed types: png, gif, jpg, jpeg.

Event Image

You can add a logo if the event has dedicated branding. This is not an appropriate location for the state seal. Logos should have a white or transparent background.
Size: Minimum of 230 pixels wide. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Event Image

This is optional. You can upload an image that relates to the overarching theme of the event.
Size: At least 600 pixels wide. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

News Image

This featured image is optional. A landscape orientation will work better than a portrait orientation.
Size: Maximum 2000 x 2000 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Decision Tree Image

Size: 1600 x 120 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.
Size: Minimum of 800 x 400 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Promo Page Images

Key Message Image

This is the main banner image. This will crop and resize liberally based on the size of the user’s browser window. The text in the Key Message Section will also partially obscure the image. Choose a high quality, decorative image that does not need text explanation. No alt text is provided for visitors using a screenreader. If there is any text in the image, it should be repeated within the Key Message row. Size: Recommended 1920 x 1080 pixels. 256MB limit.
Allowed types: png, gif, jpg, jpeg.

Key Message section

Text will appear on top of this image. This image will crop and resize liberally based on the size of the user’s browser window. You will select an overlay color to provide adequate contrast for the text.
Follow these guidelines to ensure high contrast and readability for text over images because users with vision deficiencies often have difficulty reading text that does not clearly stand out against the background.
    1.
    Select an overlay color that will provide adequate contrast. For dark images, choose a light overlay. For bright images, consider a dark overlay.
    2.
    Select high quality images to enhance quality with the overlay.
    3.
    Avoid images with too much noise or distracting patterns and textures.
    4.
    Test your pages and ensure that the text is clearly readable and legible.
    5.
    Choose a decorative image that does not need text explanation. This is a background image and no alt text is provided for visitors using a screenreader. If there is any text in the image, the text should be repeated in the content of the key message row.
Size: Recommended 1920 x 1080 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.

Feature images

The image should be decorative and not convey information that is not also conveyed in the title or description of the Featured item. No alt text is provided for visitors using a screenreader.
Size: 768 x 576 pixels. 256 MB limit.
Allowed types: png, gif, jpg, jpeg.
Last modified 2mo ago