Using Images with WordPress

You can find lots of copyright-free images via the Library of Congress.

You can find lots of copyright-free images via the Library of Congress’s online collection, which is where I found this cool ship.

I realized the other day that I’ve been a contributor and the editor for this blog for over a year now, and I’ve learned a lot about writing for the Web in that time. Since I know that many faculty who end up having students do blogging assignments haven’t blogged regularly themselves, I thought I’d put together some of the things I’ve learned in my time blogging for this site.  This post is about how to think through using images in WordPress sites and blogs.

Why Include Images?

Including images in Web content is important, and one of the things that writing for the Web can offer that’s different from having a student write a traditional paper. Teaching students just how to include images helps students think about the layout and format of Web content as a whole, also, instead of just a transplanted paper. If you’re using blog posts as an assignment, taking advantage of the kind of formatting and content that the Web allows is key.

So you know that you’d want students to include images in their Web-based assignment.  Is that enough? Not really — plonking an image into a post without thinking about how it fits with the rest of the content as a whole isn’t the best way to approach including images. Thinking about issues of copyright, how to optimally size and position images with WordPress is critical to using images as part of online content.

First Things First: Finding an Image

Finding an image can sometimes be difficult, but thinking through how a post’s “content” is about text, images, as well as formatting can go a long way towards helping to find an appropriate image.  If a student’s blog post, for example, is about analyzing an image, that makes it much easier for the student to identify what kind of image to use.

Having a discussion about copyright and Web publishing etiquette is important to teach to students.  We think of avoiding plagiarism in a traditional essay assignment as very important to impart to students, but sometimes don’t necessarily think about that with images. It shouldn’t be okay for students to just do a Google image search and use whatever they find in their posts.

So — how to avoid that?  Having students take their own pictures is the surest way to avoid copyright infringement, but it isn’t always feasible. Another option is to have them use Creative Commons licensed images, as long as they are cited the properly, according to how the image’s owner has licensed their work. The Creative Commons website has links to help you search different sites for CC licensed images.

Sizing an Image

Making sure that an image is the proper size and resolution is important for having a published post or Web content look good.  But how big should an image be?  It depends — where are you putting the image? Is it at the top of the post to catch a reader’s eye? Is it in the middle of the post, meant to illustrate or demonstrate something? Is it supposed to be the featured image for the post? And what WordPress theme are you using?

This is what an image optimally sized for our blog's theme looks like.

This is what an image optimally sized for our blog’s theme looks like.

Obviously, it depends on a number of factors.  One person using a particular WordPress theme might have one set of default image sizes that look best with that theme while another person using a different theme would want to use different image dimensions.  For example, for the WordPress theme that our Academic Technology Blog uses, images with the dimensions 940 x 230 look good up at the top of the posts.  That size takes up the width of the text portion of the blog post and looks nice.

See this webpage on the WordPress Codex to read more about image size and quality on WordPress sites.

Positioning an Image

Here's a post with an image aligned to the right of the text.

Here’s a post with an image aligned to the right of the text.

Although size and dimensions of an image are important, so is positioning the image within the page of the post.  WordPress allows you to put images with text wrapping around them, and it gives you three choices for wrapping the text: right, left, and center.  I like to position my images to the right, in order to not interrupt the left-hand margin of text, but for a post that has a lot of images, I will alternate having images to the right and left of the text.

Here's a post with an image not aligned with the text -- it just has a blank space.

Here’s a post with an image not aligned with the text — it just has a blank space.

Another option for images is the “none” choice.  Choosing “none” for your image means that the text won’t be on the same lines as the image.  I only use this option when my image takes up the width of the post, otherwise there’s weird blank space on the side of the image.  If you choose to not have the image in-line with the text, you can also have the image itself aligned right, left, or centered, by selecting it after you put it in the post and aligning it with the text aligning tool (you know, the buttons where you choose whether to center text).

Advising students to keep image position in mind when creating a post will teach them new WordPress tools, as well as help them think about how the images and text look together in a post.

Editing Images

WordPress has some editing capabilities built in, but I like to edit my images before I put them into WordPress.  I use Google’s image application Picasa for most of my blogging image needs — most often for cropping images to particular sizes and resizing them.  If I want to do more complicated things, I’ll use Photoshop, but this doesn’t happen often.

Picasa is nice because you can save custom image dimensions for cropping purposes.  That means that when I have an image that I’d like to use for a post, I can use my custom dimensions (say, 940 x 230) and crop the image just the way I need it for blog posts.  Then I can export the image and enter in the pixels for how large I want it to be.  If I use the image also for a featured image or something else, I can recrop the same image into a different shape because Picasa doesn’t discard the cropped out part of the image.

So, if you’re thinking about assigning Web-based projects using WordPress, keep the above tips in mind when asking students to include images.

About Kim Mann

Kim Mann is the editor and a writer for the Academic Technology Blog. She earned her BA in English from the University of Minnesota in 2003 and her MA in American Studies from William & Mary in 2009, and her PhD in American Studies at the College in 2014. Her research is on technology, the interface, and the body in mid-twentieth century science fiction.