Images

This page describes for web editors in the School of Pharmacy how to upload images in a website built by the Office of Communications.

On this page

Before uploading

Don’t use an image unless an image is required

  • Is your image relevant and meaningful to the adjacent text? If not, don’t use it.

  • Does your image communicate something that could not be communicated in any other simpler way? If not, don’t use it.

  • Does your image consist of primarily or only text? If yes, don’t use it—use text instead.

More info: The Department of Useless Images.

Choose only images that meet our photography standards

Thoughtfully crafted guidance on photography is available from our photography guide and from UCSF University Relations at Photography Standards. You can also request photography guidance from the Office of Communications via Website and Communications Support.

Choose only images that you created or that you have written license or permission to use

You are required by University policy and federal law to respect the copyright of others.

Some image libraries available to you include:

Obtain written permission from all persons depicted in the image

You are required by University policy to obtain written consent for all identifiable persons in images you use to communicate.

Details: See the Consent Forms item in the Policy section of Brand Photography Library.

For PharmD students, the Office of Student Affairs gathers these permissions en masse during Orientation, and this office keeps track of which students have not consented to the use of their image or voice.

Choose the largest image size available to you

For best results, use the largest image size available—up to 4,000 pixels wide. Headshots are ideally at least 1,000 × 1,000 pixels.

Required: create alternative text for screen reader users

You are required by University policy and state and federal law to make images accessible to persons with disabilities.

In most cases you meet this requirement by including a brief description of the image at the time of upload. We call this brief description alternative text, or alt text for short. Some tips:

Do

  • Keep it concise. If you need to say a lot, specify brief alt text and put the rest in the caption.

  • Ask yourself what is important in the image that someone who cannot see must know.

  • When identifying persons, such as in headshots, use the person’s last name only—no first names, no middle names, no degrees or certificates.
Do not

  • Do not include “picture” or “photo” or “image” or “drawing” anywhere your alt text. Specify only the brief description.

  • For logos, do not include “logo” or “logo of.” Just specify the name of the entity represented by the logo. If this is the first or only occurrence of the name of the entity on the page, spell it out instead of using an acronym or initialism.

  • Do not leave an alt text blank. It’s rare for an alt text to be correctly left blank. Not sure? Include brief alt text.

  • Do not use the same text for alt text as the caption; that forces screen reader users to hear the same thing twice. Instead, keep the alt text as brief as possible and put more detail in the caption.

Having trouble writing your alt text? Contact us at Website and Communications Support.

When you have an animated GIF

Animated GIFs that animate longer than five seconds or that blink or flash must use the following markup which enables visitors sensitive to animation to pause it. In addition to your animated GIF, you must also provide a static GIF sized identically.

  1. Keep your filesizes and frame counts as small as possible. People typically spend less than eight seconds on any web page.
  2. Enter source code mode by selecting the Source button.
  3. Paste the following markup in the source code where you want your animated GIF:

    <div class="set-of-static-and-animated-images">
    <div class="static-image">static image goes here</div>

    <details open=""><summary aria-label="static image" role="button"></summary>

    <div class="animated-image">animated image goes here</div>
    </details>
    </div>

  4. Exit source code mode by selecting the Source button.
  5. Add your static and animated GIFs in the specified locations, choosing Original in Local Options > Display As. (The animated GIF will not animate unless Original is selected.)
  6. Delete the placeholder text.
  7. Save the draft. If the animated GIF does not display as expected with a pause button in the top right corner, let us know at Website and Communications Support and we’ll help you resolve it. If it displays as expected, publish your page when ready.
  8. If you later need to edit, replace, or delete your animated GIF images, you can do so in the normal ways described elsewhere on this page.

Upload an image

Step 1: Specify the file to upload

  1. Edit the page to which you want to add an image.

  2. Place your cursor on a new line where you want the image.

  3. paragraph format menu showing normal selected.

    Paragraph Format menu

    Use the Paragraph Format menu to set the paragraph format to Normal.

  4. button.

    Add Media button

    Select the Add Media button. A dialog appears asking you to upload a new file.

  5. Find and select the image on your device. The filename then appears in the upload field.

  6. Select the Next button. The image is uploaded, and a new form appears requesting some details about the image.

Step 2: Specify the crop and other data about the image

  1. Leave the Name field unchanged.

  2. In the Manual Crop field, if the image can benefit from being cropped:

    1. Select Custom Crop for a non-square crop.

    2. Select Square Crop for a square crop.

    3. In either case, follow the on-screen instructions to crop the image.

  3. In the Alt text field, specify a brief description that helps screen reader users understand the meaning of the image in this context. See Required: create alternative text for screen reader users.

  4. Optional or required as described below: add one or more image credits:

    A Credit field enables you to specify who created the image or who owns the license to the image.

    • Image credits are required only for professional photographers or owners of licensed images who require that we credit their work.

    • If needed, you can specify more than one image credit, e.g., for a diptych or triptych.

    • You can optionally specify a URL for each image credit.

    • Image credits should be as concise as possible. If you have a lot of image credits or if an image credit is complicated, place it at the end of the page or section rather than in the Credit field.

    • Example 1: Someone provides their own headshot. Leave the image credit blank unless a professional photographer took the photo and requires a credit notice.

    • Example 2: A faculty or staff member took the photo in the course of their work. The image is technically owned by UC Regents, but it’s fine to specify the photographer’s name and link to their profile on pharmacy.ucsf.edu to acknowledge their work.

    • Example 3: A student took the photo and is letting us use it. The image is owned by the student, and if they want credit it’s fine to specify the photographer’s name to acknowledge their work.

    Add one or more image credits:

    1. Begin typing the person’s or entity’s name in the Credit field. If the person or entity was previously credited for a different image, an autocomplete list appears.

    2. If an autocomplete list appears, select the correct credit from the list.

    3. If an autocomplete list does not appear, complete the person’s or entity’s name as it should appear. Do not include “Courtesy of” or “Provided by” or similar.

    4. If you need to add a URL for this image credit, we’ll handle that in Step 4: Review.

    5. If you are specifying more than one image credit, type a comma and space, then return to (a) above.

  5. Optional: add an image caption:

    An Image caption section enables you to include a caption for the image that will appear below the image.

    • For accessibility reasons, captions must describe the image or be directly relevant to the image.

    • For images including people, specify each person’s first and last names and their degrees. Include School of Pharmacy graduation year only if directly relevant.

    • If the image includes more than one person…

      • …and is linear, begin with “Left to right:”

      • …and is non-linear, begin with ”Clockwise from top:”

      • …and is linear with multiple rows, begin with “Top to bottom, left to right:”

  6. Select the Save button.

  7. A thumbnail of the image appears with an Edit file / crop link and some local options.

Step 3: Select size and wrapping options

  1. In the Local Options section:

    1. Choose a relative size for the image in the Display as picklist.

      1. If you specified a square crop earlier, choose a size that is preceded by “Square.”

      2. If you uploaded an animated GIF, select Original.

    2. Choose whether text will wrap around the image in the Wrapping picklist.

      1. Left image means the image appears on the left and text wraps around it to the right.

      2. Right image means the image appears on the right and text wraps around it to the left.

      3. None means the image will appear on its own line with no text wrapping.

  2. Select the Submit button. A thumbnail representing the image should now appear in the location you specified. The image does not appear in its intended size and wrapping until you save the page as draft.

Step 4: Review

  1. Save the page as draft by selecting the Save button at the bottom of the page. The page reloads without the editing interface.

  2. Review your image insertion. View the draft page at different browser widths to confirm that the image appears as expected for mobile devices as well as laptop and desktop computers.

  3. Optional: If you added one or more new image credits in Step 2 and you need to add one or more URLs for them, this is covered in Change the properties of an existing image.

  4. Contact us at Website and Communications Support if these steps did not give you your desired result.

Change the properties of an existing image

  1. Edit the page containing the image.

  2. Select the image you want to edit. Handles appear on the edges of image to indicate it is selected.

  3. Select the Add Media button. A Media Browser dialog appears, displaying an Edit file / crop link and some local options.

  4. Select the Edit file / crop link. A new tab opens in your browser enabling you to change the crop and other data about the image.

  5. To add, change, or remove a url for an image credit:

    1. In the Credit section, select the Referenced item link. One or more links appear matching what’s specified in the Credit field.

    2. Select a referenced item link for which you need to add, change, or remove a URL. A new tab or window appears with the Image credit name and Image credit link fields.

    3. Add, change, or remove the Image credit link field.

    4. Select Save. A confirmation message should appear: Updated term.

    5. Close the tab or window. The Edit image page appears.

  6. Select the Save button when done making changes. The page reloads showing the image title and the image without the editing interface.

  7. Close the current browser tab and return to the previous tab displaying the Media Browser dialog.

  8. Make any changes you want to the local options, then select the Submit button. The Media Browser dialog closes, revealing the page being edited.

  9. Select the Save button at the bottom of the page. The page reloads without the editing interface.

  10. Review your changes, and contact us at Website and Communications Support if these steps did not give you your desired result.​

Replace an image

  1. Manually record the properties of the image you want to replace.

  2. Delete the image.

  3. Upload your new image.

  4. Set the properties of the image.

When you have many images

When you have a large set of images grouped together—usually three or more—wrap the set of images in a div with class laundry-line and set them to wrap either all left or all right. This ensures that the images are sized and wrapped properly for mobile devices. For help with this, contact us at Website and Communications Support. Examples:

If you have a site on pharm.ucsf.edu, you can also include sets of images using a Gallery or Slideshow.

Allowed file types

Filename extension

Description

gif

Graphics Interchange Format

jpeg, jpg

JPEG

svg

Scalable Vector Graphics

webp

WebP

Do not use PNG files

We no longer permit png files because jpg is much more efficient in filesize. Convert any png files to jpg before uploading, for example, using Squoosh (where in the Compress settings you would choose Browser JPEG).

Examples

Many examples of using images appear throughout our websites. Simply browse or let us know what example you seek at Website and Communications Support.