Conditional loading

Responsive designs combine three main techniques, which are as follows:

Fluid grids
Flexible images
Media queries

The technique that I want to focus on in this section is media queries. In most cases, developers use media queries to change the layout, width height, padding, font size and so on, depending on conditions related to the viewport.

Let's see how we can achieve conditional image loading using CSS3's image-set function:

.my-background-img {
background-image: image-set(
 url(icon1x.jpg) 1x,
 url(icon2x.jpg) 2x
);
}

You can see in the preceding piece of CSS3 code that the image is loaded conditionally based on its display type. The second statement url(icon2x.jpg) 2x would load the hi-resolution image or retina image. This reduces the number of CSS rules we have to create. Maintaining a site with a lot of background images can become quite a chore if a separate rule exists for each one.

Here is a simple media query example:

@media screen and (max-width: 480px...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Conditional loading

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Conditional loading

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access