twitter
55
edits
How and when do I use images?: Difference between revisions
no edit summary
m (→HTML) |
No edit summary |
||
| Line 8: | Line 8: | ||
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> | 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> | ||
The important concept is that images | 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== | ==When to use images== | ||
===Good design and what it looks like=== | ===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 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<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==== | ====Image Orientation==== | ||
| Line 21: | Line 38: | ||
[[File:Boracay_Beach.jpeg|right|thumb]] | [[File:Boracay_Beach.jpeg|right|thumb]] | ||
[[File:Tour_Eiffel_Wikimedia_Commons.jpg|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: ===== | =====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 | ||
| Line 30: | Line 48: | ||
*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 images you have seen 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? | Consider images you have seen 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? | ||
---- | ---- | ||
| Line 56: | Line 61: | ||
===HTML=== | ===HTML=== | ||
HTML uses the <img> tag for marking up a document to include an image.<ref>http://dev.w3.org/html5/markup/img.html</ref> | 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''': | '''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> | *Minimal Use Structure: <code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></code> | ||
| Line 62: | Line 68: | ||
*<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> | *<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''. Alternate text gives a description of the image for screen reader software and for missing, broken, or | 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> | 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> | ||
| Line 69: | Line 75: | ||
===WordPress=== | ===WordPress=== | ||
Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside | 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==== | ====Uploading==== | ||