Use the srcset attribute to specify the URL of the image to use in different situations in HTML.
Example
You can try to run the following code to implement srcset attribute. Resize the browser to see different images loading −
<!DOCTYPE html> <html> <head> <meta name = "viewport" content="width=device-width, initial-scale = 1.0"> </head> <body> <picture> <source media = "(min-width: 550px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"> <source media = "(min-width: 400px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg"> <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "Tutorials Library" style = "width:auto;"> </picture> </body> </html>