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