Tutorial Overview

Topics covered in this tutorial (click link to jump to topic):

1.	Introduction
2.	Movie: Introduction to Adding Images in WordPress
3.	Adding an Image
4.	The Uploader
5.	Once Images are in the Page
6.	Other resources

Introduction

You use images on a web site to illustrate the text or to create visual interest. A page is more accessible to the reader if large chunks of text are broken up with pictures.

There are two ways you can add images to WordPress. One is on the fly, that is, as you are editing a page or post, and the other way is too pre-upload all the images you intend to use on the site through the Media panel, then add them to posts later.

Image File Sizes

Your web site images should be 72dpi and around 600 pixels across. Let the height manage itself. A digital camera may take images of 92, 150 or 300 dpi, so mostly camera pictures will need to be processed (reduced in size) before you can upload them to your web site. Even mobile phones take pictures that are too large for you web site.

As a web designers we resize images all day, every day. To us it is a walk in the park. But web site owners really struggle with it, so here are some plain language pointers:

1. Images on the web are saved at 72 dpi. Dpi means “dots per inch”. Why is 72 the magic number? Well, more will not improve the quality of the image. In other words, screens have 72 dpi and giving them 150 dpi images will not improve the quality of an image.
2. Images on the web have to be small. By “small” we are talking around 400 to 600 pixels across. “Pixel” is a contraction of “picture element”, but for sensible people it is one tiny dot on your screen.  Images on the web should be small because otherwise they take too long to arrive for people on dial up connections. If you want to show people a really big images, you can “pop up” that image with a magnify link or some such device, but the important thing here is to give people the choice to see a larger image and not impose it on them.
3. Images on the web have to be saved as JPEGs or GIFs. And definitely not BMPs. JPEG stands for “joint photographic experts group” and not surprisingly it is the file format best suited to photos. GIFs, short for “graphic interchange format” on the other hand is good for things like logos where there are only a few colours.

Now I know what dpi, screen size and file format I have to make, what next?
You need some software to do the resize, sharpen and save with compression. Photoshop Elements or Paint Shop Pro would be great options, or for free software like Google’s Picasa or IfranView. What ever you choose, there will be menu options for resizing, sharpening and saving out your images. Start with the “Image>Resize Image” menu options.

Tip
When resizing always work on duplicates of your photos and NOT their originals. The worse thing you can do is resize and reduce the quality of a valuable original image.

Images – Getting Started

Adding images in WordPress is simple BUT before you do, please look at the above movie and read this  article. The key here is NOT to upload a file that is not suited to the web.

Note that if you wish to arrange 3 or 4 images in a cluster, it is probably best to create a single image with 3 or 4 images together in advance of uploading.

Adding an Image

To add an image, go to the “Add media” line above the wysiwyg editing tools. If you mouse over and hold on these icons they will tell you what they do. You can also upload all your images in advance of using them by going to “Media”, then “Add new”. You can upload all your images to a “library”, then they will be avilable for use on any page on post on your site from that point on.

The Uploader

After the above, the dialogue box below will appear. It allows you to select files from your computer to upload to your web site. We recommend the “browser uploader” (over the “Flash uploader”). It is more reliable and straight forward.

There are two uploading options:

1. The browser uploader. This is a built in feature of the browser but only supports uploading one file at a time. i.e. browse to a file, select and “open”. Then “upload”. Sometimes users browse to the file and select it but then fail to click the “upload” button.
2. The Flash uploader. The Flash uploader has the advantage of allowing multiple file uploads. However the technology is not universally supported. The Flash uploader relies on the the presence of the Shockwave browser plugin. Most people will have this installed. If they don’t it is easily obtained.

Once it is in the Page

Once added to a post you can click on an image, and edit it properties (see the little scenery icon, top left). Clicking properties will open up a new dialogue box with many useful functions e.g. you can change the images size, put a border around it, link it to a page in your site you someone else’s, control text wrapping, etc.

The Edit Image dialogue box is mostly shown below. Don’t forget to click the “Update” button at the very bottom if you have changed any options and want to save them. You may have to scroll down to see this.

Alts & Captioning

Alt is a piece of HTML. It means “alternate”, in other words an alternate description of the image, movie or animation. E.g. In HTML <img src=”/images/my-picture.jpg” alt=”My most excellent picture”>. The Alt attribute is for people who are sight impaired or blind. Their browser will read out the alt description. Estimates are that a little under 10% of people are stringly sight imparied in some way.

Most people think their pictures are reasonably self explanatory, but if you ask people what they think they are looking at in a picture, you will be surprised what they come back with. Captioning makes it explicit. It also gives you the opportunity to present more keywords to search engines.

Other Resources

http://codex.wordpress.org/Using_Images