How to Add Alternate Text & Image Size in HTML
Alternate text, also known as alt tags, helps provide users with additional information about images displayed on web pages. Well-crafted alternate text will give visitors using text-only browsers valuable information about the image that might otherwise be missing. Image sizes, meanwhile, help reduce render time, as the web browser can allot space on the page before the image loads rather than having to shift elements around after it loads.
Other People Are Reading
Instructions
-
Alternate Text
-
1
HTML: When adding an image to a web page, include alt="your text here" in the <img src> tag. For example: <img src="/images/myimage.jpg alt="your image text here">.
-
2
Dreamweaver: In design mode, click on an image. Type the alternate text in the "Alt" form box on the properties tool bar.
-
-
3
FrontPage: In design mode, click on an image and then right click to summon a contextual menu. Scroll down to "Picture Properties." In the "Alternative representations" section, type the alternate text in the text-form box. Click "OK" to return to design mode.
-
4
Blogger: Switch to "Edit HTML" and replace the automatically generated alt tag with your own text.
-
5
LiveJournal: The image-properties window will prompt you for a short description after the image has been loaded. If you are hot linking to Flickr or PhotoBucket, then use the "alternate text" box below the image link box.
-
6
WordPress: Click on "Edit Media / Advanced Settings" to change the alternate text.
Image Size
-
7
HTML: Type the image dimensions after the image source. For example: <img src="/images/myimage.jpg alt="your image text here" width="10" height="10">.
-
8
Dreamweaver: Change the diemsions by clicking on the image and updating the X and Y dimensions in the properties tool bar.
-
9
FrontPage: Change to HTML view to manually update the automatically generated image dimensions.
-
10
Blogger: Switch to "Edit HTML" mode to change the image dimensions.
-
11
LiveJournal: Switch to HTML mode and change the dimensions on your image. If you uploaded an image, look for the string at the end of the image that starts with an s (for example: s320x240). Change the numbers to the new dimensions but leave the s and the x.
-
12
WordPress: To use something other than the four default sizes, go to "Settings / Media." There you will be able to adjust the dimensions.
-
1
Tips & Warnings
Whenever possible, the easiest and most direct route to adding alternate text and image dimensions is to do it in the raw HTML.
References
- Photo Credit emty browser window image by .shock from Fotolia.com
More Like This
Comments
-
allthingsgodly
Jan 03, 2011
wow, very good. thanks so much for the HTML code to manually resize images. very perfect! regular images were blurry when i used this option, but .gif's look REALLY GREAT! thank you again! great article and just what i needed!
