Jump to content

How and when do I use images?: Difference between revisions

Line 51: Line 51:
"The image is more than an idea. It is a vortex or cluster of fused ideas and is endowed with energy." - Ezra Pound
"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 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.
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===
Line 60: Line 60:
*<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''. 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.<ref>http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm</ref>
ALT means ''alternative text''. Alternate text gives a description of the image for screen reader software and for missing, broken, or undownloaded images.ref>http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm</ref>


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.<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 76: Line 76:
*Under Media click Add New.   
*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.
*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.




Line 93: Line 89:
*Select your file from your computer
*Select your file from your computer
*Click Upload.   
*Click Upload.   




twitter
55

edits