Adding images to your posts is a great way to speak visually. In addition, a thumbnail image will then show up next to the post summary…a nice touch! The below primarily applies to single images (vs. slideshows of images) added to a post; for multiple images, see the Royal Slider page, or if you’d like to display a slider, see the Flickr help page.
1. Consider copyright and attribution
First, consider image copyright: you should know that if you are using random images pulled from a Google search there is a chance that they are someone else’s property. Be aware that the penalties for using copyrighted images can be severe. Even if you did it innocently, gave credit, or had a disclaimer this does not release you from liability. We recommend that you use your own pictures when possible or use pictures that are public domain (and if you do the latter, add an attribution of the source in the caption). You can find images that are public domain by searching with Creative Commons-licensed pics or Wikimedia Commons. You can also do a normal Google image search and under Search Tools select the appropriate Usage Right.
2. Make images web-ready
Once you have an appropriate image, you’ll need to make sure it’s web-ready, including format and size:
- Format. If the image is complex like a photo, then save it in .jpg format. If the image is something simple like a graph, chart, or line drawing, then save it in .png format.
- Size. Some images are far bigger than they need to be; this will waste space and make it hard to view/download them. On this site, a landscape-oriented image should ideally be greater than 1024 pixels wide but no more than 2000 pixels wide, unless you need to display additional detail (see how to do this below). Below is help on optimizing image size; feel free to skip if you know how to do this already.
- Finding dimensions. On a Mac: right click the image and go to Get Info > Dimensions. On a PC: right click the image and go to Properties > Details > Image Dimensions.
- Editing pixel dimensions. Once you’ve found your image’s pixel dimensions, you may need to edit the image. If you don’t have heavy-duty image editing software at your disposal like InDesign or Photoshop, there are some simple ways to edit images available on any computer. Try this: On a Mac, open the image in Preview and go to Tools > Adjust Size. Set the width/height to Pixels (not percentage) and input desired width (1024 < width ≤ 2000). Check Scale Proportionally and Resample Image. Don’t forget to Save the image. On a PC, open the image in Paint and click Resize in the top toolbar. Select By: Pixels (not percentage) and input the Horizontal Dimension (1024 < width ≤ 2000). Don’t forget to Save the image.
3. Display images on your post
You can display images in two ways:
- Featured image. A nice way to summarize your post in one image is to add it as a featured image, which shows up as a banner above the post (and a thumbnail next to the post summary). Go to the Featured Image box at the far bottom right of the edit post window and follow the instructions. (Note: some themes support Display Featured Image for Genesis, which shows big backstretch images if sufficient size!)
- In body of post. You can also display one or more images in the body of your post. Click Add Media and either upload an image from your computer or choose one from the media library. To edit how the picture looks in your post, click on it and then click the marker in the upper left corner.
The annotated graphic to the upper right shows how to edit your image.
- Caption: The caption will display below the picture aligned in the center. This is the perfect place to put an attribution for a borrowed image.
- Alignment: Setting the image alignment to the left or right allows text to wrap around the image. Center alignment displays the image in the center of the post without text on either side of the image.
- Size: The size setting dictates how small or large the image will display within your post. It is recommended that you display your image at a smaller size within your post (e.g. medium size), and link to the image in full size (see step 4).
- Link: When set to Media File, the image in your post will be linked to a full-size version when the image is clicked. See step 5 for how this full-size image will display.
- New tab setting: If you would like the full-size version of the image to open in a new tab, check the box that says, “Open link in a new window/tab.” If this box is left unchecked, the image will open in the current tab.
In addition to what’s found on this graphic, there is now an “Alt Text” field that enables screen readers (accessibility applications which read text to users unable to see the content themselves) to describe images to the listener. If an image is important to understanding your text, please enter a brief description for this purpose. Otherwise, check the “Decorative” box, which will instruct screen readers to ignore the image.
Any time you upload an image on your WordPress site it is stored in your media library. You can manage your pictures under Media on your Dashboard. If your Media Library gets messy, we recommend the Media Library Assistant plugin.
These are the most common ways that you will use images on your site and group sites. Again, please remember to avoid images with copyright!