Skip to main content.

Important

Before uploading pictures for news or feature stories, please read the guidelines on "Sizing your image" to ensure proper formatting for best results of your photos.

Image files

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.

We developed image variants in the media library that will resize and compress the image for you. Image variants work best with jpg's and don't work well with png or gif.

'Follow these simple rules to avoid unexpected results (eg. having your image not appear on the page like it should). When naming your file, remember to:

  • remove special characters !@#$%^&*()+=;:'"?/<>,.
  • turn spaces into hyphens*

*ok: umass-dartmouth-final-9-2-20-1.jpg
no: UMass Dartmouth Final (9.2.20)-1.pdf

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).

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 the 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.

Example of an image with text-as-image

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.

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 and sloppy and have poor or 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.

 

mage-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.

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 preview 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

Sizing your Images

Directory

This largely effects older content -- likely older profile images. Make sure images have a minimum size of 200px wide and 200px height in order to be shared on Facebook. They do, as of this post (3/25/2020), work on Twitter.  Anything smaller than this minimum size will not be shared, and Facebook will then search for another image to go in its place.

2 examples:
https://www.umassd.edu/directory/jho/
Error: Provided og:image URL, 
https://www.umassd.edu/media/umassdartmouth/profiles/umass-law/jeremiah_ho.jpg 
was not valid because it did not meet the minimum size constraint of 200px by 200px.

https://www.umassd.edu/directory/maltabet/
Error: Provided og:image URL,
https://www.umassd.edu/media/umassdartmouth/profiles/smast/Mark.Altabet.jpeg 
was not valid because it did not meet the minimum size constraint of 200px by 200px.

News story images

Ideal size for an in-story image is 850x480

Aspect Ratio of 1.77

This will maximize the designated image area in a story.
1700x960 is double the size while maintaining aspect ratio for example - would also fill the space the same way.

2-column page (news, features)

Illustrates the responsive image box size on various devices: Desktop, laptop, tablet, phone.

Desktop/laptop
While the image is sized to 850 x 566 px - it will not fill the box on large screens.
Image container size on a 2-column page on large screens - 847.5 x 500

Laptop/tablet
Same image and article on a tablet
616.66 x 410.81

Phone
Same image on phone
381 x 253.69

3-column page

Illustrates the responsive image box size on various devices: Desktop, laptop, tablet, phone.

Desktop/laptop

Laptop/tablet

Phone

Portrait orientation crop

 

**IMPORTANT! Do not use vertical/portrait orientation photos in the primary in-story image. While the page will look fine, portraits will result in unattractive cropping when the primary images are leveraged in prominent locations on umassd.edu. You can use portrait images in secondary image spots in articles.

This is an example of the homepage features carousel displaying the portrait images - this module is designed to take your primary image and fill the box size. The images are being cut off as a result of the vertical orientation of the uploaded photos. To keep this from occuring, please only upload images with a horizontal/landscape orientation or a 4:3 ratio in this primary image spot.

If you would still like to upload a vertical image, you can do so in the second spot for the thumbnail image.

bg

Visit us virtually

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