Images are very integral part of any website these days. They say a picture is worth …, well you know the saying right.

Working with images is pretty hectic at times. Choose a larger size image and it reduces your site performance with longer loading times.

Choose a smaller image with lower quality and it distorts the user experience. In this article we are going to learn the most basic practices to ensure responsivity in images.

We will also look at the best ways to ensure high quality with smaller size images.

BACKGROUND IMAGES

To ensure image responsivity from large to small screen devices, we can take advantage of the powerful switching in different sizes.

Resolution switching helps us display image content depending on different screen sizes. We can use the srcset property together with the sizes to perform this effectively.

To ensure responsivity we always need to implement background images to scale both height and width on responsiveness, set the width to 100% and height to auto. What this will do is that it will scale the width to occupy the entire width while maintaining the default height at all times.

CSS MEDIA QUERIES

Introduced in css 3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Media queries are so powerful and plays an important part in identifying different characteristics of devices. We can implement media queries to target different screen sizes and display an image relative to the screen size.

The implementation is as shown below.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

The above css property will be included if the browser window is 600px or smaller, the background color will be lightblue.

Conclusion

This is just a simple illustration on how to ensure image responsivity in css.

On advanced css image responsivity you can refer to this article here.

Thank you for reading this article if you found it helpful please share and leave a comment down below.

I have started up a youtube channel you can check it over here.

Untill next time PEACE.