HTML에서 브라우저 창 크기나 기기 환경 등 다양한 상황에 따라 서로 다른 이미지를 표시하고 싶다면 srcset 속성을 사용하면 됩니다. 이 속성은 반응형 웹 디자인에서 필수적인 기능으로, 화면 조건에 가장 적합한 이미지를 자동으로 선택해 로드할 수 있도록 도와줍니다.
예제
아래 코드를 직접 실행해 보세요. 브라우저 창의 너비를 조절하면 화면 크기에 맞춰 서로 다른 이미지가 로드되는 것을 확인할 수 있습니다.
<!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>
코드 설명
위 예제에서는 <picture> 요소 안에 여러 개의 <source> 태그를 배치했습니다. 각 <source> 태그의 media 속성은 적용 조건을 정의하고, srcset 속성은 해당 조건일 때 로드할 이미지의 URL을 지정합니다.
- 화면 너비가 550px 이상이면 첫 번째 source의 이미지가 표시됩니다.
- 화면 너비가 400px 이상 550px 미만이면 두 번째 source의 이미지가 표시됩니다.
- 어떤 조건에도 해당하지 않으면 마지막
<img>태그의 기본 이미지가 로드됩니다.
이처럼 srcset 속성과 <picture> 요소를 함께 사용하면 데스크톱, 태블릿, 모바일 등 다양한 환경에 최적화된 이미지를 효율적으로 제공할 수 있습니다.