HTML picture 태그와 img 태그 차이, 반응형 웹디자인에서는 어떻게 써야 할까?

홈페이지를 PC로 볼 때는 이미지가 시원하게 잘 보이는데, 모바일에서는 중요한 부분이 잘리거나 글자가 너무 작게 보이는 경우가 있습니다. 같은 이미지를 모든 화면에 그대로 넣으면 화면 크기에 따라 전달력이 달라질 수 있습니다.

이럴 때 확인해볼 수 있는 HTML 구조가 picture 태그입니다. 기본적인 이미지는 img 태그로 넣을 수 있지만, PC·태블릿·모바일처럼 화면 조건에 따라 다른 이미지를 보여줘야 한다면 picture 태그가 더 적합할 수 있습니다.

예를 들어 PC에서는 넓은 배경 이미지가 필요하고, 모바일에서는 인물이나 제품 중심으로 잘라낸 이미지가 필요할 수 있습니다. picture 태그를 사용하면 이런 화면별 이미지 구성을 HTML 안에서 나눠 관리할 수 있습니다.

img 태그는 언제 사용할까요?

img 태그는 이미지를 넣을 때 가장 기본적으로 사용하는 HTML 태그입니다.

<img src="main-visual.jpg" alt="메인 비주얼 이미지">

로고, 아이콘, 게시글 썸네일, 본문 이미지처럼 하나의 파일을 그대로 보여줘도 괜찮은 이미지라면 img 태그만으로 충분합니다.

다만 화면 크기에 따라 이미지의 비율이나 보여줘야 할 영역이 달라지는 경우에는 고민이 필요합니다. PC에서는 전체 배경이 잘 보여야 하고, 모바일에서는 핵심 인물이나 제품이 중심에 와야 한다면 같은 이미지 하나로 모든 화면을 맞추기 어렵습니다.

picture 태그는 어떤 상황에 적합할까요?

picture 태그는 화면 조건에 따라 다른 이미지를 제공하고 싶을 때 사용합니다.

대표적으로 이런 경우에 어울립니다.

즉, picture 태그는 여러 이미지 후보 중 상황에 맞는 파일을 선택해 보여주는 구조에 가깝습니다.

picture 태그 기본 구조

picture 태그 안에는 조건별 이미지를 지정하는 source 태그와 기본 이미지를 보여주는 img 태그가 함께 들어갑니다.

<picture>
    <source media="(max-width: 768px)" srcset="visual-mobile.jpg">
    <source media="(max-width: 1200px)" srcset="visual-tablet.jpg">
    <img src="visual-pc.jpg" alt="서비스 소개 이미지">
</picture>

위 구조에서는 화면 크기에 따라 다른 이미지가 적용됩니다. 모바일에서는 visual-mobile.jpg, 태블릿 크기에서는 visual-tablet.jpg, 그 외 환경에서는 visual-pc.jpg가 표시됩니다.

여기서 마지막의 img 태그는 꼭 필요합니다. 조건에 맞는 source가 없거나 브라우저가 해당 조건을 사용할 수 없는 경우 기본 이미지 역할을 하기 때문입니다.

picture 태그와 img 태그의 차이

img 태그는 하나의 이미지를 직접 보여주는 역할을 합니다.
picture 태그는 여러 이미지 후보를 두고 조건에 맞는 이미지를 선택하는 구조입니다.

정리하면 이렇게 볼 수 있습니다.

화면별로 이미지가 달라질 필요가 없다면 img 태그가 더 단순하고 관리하기 쉽습니다. 반대로 화면 크기에 따라 이미지 구성을 다르게 보여줘야 한다면 picture 태그를 검토하는 편이 좋습니다.

이미지 포맷을 다르게 제공하는 방법

picture 태그는 이미지 포맷을 나눠 제공할 때도 사용할 수 있습니다.

<picture>
    <source srcset="banner.avif" type="image/avif">
    <source srcset="banner.webp" type="image/webp">
    <img src="banner.jpg" alt="이벤트 배너">
</picture>

이 구조에서는 브라우저가 AVIF를 지원하면 AVIF 이미지를 사용하고, 그렇지 않으면 WebP를 확인합니다. 두 포맷을 사용할 수 없는 환경에서는 JPG 이미지가 표시됩니다.

이 방식은 이미지 품질과 용량을 함께 고려해야 하는 홈페이지에서 활용하기 좋습니다. 다만 기본 이미지를 함께 준비해야 다양한 환경에서 안정적으로 표시할 수 있습니다.

반응형 웹디자인에서 확인할 부분

반응형 웹디자인에서는 이미지가 줄어드는지만 보면 부족합니다. 화면 크기가 바뀌었을 때 이미지의 핵심 내용이 제대로 보이는지도 함께 확인해야 합니다.

예를 들어 병원, 교육, 펜션, 비즈니스 홈페이지처럼 메인 비주얼이 중요한 사이트에서는 PC용 이미지를 모바일에 그대로 넣었을 때 텍스트가 작아지거나 인물, 공간, 제품이 잘 보이지 않을 수 있습니다.

이런 경우에는 모바일 전용 이미지를 별도로 준비하는 편이 좋습니다. picture 태그를 사용하면 같은 위치에 화면별 이미지를 나눠 적용할 수 있어 반응형 화면을 더 자연스럽게 구성할 수 있습니다.

적용 전 체크리스트

이미지를 교체할 때는 파일만 바꾸기보다 PC, 태블릿, 모바일 화면에서 실제 표시 결과를 확인하는 과정이 필요합니다. PC에서는 괜찮아 보여도 모바일에서 핵심 부분이 잘리는 경우가 많습니다.

자주 묻는 질문

반응형 이미지는 태그 선택부터 달라집니다

img 태그는 이미지를 가장 간단하게 넣는 기본 방식입니다. 화면 크기나 이미지 포맷에 따라 다른 파일을 보여줘야 한다면 picture 태그를 함께 검토하는 것이 좋습니다.

반응형 웹디자인에서는 이미지가 줄어드는 것보다 중요한 내용이 각 화면에서 제대로 보이는지가 더 중요합니다. 사용자가 어떤 기기에서 보더라도 이미지의 핵심이 전달되고, 불필요하게 큰 파일을 불러오지 않도록 구성해야 합니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 참고하거나 수정할 때도 이미지가 들어가는 위치와 화면별 표시 방식을 함께 확인하면 좋습니다. 특히 메인 비주얼, 배너, 카드 썸네일처럼 첫인상에 영향을 주는 이미지는 img와 picture 중 어떤 구조가 적합한지 먼저 판단하는 것이 중요합니다.