Skip to main content.

Image files

Preparing image for upload

Photos should always be jpg. Photos should never be png or gif. The compression method for png and gif can add unnecessary bloat to the image size and display the image poorly. Graphics can be .png or .gif for best results.

If you're a Photoshop user, take your image and Save for Web @ jpg 60. If you do your compression in Photoshop, no need to run media library variants.

If you aren't familiar with Photoshop, we developed image variants in the media library that will compress the image for you. Image variants don't work well with png's.

The description in media library will be the alt tag

Content entered into the description field in the media library (left) will translate into alt text (right).

Description field = alt tags

Remember to fill-out the Description field in the Media Library. The Description field in the media library is used to generate alt tags. Do not repeat the filename in that field. 

Each image should have an alt text, not just for SEO purposes but also because blind and visually impaired people won’t otherwise know what the image is about -- yoast.com

PDFs

PDFs aren't <img>'s, so they don't have alt tags and don't utilize the Description field from Media Library. In cases of PDFs, the description field can be used for internal purposes like: "Updated 2019". In cases of PDFs, this information will not be visible to the end-user.

Avoid text-as-image

Avoid text-as-image as it is not accessible [https://www.w3.org/WAI/tutorials/images/textual/]. It tends to make pages look busy/sloppy and have poor/unintended share results. Photos, especially as the lead image produce the best results. Photos/graphics are fine as long as they don't rely on text-as-image to convey information.

Example of an image with text-as-image

In this case, the text-as-image is repeated on the page several times over as readable HTML text. 

Events and Flyers

Do not display the event text as image. If it is a flyer for the event consider displaying it as a secondary image further down the article. Lead off the article with a photo.

image-as-text on a facebook share card

Facebook share card can crop images in ways you may not intend. An example of image-as-text, as would be posted on Facebook.

Images and social media

Share cards are generated by social media sites scanning our page when someone hits a share button. In cases of press-releases, news, features, etc., the share is looking for the first image used on the page. On standard pages, specific elements from specific content types are pulled to create the share image like the Image element in Main Content content type. In some content types we may have a spot to assign an image specifically for sharing.

Resources

A few resources to help you see what the share card will look like. These are listed on the t4 welcome screen.

  • Facebook Sharing Debugger
    Use this to scrape your story BEFORE you post to social to ensure your image displays properly on facebook feeds. This is currently recommended for press releases, news stories, and feature stories. You will need to login to a facebook account to use this feature.
  • Twitter Card Validator
    You can paste in your URL to see how twitter would display it. You will need to login to a twitter account to use this feature.
  • LinkedIn Post Inspector
    Paste in a URL to see what your shared content will look like.
  • UMassD Social Media Guide
bg

Visit us virtually

Visit us from anywhere, at any time.
Take a virtual tour of the UMass Dartmouth campus.