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.
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.
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.
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.