You can insert images into web pages designed for the iPhone and iPad just as you would insert them into any other web page, using the HTML image tag.
The following well-crafted image tag inserts a photograph that’s 320 pixels x 110 pixels and is saved as a JPEG:
<img src="Glass-Artwork.jpg" alt="Glass Trestle" height="110" width="320" />
This list describes a few best practices for inserting images into any web page. These practices are especially important when you’re designing for the mobile web:
Use Alt text. Be sure to include alternative (Alt) text to describe the image. If your users are in areas where connections to the mobile web or Wi-Fi hotspots are iffy, they may have chosen to turn off the display of images. In this case, the Alt text may be all your visitors see.
If you insert a logo or another image with text, be sure to include the text in the Alt field of the image tag.
Limit the size of images. Use a relatively narrow width (320 pixels or smaller) to fit within the limited space of the basic iPhone screen. Another workaround is to specify the width using a percentage so that the image automatically adjusts to the screen size.
For example, if you set the size attribute in the image tag to width=95%, the image fills 95 percent of the width of the display area. If you use a percentage for width, you don’t need to specify a height.
Specify a height and width for each image. Using the height and width attributes, as shown in the earlier image tag code example, helps the mobile Safari browser load pages more efficiently because the browser doesn’t have to download each image before it can determine its height and width.
Use supported image formats. Apple devices can display JPEG, PNG, and GIF images — even animated GIF images.
dummies
Source:http://www.dummies.com/how-to/content/insert-images-into-page-designs-for-iphone.html
No comments:
Post a Comment