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.
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.
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 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.
In this case, the text-as-image is repeated on the page several times over as readable HTML text.
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.
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 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
Not following these simple rules can yield 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
News Story Images
Ideal size for an in-story image is 850x480
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.5x500)
(Laptop/tablet Same image and article on a tablet 616.66x410.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)
**IMPORTANT! Do not use vertical/portrait orientation photos in the primary in-story image. While the page will look fine, portraits will result in unintended display 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.
If you require assistance with processing/cropping photos, please reach out to Justin Maucione or Mary Avery .
Directory Profile Image
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.