[JAY⌨️CSS] img 와 picture 태그의 차이, 그리고 반응형 이미지 사용법

 

 

 1️⃣ <img> 태그의 src 와 alt 속성

• img의 src 속성은 브라우저에게 이미지 파일의 경로, 파일명을 알려주는 역할.
• img태그 안의 이미지 파일이 보이지 않을 때 alt 속성은 이미지 대신 텍스트를 표시하는 역할.
  스크린리더와 같이 시각적으로 접근이 어려운 경우에도 이미지에 대한 정보를 텍스트로 제공.
• alt 속성은 SEO(Search Engine Optimization)에 도움된다는 사실! 저는 블로그 이미지에도 전부 alt 속성을 입력하고 있습니다! :)

 

<!-- 절대 경로 -->
<img src="https://jaycode.tistory.com/image.jpg" alt="이미지 정보">

<!-- 상대 경로 -->
<img src="../image.jpg" alt="이미지 정보를 입력하면 스크린 리더가 읽을 수 있어요. 사용자에게 큰 도움을 줄 수 있겠죠?">

 

 

 

 2️⃣ 반응형 이미지를 위한 srcset 속성

• 반응형을 위해 사용하는 속성.
• 여러 해상도에서도 브라우저가 자동으로 최상의 이미지를 출력할 수 있게 선택권을 넘긴다.
• x(pixel density) 와 w(viewport) 서술자는 동시에 사용 불가.
• srcset 속성을 사용해도 가장 마지막에 src 속성을 같이 기재해주는 것은 필수! (이전 브라우저 대응)

 

 

x 서술자 (pixel density)

• x서술자 는 화면의 밀도 pixel density 기준으로 다른 이미지를 로딩.
• 모바일 등 접속한 사용자의 디바이스의 화면 밀도가 다 다르기 때문에 2, 3 배수 까지 작업하기도 한다.
• 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려준다.

<!-- srcset = x 를 사용해서 2x 3x 화면 밀도를 고려한 이미지 출력 -->

<img srcset="images/2배수-이미지.png 2x,
		     images/3배수-이미지.png 3x" 
    src="images/기본-이미지.png" 
    alt="x서술자 활용 예제">

 

 

w 서술자 (viewport width)

• w서술자 는 원본 이미지의 넓이 viewport width 기준으로 이미지를 로딩.
• px이 아닌 w로 표기해야한다. 헷갈리지 말 것!
• w서술자가 적용되면 이미지 width는 기본적으로 뷰포트의 100%를 차지.
• sizes 에 @media query 형식으로 뷰포트 넓이를 기재하면 브라우저가 환경에 따라 적절한 이미지를 선택.
• css와 충돌할 수 있으니 주의! sizes 보다 css 우선순위가 더 높게 적용된다.

<!-- size=(min-whdth) 와 w 를  사용해서 뷰포트를 고려한 이미지 출력 -->

<img srcset="images/vw-1000.png 1000w,
              images/vw-800.png 800w, 
              images/vw-600.png 600w" sizes="(min-width:1000px) 800px,
          (min-width : 800px) 600px,
          300px" src="images/vw-600.png" alt="뷰포트 srcset 활용 예제">

화면 너비(뷰포트)기준으로 이미지를 로딩, sizes 속성과 함께 사용!

 

 

 

 3️⃣  익숙한 img 태그의 대체제인 picture 태그의 사용법은?

• <img> 가 해상도에 따라 동일한 이미지를 화면 다르게 보여준다면 <picture> 는 화면 해상도에 따라 다른 이미지를 보여줄 수도 있고, 최신 이미지 포맷(확장자)을 적용할 때 다양한 브라우저에서 대응해야 할 때 사용.
• <picture> <source srcset="" media="min-width:" type=””> <img> </picture> 의 구조.
• 순차적으로 위에서부터 모든 <source> 요소의 이미지 사용이 불가능하면 마지막 <img> 를 랜더링하기 때문에 반드시 함께 사용.
• 이렇게 이전 기술이 동작할 수 있는 환경을 대비해 두고 최신 기술을 제공하는 방법을 점진적 향상기법 Progressive enhancement 이라고 한다! :)

 

 

 

 

4️⃣ picture 태그의 srcset, media 속성

• <img> 의 sizes 와 비슷한 기능
• midia 에 @media query 형식으로 뷰포트 넓이를 기재하면 브라우저가 환경에 따라 적절한 이미지를 선택.

<!-- picture 안에 있는 source 태그의 srcset 과 media 속성에 정보를 입력해서 제어 -->

<picture>
    <source srcset="large.jpeg" media="(min-width:960px)"">
    <source srcset="medium.jpeg" media="(min-width:620px)">
    <img src="small.jpeg" alt="이런 식으로 각각 다른 이미지를 뷰포트 너비에 따라서 출력합니다.">
</picture>

다른 이미지 & 다른 포맷 중 하나를 선택할 때 사용!

 

 

 

 

5️⃣  picture 태그의 type 속성

• 이미지의 포맷(확장자) 정보를 브라우저에게 전달하고 순차적으로 브라우저가 지원하는 포맷인지 탐색, 지원하지 않는 포맷이면 다음 요소로 이동.
• WebP나 AVIF 와 같은 최신 포맷을 지원하려면 크로스브라우징을 위해 <img> 요소를 가장 마지막에 꼭 배치할 것!

<!-- type 속성을 입력하면 브라우저가 위로부터 순차적으로 대응 가능한 포맷부터 적용 -->

<picture>
    <source srcset="awesomeNewFormat.avif" type="image/avif">
    <source srcset="NewFormat.webp" type="image/webp">
    <img src="oldFormat.jpeg" alt="구형 이미지 포맷을 마지막에 꼭 배치해야합니다.">
</picture>

 

 

 

 

👩🏻‍💻 요약!

• 해상도에 따라 같은 이미지를 고화질로 보여주고 싶을 때 img srcset을,
  해상도에 따라 다른 이미지 or 다른 포맷을 보여주고 싶을 때에는 picture를 사용하면 된다.
• <img>의 srcset 속성으로는 화면 밀도를 기준으로 한 x 서술자, 뷰포트 너비를 기준으로 한 w 서술자가 있다.
• <picture>의 midia 속성에 @media query 형식으로 뷰포트 넓이를 기재하면 브라우저가 환경에 따라 적절한 이미지를 선택한다.
• 순차적으로 위에서부터 모든 요소의 이미지 사용이 불가능하면 마지막 <img> 를 랜더링.
• 이렇게 이전 기술이 동작할 수 있는 환경을 대비해 두고 최신 기술을 제공하는 방법을 점진적 향상기법 Progressive enhancement 이라고 한다! :)