Drupal: Add an Image
Images must not contain text, unless the text is short enough that it can also fit into the alt text field for the image. If an image does contain fewer than 150 characters of text, then all of the text must be added into the alt text field for the image. All images must have a text description in the alt text field.
Reason: Text included in an image cannot be directly read by search engines or by the screen readers used by visually-impaired visitors. Failing to provide readable text for all visitors is a violation of state and federal web accessibility requirements.
Source: Fredonia Web Standards: https://www.fredonia.edu/web-standards
Do not copy and paste images into a web page. Please follow the steps provided below to upload each image to your website folder, then add it to the web page.
All images added to the website should be JPG, PNG, or WEBP. Please do not upload HEIC images (the image format commonly used by Apple iPhones). Please use an image converter like https://cloudconvert.com/heic-to-jpg before uploading images.
Step-by-step guide
Name the image file according to the Naming Conventions.
In the editor, first select a space to insert your image.
In the toolbar, click the Image button:
You may either browse the server, or paste a web link to get your picture.
To choose an image on the server or to upload a new image from your computer to the web page you are editing, click the magnifiying glass icon on the right to Open File Browser.The File Manager window appears. Be sure that your department folder is selected in the left folder list. If the image you want to add to the web page is already uploaded to your files list, just double-click it to select it, or click Select.
To upload a new image, click Upload in the upper left of the File Manager, then click + Add file.
Select the files you want to upload from your computer and click Select or Choose (depending on your OS). The file names will appear in the Upload file window.
Double-click on the file name to choose it, as shown in Step 5.
Required for ALL images: Add Alternative Text (alt text field)
Click on the Add Missing Alternative Text message at the bottom of the image or click on the Eye icon in the image editing toolbar, above the image.
Purpose: Alternative text is required to ensure that all images are accessible to all website visitors.
Add the Alternative Text in the field that appears above the image, using text to describe the image which is accuracte, descriptive and brief.
Click the Checkmark to save the Alternative Text.
Optional Steps: Adjust Image Size and Add Caption
Edit the image placement as needed, (size, alignment, etc.) by dragging the blue handles on each corner.
To add image caption text underneath the image, click this icon to Toggle Caption:
The Caption field will appear under the image where you can type in your caption text.
Save and Publish