Use the srcset attribute to specify the URL of an image to be used in different situations in HTML.
You can try running the following code to implement the srcset attribute. Resize your browser to see the different images loaded -
<!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>The above is the detailed content of How to specify the URL of an image to be used in different situations in HTML?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
