HTML and CSS Reference
In-Depth Information
That isn't to say that images are forbidden in your mobile content. In-
stead, use images sparingly. A small logo may work just fine in your
pages, and tiny navigational icons will certainly make your pages easier
to use. If you must deliver large images do it with a separate link, with
a warning about the size of the object the user will be accessing. This
way, users understand the cost before they select the link.
When you do deliver large images, use common file formats such as
GIF89a and JPEG. We know of no mobile browser that cannot handle
these well-established file formats. Keeping in mind the small display
sizes of mobile devices, use images that are close to the display size.
In any case, do not send an enormous image and expect the browser
to scale it to the display size. It is downright mean to send a "gigantic"
1024 x 768 image over a slow mobile connection, swamping the mobile
device's memory and forcing the device to shrink the image to fit its
display. To further assist the browser, always use the
height
and
width
attributes in the
<img>
tag to let the browser know what to expect as the
image trickles in.
14.4.6. General Advice
In closing, we offer one final bit of advice: less is more. The mobile web
is not the place to show off your cutting-edge page-layout skills or fancy
image library. Instead, it is about quick delivery of great content that
meets a specific need at a specific point in time.
To stay focused on this minimalist approach, consider adopting the
W3C's recommended mobile page design guidelines:
•
Design all your pages to work within a display that is 120 pixels
wide. While many newer devices are wider than this, targeting
this smaller number will ensure reasonable presentation on a
broad range of devices, old and new.
•
Use GIF89a or JPEG images. As we noted before, this ensures
that your images will render on almost any mobile device.
