Chapter 10. Images and Media
It’s often said that a picture is worth a thousand words. This is true in the mobile web, too. However, we need to find a balance with regard to the number of images and media elements in a document. Every image or resource adds to the network traffic, number of requests, and load time, unless we use best practices and techniques to optimize performance.
Let’s take a look at what options we have for images and other media elements, such as video and audio playing.
Images
When we talk about images, your first thought is probably the
img element. While this is one of the
most-used solutions for images on the Web, it’s not the only one available
in mobile HTML5. With HTML5 we can render images with Scalable Vector
Graphics (SVG), the canvas element, and
Cascading Style Sheets (CSS).
Note
With CSS3 we can replace images for a lot of use cases, such as gradients, rounded corners, shadows, and other effects. If you can do it with CSS, do it and don’t use images.
Image Formats
There’s good news here. Almost every mobile browser understands standard static web image formats: GIF, JPEG, and PNG. On tablets and modern smartphones, all of these formats will work without any major issues. That said, there are some differences with regard to indexing and alpha transparency on devices shipped before 2011.
Some mobile browsers also support SVG as a replacement for a
bitmap image, as in the img element
or background-image in CSS.
Get Programming the Mobile Web, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
