Adding Images

Quick start

We’ll start simply, by adding an accent image to a page’s content.

Let’s say you’re kicking off a capital campaign and want to add your logo to the right of the first paragraph.

1. Put your cursor at the very beginning of the first paragraph.
2. Click the Add Media button:
   
3. If you’ve already uploaded a logo you can select it from the Media Library tab:
   
4. Otherwise, you can upload a new image with the Upload Files tab. Either click Select Files and find the logo on your computer, or drag the logo right onto the Insert Media page:
   
5. On the right you’ll be asked for some attachment details. We’ll learn more about these below, but for the moment fill in:
   • Title: a descriptive title for your reference later
   • Alt Text: a description of what’s in the image to help sight-impaired visitors and search engines
   • Alignment: choose Right since we want it to float to the right of the text.
   • Link To: none, since we don’t want this image to be a clickable link
   • Then click Insert into Page.
6. All done! Just click Update or Publish to finalize the change:
   
7. If you’d like to change something about the image—say, its size or alignment—click the image and an editing panel will pop up:
   

Big images cause big misery

Please don’t take a photo and just upload it to your site at full size and quality.

Seriously. Pretty please.

The typical digital photo is good enough to print an 8″ x 10″ or larger image at very high quality. That’s amazing for a paper world, but not for the web, because:

• If a page includes a few of these you’ll annoy visitors who wait for them to load, especially people on slower connections.
• Too many of these large images can annoy your web host—even if they offer “unlimited storage”—leading to costs or service problems.
• Too many of these can prevent your site from being backed up.

The problem is that digital photos are:

1. way higher in detail/quality than the human eye can appreciate on a webpage
2. way, way, way larger in size than nearly any webpage needs

Simple rules of thumb can make an enormous difference in the size of your files and the speed of initially loading your pages. Sometimes you really do need a large, high-quality image, but usually:

• Reduce the image to a size at or near the size it will appear on the site.
• For photos, people generally can’t tell if you reduce the detail/quality from 100% down to 80%.
• If an image is over 1000 pixels wide, it’s probably too wide.
• If an image is over 500 kilobytes, the size and/or quality are probably too high.

You can reduce the size and quality of images using software and websites like:

• Adobe Photoshop (commercial software, but darned cheap for nonprofits at TechSoup)
• GIMP (free software)
• Optimizilla (free website)
• Compressor.io (free website)

Adding featured images

Some WordPress content types support a featured image—a single image that strongly illustrates or identifies the content item. For example:

• A News Post might have a single, identifying image associated with it, which might show in news listings next to the title.
• A Supporter record might have an image of the person who supports your organization.

Adding a featured image is just like adding an ordinary image, except that you’re not inserting the image into a specific place within the content. Instead, you’re associating the image with your post/page as a whole. From that point, how and whether it appears will depend on the design of your WordPress theme.

If a content type supports featured images, you can add one in the right hand column of the editor page. Scroll down the page, down below the Publish box, and eventually you’ll see a Featured Image box:

Once you click Set featured image you’ll be taken to the Media Library, where you can either select a photo that’s already been added to the site or upload a new one:

Once you’ve selected or uploaded your featured image, fill in the details as needed and then click Set featured image to make it take effect:

Then once your image is set, click Update or Publish to save your changes.

Entering image information

When you upload an image you’ll have the opportunity to provide some of the following pieces of information on the Attachment Details panel:

Not every way of adding an image will ask for all of these pieces of information. Following are some of the fields and their use.

At a bare minimum you should give every image a Title and Alt Text.

Metadata about the image

• URL. You can’t edit this field, but it’s a good place to get a direct link to the image.
• Title. This is just for your reference.
• Caption. Text to show below the image. WordPress and your theme won’t show this caption in every context.
• Alt Text. Very important! This text tells the visually impaired what is in the image, and also tells search engines what the image is about.
• Description. A more detailed description if you’d like. Primarily for your use, though visitors will see it if they happen across the image’s attachment page. (They probably won’t.)
• Alignment. Depending on the theme, Left and Right will usually try to “float” the image to the left or right of the text, where Center and None will make the image take its own line.
• Link To. You can say here whether the image should be a clickable link and, if so, where the link should take visitors.
• Size. How large you’d like the image to display. As with captions, WordPress and your theme won’t respect this sizing request in every context.

The Media Library

In the main Administrator menu on the left you’ll see an option titled Media. This is the media library, where you can keep track of all images, PDFs, videos, and other documents on the site:

It’s possible to upload your images and documents to the media library first, and then later attach them to posts and pages. But since you can also upload media while editing a page, that’s usually easiest.

Either way, the Media Library is a good place to view, search, edit, and delete all of the media items you’ve uploaded to the site.

If you do want to upload media into the library directly rather than adding it through a post, just click Add New. WordPress lets you upload files either by finding them with your computer’s standard file selection window, or simply by dragging and dropping the media onto the Media Library page: