Images

Image Title 120, optional

The Image Caption character maximum is 400, but optional. Selecting a heading level does not change the title's appearance. Choose images that afford "empty" space at the bottom so the image is not cut off. The caption overlay on a smartphone is substantial.

Try to use one image per page. Send images to WebOps. Our team will optimize the image and embed it into the webpage. We can make a large image smaller, but we cannot make a small image bigger.

Media Library Add Media button (wrong)

A common problem with left-aligned images is that orphan text may flow below the image, causing the end of the sentence to appear missing. See the difference between left- and right-aligned images with text. For this reason, use right-aligned images only.

Students study in Monninger Center.

This is a left-aligned inline-image. Sed pharetra porttitor varius. Morbi pretium, quam a tincidunt pharetra, leo felis commodo sapien, ut aliquam risus nisl sagittis tellus. In laoreet pharetra lorem vitae dictum. Vivamus vel ullamcorper lacus. Nunc pretium finibus ultrices. Maecenas nisl dolor, dignissim in dictum vitae, consequat et purus. Duis quis nisl condimentum, varius ligula et, aliquam metus.

A common problem with left-aligned images is that orphan text may flow below the image, causing the end of the sentence to appear missing.

Media Library Add Media button (correct)

Students study in Monninger Center.

This is a left-aligned inline image. A common problem with left-aligned images is that orphan text may flow below the image, causing the end of the sentence to appear missing.

Text descriptions

Caption. An image that adds to the content will usually need a caption that explains why the image is there at all. If the image of the mansion were on a page about the Office of the President, the caption might read: The Office of the President is located on the first floor along the Great Hall. 

Alt text. The alt text describes the image, supplying no more information than what is available to the sighted viewer. Appropriate alt text might be: The front of the mansion. It is not appropriate to add non-visual information like: The mansion’s western wall. Alt text is only read verbally by screen readers, or visually by people with images disabled. The text should not repeat the caption.

Never overlay text into the image. The WCAG specification states:

1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

  • Customizable: The image of text can be visually customized to the user’s requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

Complex descriptions for complex images. If the image is complex (a diagram or chart), the webpage itself needs to contain text explaining the image.

Image quality

Contrast and color in images. Low-contrast images may be impossible for some visitors to understand. Other visitors may have color blindness, and not be able to distinguish between red and green, for example.

Photos of artwork and student projects

The inclusion of images of student work is under discussion in light of new international, national, and state laws, as well as the University WISP policy.

A photo of artwork may require the permission of the artist of the work as well as the photographer. If a human is in the image, a model release may be required.

www.fdu.edu

On the website, we need to dramatically reduce the number of student works displayed, and use each of your examples as the introduction to marketing points you want to make in the text (e.g. about your teaching approaches, about classroom technology, about alumni outcomes). Words are important for SEO.

Social media

To display a larger number of photos, leverage social networking options in such a way that what needs to appear on the FDU website page is just a link to an offsite gallery, whether the offsite gallery is a Flickr set; an Instagram, Facebook, or Youtube account. That approach also eliminates the middleman and lets the content creator post content directly.

There is no template in the new website for a gallery of student work. Social media is the preferred alternative. See the collection for film student work at YouTube as an example from the film studies home page. See the link to the channel in the blue button “Go to FDU film projects…”

You can use one or more services: Facebook, Instagram, whatever. (Parents use Facebook and will share; students tend to use Instagram.) When you use social media, more people will see it. Make sure you include a link back to your degree or department web page. Make sure you include text that describes the assignment, so visitors can understand what they will learn. The post needs to promote graphic arts at FDU, not the student.

For help, contact Dina Schipper and Sydnie Fatt. They can give you direction on how to set this up. Once done, WebOps can insert a link, a blue button, or a Call to Action component (the baseball card-sized photo with a text link) into your web page.

Uncropped
image as it appears before cropping
Image before cropping
Cropped
Image after cropping