8. Images

Make your image web-ready

Before you upload an image to your website make sure the image is “web-ready.”

Preparing an image for the web involves optimizing it for fast loading without sacrificing too much quality.

• Resize the image dimensions to no larger than 1920×1080 pixels.
• Save at a reduced file size without compromising too much quality. Depending on your photo editor, that might mean
  • low to medium quality
  • 40 to 60% quality.
  • “4” or less in Photoshop.
• The final photo should be less than 400 kb whenever possible.

Special cases: hero and people images

Hero images

Hero images are the large background images that are in the top-most title section of a page, just below the header. The optimal size for a large hero is 1920×684 pixels. Consider images where the subject appears on the right so the text on the left doesn’t interfere.

Images of people

Typically images of people should be square to fit best in most people-related blocks, like UDS Profile (Manual) or testimonial blocks.

You can use photo editing tools such as Canva to edit the image and make it web-ready.

Upload directly to the media library

1. Once logged in, click Media on the left-hand side of the dashboard, then click Media Library.

2. Once you are in the Media Library, click the Add New button at the top of the page.

3. You can either drag and drop the image files you want to upload into the designated area or click the Select Files button to browse your computer and select the image files you want to upload.

4. Once selected, the images will begin uploading automatically.

5. After the image has finished uploading, you can add additional details such as title, caption, alt text, description, and more by clicking on the uploaded image in the Media Library.

Note: Always be sure to add alt text! The alt text is required for accessibility purposes as it describes the content of the image for users who are visually impaired or when the image fails to load. Alt text is required on all image properties on higher ed websites per federal law.

In the page itself in a block

You can add an image in the page by adding it as a block.

1. Inside the editor, click the + button (“Add block”) in the top-left corner or within the editor area.

2. In the search bar, type “Image” and select the Image block from the options. The Image block will appear in your content area, ready for an image upload.

3. Once the Image block is in place, you can add an image in three different ways:

a. Upload from Your Computer:

• Click the Upload button.
• Browse your computer for the image file you want to use and click Open.

b. Select from the Media Library:

• Click the Media Library button.
• Choose an image you previously uploaded to your WordPress site.
• Click Select to insert the image into the block.

c. Insert from a URL:

• Click the Insert from URL option.
• Paste the direct URL of the image and press Enter.

After the image has been added, you can customize the image block using Top toolbar and Block editor panel. Make sure to add the alt text.