Reduce image size: use media queries for background images

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=Dx-WaZkp58Q


Duration: 3:00
29,056 views
840

The srcset attribute is a great way to enable the browser to choose the right image size of image with an img element.

But what about background images?

In this video you'll learn how to use media queries to enable the browser to choose the right background image across different devices and display sizes.

Still have questions regarding the use of media queries for background images? Use #AskChrome on Twitter to send them to the Chrome team!

Series playlist → https://www.youtube.com/playlist?list=PLNYkxOF6rcICVl6Vb-AFlw81bQLuv6a_P

Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs



Other Videos By Chrome for Developers


2019-08-01Scope in JavaScript - HTTP 203
2019-07-30New in Chrome 76: Better install experiences for PWAs, dark mode, and more!
2019-07-25Reduce image size: use the correct format — PNG or JPEG
2019-07-15Implementing the Web Payments API - Progressive Web App Training
2019-07-15Responsive design - Progressive Web App Training
2019-07-15Responsive images - Progressive Web App Training
2019-07-15IndexedDB - Progressive Web App Training
2019-07-14Chrome 76 - What’s New in DevTools
2019-07-12Reduce image size: optimize image compression
2019-07-03BigQuery - The State of the Web
2019-06-27Reduce image size: use media queries for background images
2019-06-25Handling updates offline-first - HTTP 203
2019-06-20Faster Web Navigation with Predictive Prefetching
2019-06-19Web as a building block for emerging technologies
2019-06-18Web Components: The Secret Ingredient Helping Power The Web
2019-06-17Easier payments for Progressive Web Apps - Progressive Web App Training
2019-06-17Send and receive push messages - Progressive Web App Training
2019-06-17Use VAPID to secure push messages - Progressive Web App Training
2019-06-17Display notifications - Progressive Web App Training
2019-06-17Introduction to the Web Perception Toolkit
2019-06-13Reduce image size: use srcset to automatically choose the right image


Tags:
responsive images
srcset
background images
progressive web app
PWA
Google Chrome Developers
Google Chrome. Chrome Developers
google chrome developer
chrome developer
GDS: Yes;