O'Reilly logo

Mobile Web Performance Optimization by S. Niranga

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

Video and images via media queries

Media assets' weight is one of the biggest enemies of mobile devices. It says that roughly 60 to 70 percent of a site's weight is consumed by images, and this has been growing rapidly due to high-density displays.

When we build responsive websites, we remove the width and height attribute of an image, and we set the max-width 100 percent using CSS. By doing this, we make this image responsive and whatever the screen size is, the image will be resized for that screen.

Of course, this strategy requires developers to use images that are at least as large as the largest screen size at which they'll be displayed; if an image is expected as part of a layout, that could be anywhere from 320 px to 1,600 px, and the developer ...

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