This chapter is from the book
This chapter is from the book
This chapter is from the book
Wrapping it up
Performance is an important consideration for any site. Loading images that are unnecessary or larger than needed can have a serious impact on page load time.
The CSS solution of display:none is not viable. It hides images from view, but they’re still requested and downloaded. If you want images to show only above a certain breakpoint, the better bet is to load them conditionally, after the page load has occurred.
Responsive images are an unsolved problem. There have been many attempts at a solution but each has its own set of problems. The best thing you can do is take time before each project to consider which approach will work best for that site.
To hide background images without having to download them, include the image in a media query. Setting it in your base styles and then trying to hide it results in the image being downloaded in the majority of cases.
High-resolution displays, such as the Retina display on latest versions of the iPhone, iPad, and MacBook Pro, pose another challenge. There is a solution for CSS-based images, which can use the min-resolution media query.
Video and advertising are also concerns. For video, using the intrinsic ratio method can help you to scale the video appropriately across screen sizes. As always, be conscious of the performance. It may be best for users to simply link to the video on small screens and embed on larger ones.
For advertising, the technical challenges are not difficult to solve. If you’re loading ads from your own system, JavaScript or some responsive HTML and CSS can help the ads change for different resolutions. The bigger problem arises in getting sales teams and third-party advertising networks to get on board.