How and when do I use images?

How to use images

Using images is a critical part of digital media. Despite their importance, they remain elusive to use for many. How varies between platforms; HTML and WordPress are among the most common so you'll find below how to use images for each. Click on the images for graphical examples of some steps.

HTML

HTML uses the <img> tag for marking up a document to include an image. Images are included through the use of the image's URL. Usage Examples:

• Minimal Use Structure: <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” />
• Typical Use Structure: <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”(# [pixels] or #%)” height=”(# [pixels] or #%)” />
• <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”348” height=”50%” />

ALT means alternative text. If an image becomes unavailable, the text tells the viewer what the image would have been. For vision impaired users, the alt text is used by the screen reader software to describe the image.

Note: It is not recommended to use the width and height attributes. If the image is smaller than the coded dimensions, the image will be enlarged, possibly deformed. If the image is significantly larger then the full-sized image will be downloaded. A common mistake is to take a very large image and use the width and height attributes to make it appear smaller.

---

WordPress

Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside the source editor text box.

Uploading

Error creating thumbnail: File missing

WordPress - Multiple File Uploader

Multiple Files To upload several files at once.

• On the left side of the control panel, click Media.
• Under Media click Add New.
• Drag & Drop one or more images from your computer to inside the dashed box, or click the “Select Files” button in the center of the dashed box. Note: “Maximum upload file size” below the dashed box.

Error creating thumbnail: File missing

WordPress - Browser Uploader

Browser Uploader If the multi-file uploader is unavailable or isn't working:

• Note the “Maximum upload file size”.
• Click the browser uploader link under the dashed box.
• Click the Browse... button
• Select your file from your computer
• Click Upload.

Error creating thumbnail: File missing

WordPress - Insert from URL

Insert from URL You may add images while you are creating a new post using the preceding methods or you may Insert from URL.

• Click the “Add Media” button above the left top of the text box.
• Click the Insert from URL link on the left.
• Type or paste the image's URL into the top box.
• Enter a caption under the image
• Enter the "Alt. Text".
• Choose your alignment
• Choose what happens when the image is clicked: Go to the original image, go to a custom URL, or nothing. If you click custom URL, type or paste the custom URL into the box provided below it.
• Lastly, click the “Insert into Post” button at bottom right.

Good design and what it looks like

It is important to deliberately choose images that help to emphasize your writing. Choosing between photographs, illustrations, horizontal images and vertical images are all very important decisions. More important, however, is what the subject and tone of your image is.

Image Orientation

There are two main orientations of photos, horizontally aligned and vertically aligned, and there is a time and place for each type.

Horizontal images are best when:

• The subject is wider than it is tall
• The photo has horizontal movement (this will "amplify the sense of movement" and causes the viewer to scan left to right)
• To convey a sense of space (the image will seem larger because human vision is horizontally oriented)

Vertical Images are best when:

• The subject is taller than it is wide
• To drive a viewer's eyes up and down or when there is vertical movement.
• To focus attention and make a greater impact (since the viewer is not distracted by peripheral items, the feeling is more compact)

Illustrations vs Photographs

Illustrations and photographs have two very different feels. It is important to consider your subject matter when deciding on the type of picture you are going to use.

Illustrations are best when:

• you want to create a sense of imagination
• trying to "shake-up" a viewer (since illustrations are a deviation from the norm)
• conveying a concept or abstract idea

Photographs are best when:

• you want to depict something literally
• selling a product
• creating a sense of reality or professionalism

Tone and subjects of images

Images can cause intense emotions very easily. It is important that you use images that emphasize the tone of your message. E.g., when writing about a happy occasion don't have sad people in your photographs or use "dark purple" tinted images. Think long and carefully before you make a decision or have someone give you their impressions of a photo before using it.