Cover by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

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 do we have for images, and media elements, such as video and audio playing.

Images

When we say images I know your first thought, the img element. While it’s one of the most used solutions for images on the web, it’s not the only one on mobile HTML5. With HTML5 we can render images with SVG, canvas and CSS.

Note

With CSS3 we can replace images for a lot of use cases, such as gradients, rounded corners, shadow 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. That said, there are some differences with regard to index and alpha transparency on devices shipped before 2011. On tablets and modern smartphones every format will work without any major issue.

Some mobile browsers also support SVG as replacement for a bitmap image, as in the img element or background-image on CSS.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required