How and when do I use images?: Difference between revisions
| (71 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
[[File:7-peches_capitaux_rene_maltete.jpg|left|thumb|<blockquote>[http://www.robertlpeters.com/news/worth-1000-words%E2%80%A6/ Picture worth 1,000 words]]] "'''The drawing shows me at one glance what might be spread over ten pages in a book.'''" | |||
<blockquote>Ivan S. Turgenev, ''Fathers and Sons'', 1862<ref>http://www.phrases.org.uk/meanings/a-picture-is-worth-a-thousand-words.html</ref></blockquote> | |||
---- | |||
[[File:irony.chzbgr.jpg|right|thumb|Avoid sending the wrong message]] | |||
Of the [http://www.scientificamerican.com/article.cfm?id=making-sense-world-sveral-senses-at-time five senses], sight is perhaps the most important. Images impart vast amounts of information at a mere glance, hence the adage, "A picture is worth a thousand words".<ref>http://www.brainfacts.org/sensing-thinking-behaving/senses-and-perception/articles/2013/the-senses-a-primer-part-ii/</ref> | |||
Images can demonstrate an idea, concept, or procedure much more efficiently than text alone. As an example, see below for images used in this manner. Images may convey or invoke emotions more effectively than text. Marketers prefer images to provoke action and desire for products; this is the primary reason commercial business prefers to send HTML emails to customers.<ref>http://blogs.constantcontact.com/product-blogs/email-marketing/email-marketing-images/</ref> | |||
This also means images can distract or send the wrong message when used carelessly or incorrectly. For instance, in 2013, food celebrity Martha Stewart found controversy by posting unsavory photos of food via Twitter.<ref>http://www.dailymail.co.uk/femail/article-2513853/Martha-Stewart-remains-unapologetic-gross-food-photos--promises-MORE-Thursday.html</ref> | |||
The important concept is that properly used images greatly enhance digital writing and other text-centric media. A critical technical skill for New Media and Communications majors is knowing how to incorporate images in popular media. The critical artistic skill is knowing when, or why, to use images. | |||
==When to use images== | |||
===Good design and what it looks like=== | |||
Choose images which emphasize and support your subject, or offer example. Photographs and graphics each have strengths and weaknesses. A good design is one that takes the overall thematic elements of a page, packaging, or product and incorporates those elements into a consistent unit.<ref>http://www.johnlovett.com/test.htm</ref> | |||
====Illustrations vs Photographs==== | |||
Illustrations and photographs are related but have two different purposes. Illustrations are wholly the product of imagination, and therefore can convey a broader range of expression. Photographs incorporate reality, and can more readily convey metaphor.<ref>http://chrishaughton.com/illustration-vs-photography-article/</ref><ref>http://www.illustrationmundo.com/q_and_a/question_id/2</ref> | |||
=====Illustrations<ref>http://www.bigstockphoto.com/blog/photos-vs-illustrations-when-to-use-which-format/</ref> 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<ref>http://www.bigstockphoto.com/blog/photos-vs-illustrations-when-to-use-which-format/</ref> are best when:===== | ||
*you want to depict something literally | |||
*selling a product | |||
*creating a sense of reality or professionalism | |||
====Image Tone==== | |||
Images can trigger intense emotions. Use images that reflect and emphasize the '''tone''' of your message. It is possible to use color to reflect tone or to set moods.<ref>http://www.color-wheel-pro.com/color-meaning.html</ref>. Consistency is helped by keeping the color scheme and matching the images to a complement both the tone and overall site scheme. | |||
== | ====Image Orientation==== | ||
There are two main orientations of photos: horizontal (''landscape'') and vertical (''portrait''). | |||
[[File:Boracay_Beach.jpeg|right|thumb]] | |||
[[File:Tour_Eiffel_Wikimedia_Commons.jpg|right|thumb]] | |||
=====Horizontal images<ref>http://photography.about.com/od/takingpictures/ss/picorientation_2.htm</ref> are best when: ===== | |||
*The subject is wider than it is tall | *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) | *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) | *To convey a sense of space (the image will seem larger because human vision is horizontally oriented) | ||
=====Vertical Images<ref>http://photography.about.com/od/takingpictures/ss/picorientation_3.htm</ref> are best when: ===== | |||
*The subject is taller than it is wide | *The subject is taller than it is wide | ||
*To drive a viewer's eyes up and down or when there is vertical movement. | *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) | *To focus attention and make a greater impact (since the viewer is not distracted by peripheral items, the feeling is more compact) | ||
< | =====Example===== | ||
Consider, for a moment, images of the Eiffel Tower. Are they more powerful when the image is vertical, or ''portrait'', or when the tower is part of an overall ''landscape'' in a horizontal image?<ref>https://www.google.com/search?q=eiffel+tower&tbm=isch</ref> Consider ocean images. How does a wide ''landscape'' image compare to a ''portrait'' image of the water, especially with a beach or wave?<ref>https://www.google.com/search?q=ocean&tbm=isch</ref> | |||
< | |||
* | ==How to use images== | ||
* | |||
* | "''The image is more than an idea. It is a vortex or cluster of fused ideas and is endowed with energy.''" - Ezra Pound | ||
---- | |||
Using images is a critical part of working with digital media. How to insert an image varies between platforms, and even different versions of the same platform. Because HTML and WordPress are among the most common places images will be used, here are how to use images for each. Click on the images for graphical examples of some steps. | |||
===HTML=== | |||
HTML, or [http://www.w3schools.com/html/html_intro.asp Hypertext Markup Language], is code behind the scenes which makes up a webpage. HTML uses the [http://www.mediacollege.com/internet/html/image-tag.html <img> tag] for marking up a document to include an image.<ref>http://dev.w3.org/html5/markup/img.html</ref> Images are included through the use of the image's [http://www.boutell.com/newfaq/definitions/url.html URL]; in other words, where the image is on the internet or the webserver.<ref>http://www.mediacollege.com/internet/html/image-tag.html</ref> | |||
'''Usage Examples''': | |||
*Minimal Use Structure: <code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></code> | |||
*Typical Use Structure: <code><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 #%)” /></code> | |||
*<code><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%” /></code> | |||
ALT means ''alternative text''. [http://www.mediacollege.com/internet/html/image-tag.html#alt Alternate text] gives a description of the image for screen reader software and for missing, broken, or unretrieved images.<ref>http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm</ref> | |||
Note: Avoid setting width and height attributes. Image distortion will occur with small images, and large images will still take the same time to download as the full-size image.<ref>http://sixrevisions.com/web-development/decrease-webpage-load-times/</ref> | |||
---- | |||
===WordPress=== | |||
Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside WordPress' source editor text box.<ref>http://codex.wordpress.org/Using_Images</ref><ref>http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages</ref> | |||
====Uploading==== | |||
[[File:Wordpress-3.7.1-upload-multiple-files.png|left|thumb|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. | |||
[[File:Wordpress-3.7.1-upload-new-media.png|left|thumb|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. | |||
[[File:Insert_from_URL_-_WordPress.png|left|thumb|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 and 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 (paste the custom URL into the box), or nothing. | |||
*Lastly, click the “Insert into Post” button at bottom right. | |||
==References== | ==References== | ||
<references/> | <references/> | ||
Latest revision as of 18:03, 6 December 2013
Error creating thumbnail: File missing
"The drawing shows me at one glance what might be spread over ten pages in a book."
Ivan S. Turgenev, Fathers and Sons, 1862[1]
Of the five senses, sight is perhaps the most important. Images impart vast amounts of information at a mere glance, hence the adage, "A picture is worth a thousand words".[2]
Images can demonstrate an idea, concept, or procedure much more efficiently than text alone. As an example, see below for images used in this manner. Images may convey or invoke emotions more effectively than text. Marketers prefer images to provoke action and desire for products; this is the primary reason commercial business prefers to send HTML emails to customers.[3]
This also means images can distract or send the wrong message when used carelessly or incorrectly. For instance, in 2013, food celebrity Martha Stewart found controversy by posting unsavory photos of food via Twitter.[4]
The important concept is that properly used images greatly enhance digital writing and other text-centric media. A critical technical skill for New Media and Communications majors is knowing how to incorporate images in popular media. The critical artistic skill is knowing when, or why, to use images.
When to use images
Good design and what it looks like
Choose images which emphasize and support your subject, or offer example. Photographs and graphics each have strengths and weaknesses. A good design is one that takes the overall thematic elements of a page, packaging, or product and incorporates those elements into a consistent unit.[5]
Illustrations vs Photographs
Illustrations and photographs are related but have two different purposes. Illustrations are wholly the product of imagination, and therefore can convey a broader range of expression. Photographs incorporate reality, and can more readily convey metaphor.[6][7]
Illustrations[8] 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[9] are best when:
- you want to depict something literally
- selling a product
- creating a sense of reality or professionalism
Image Tone
Images can trigger intense emotions. Use images that reflect and emphasize the tone of your message. It is possible to use color to reflect tone or to set moods.[10]. Consistency is helped by keeping the color scheme and matching the images to a complement both the tone and overall site scheme.
Image Orientation
There are two main orientations of photos: horizontal (landscape) and vertical (portrait).
Horizontal images[11] 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[12] 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)
Example
Consider, for a moment, images of the Eiffel Tower. Are they more powerful when the image is vertical, or portrait, or when the tower is part of an overall landscape in a horizontal image?[13] Consider ocean images. How does a wide landscape image compare to a portrait image of the water, especially with a beach or wave?[14]
How to use images
"The image is more than an idea. It is a vortex or cluster of fused ideas and is endowed with energy." - Ezra Pound
Using images is a critical part of working with digital media. How to insert an image varies between platforms, and even different versions of the same platform. Because HTML and WordPress are among the most common places images will be used, here are how to use images for each. Click on the images for graphical examples of some steps.
HTML
HTML, or Hypertext Markup Language, is code behind the scenes which makes up a webpage. HTML uses the <img> tag for marking up a document to include an image.[15] Images are included through the use of the image's URL; in other words, where the image is on the internet or the webserver.[16]
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. Alternate text gives a description of the image for screen reader software and for missing, broken, or unretrieved images.[17]
Note: Avoid setting width and height attributes. Image distortion will occur with small images, and large images will still take the same time to download as the full-size image.[18]
WordPress
Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside WordPress' source editor text box.[19][20]
Uploading
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.
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.
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 and 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 (paste the custom URL into the box), or nothing.
- Lastly, click the “Insert into Post” button at bottom right.
References
- ↑ http://www.phrases.org.uk/meanings/a-picture-is-worth-a-thousand-words.html
- ↑ http://www.brainfacts.org/sensing-thinking-behaving/senses-and-perception/articles/2013/the-senses-a-primer-part-ii/
- ↑ http://blogs.constantcontact.com/product-blogs/email-marketing/email-marketing-images/
- ↑ http://www.dailymail.co.uk/femail/article-2513853/Martha-Stewart-remains-unapologetic-gross-food-photos--promises-MORE-Thursday.html
- ↑ http://www.johnlovett.com/test.htm
- ↑ http://chrishaughton.com/illustration-vs-photography-article/
- ↑ http://www.illustrationmundo.com/q_and_a/question_id/2
- ↑ http://www.bigstockphoto.com/blog/photos-vs-illustrations-when-to-use-which-format/
- ↑ http://www.bigstockphoto.com/blog/photos-vs-illustrations-when-to-use-which-format/
- ↑ http://www.color-wheel-pro.com/color-meaning.html
- ↑ http://photography.about.com/od/takingpictures/ss/picorientation_2.htm
- ↑ http://photography.about.com/od/takingpictures/ss/picorientation_3.htm
- ↑ https://www.google.com/search?q=eiffel+tower&tbm=isch
- ↑ https://www.google.com/search?q=ocean&tbm=isch
- ↑ http://dev.w3.org/html5/markup/img.html
- ↑ http://www.mediacollege.com/internet/html/image-tag.html
- ↑ http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm
- ↑ http://sixrevisions.com/web-development/decrease-webpage-load-times/
- ↑ http://codex.wordpress.org/Using_Images
- ↑ http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages