[HTML] 반응형 이미지를 위한 srcset

srcset이란?

첫 번째, srcset 속성은 ‘이미지 소스의 세트’라는 의미이다. 같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개 이상 명시하는 속성이다. 만약 1개 이미지 소스만 명시하려면 src 속성을 사용하시면 된다.

srcset 속성은 브라우저에 이미지 선택권을 위임하는 속성으로, 개발자는 어느 환경에서 어떤 크기의 이미지가 선택될 것인지 알 필요가 없으며, 알더라도 그냥 모르는 척하는 것이 정신 건강에 좋다.

	<img 
        srcset="images/500.png 500w, images/300.png 300w, images/150.png 150w"
        sizes="(min-width:960px) 500px, (min-width:640px) 300px, 320px" 
        src="images/150.png" 
        alt="gray-box">

• srcset 속성은 쉼표(,)로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,
• sizes 속성은 쉼표(,)로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정한다.
• src 속성은 srcset을 사용할 수 없는 환경에서 동작한다.

	<img
  		srcset="경로 원본크기, 경로 원본크기, 경로 원본크기"
  		sizes="(미디어조건) 최적화출력크기, (미디어조건) 최적화출력크기, 기본출력크기"
  		src="경로"
  		alt="대체텍스트" />

• html만으로도 미디어 반응형 처리를 할 수 있다.

x서술자, w서술자, size 속성

x와 w 디스크립터는 개발자가 브라우저에 이미지의 크기를 알려주는 용도의 단위이다.
이미지 로드는 지불할 비용이 크기 때문에,브라우저가 비용 지불 없이도 이미지의 크기를 알 수 있도록 개발자가 x 혹은 w 디스크립터로 이미지 크기를 명시하는 것이다. 따라서 이미지의 정확한 크기를 확인하고 입력하는 것이 중요하다.

x서술자

• 화소의 밀도에 따른 이미지(물리적으로 디스플레이가 갖는 화소 수)
• 개발자 도구에 window.devicePixelRatio를 입력하면알 수 있다.

	<img 
        srcset="images/1.png 1x, images/2.png 2x"
        src="images/a.png" 
        alt="gray-box">

w서술자

• 원본 이미지의 넓이를 알려줌
• px이 아니라 w로 명시해야한다.

	<img 
        srcset="images/500.png 500w, images/300.png 300w, images/150.png 150w"
        src="images/150.png" 
        alt="gray-box">

이미지 500.png의 넓이는 500px, 300.png의 넓이는 300px, 150.png의 넓이는 150px이라고 브라우저에게 알려주는 것이다.

sizes

• 이미지가 UI안에서 차지할 사이즈
• 실제로 화면에 보여질 이미지 사이즈

	<img 
        srcset="images/500.png 500w, images/300.png 300w, images/150.png 150w"
        sizes="(min-width:960px) 500px, (min-width:640px) 300px, 320px" 
        src="images/150.png" 
        alt="gray-box">

뷰포트가 960px 이상일 때 사진의 크기 500px, 뷰포트가 640px 이상일 때 사진의 크기 500px, 그 이외 기본적으로 사진의 크기 320px으로 보여진다.

고정된 이미지 크기를 유지하려면 width 속성을 추가

	<img 
        srcset="images/500.png 500w, images/300.png 300w, images/150.png 150w"
        sizes="(min-width:960px) 500px, (min-width:640px) 300px, 320px" 
        width="300"
        src="images/150.png" 
        alt="gray-box">

• sizes와 width를 같이 작성 할 경우 width가 우선

주의할 점

• 브라우저가 큰 이미지를 한 번 불러왔으면, 오히려 해상도가 떨어지는 작은 이미지를 또 불러올 필요를 느끼지 못해 뷰포트 크기가 변경되어도 이미지 갱신이 일어나지 않는다.

요약

• x서술자는 디바이스의 화소밀도(pixel density)에 따라 이미지를 로딩하도록 브라우저에 알려준다.
• w서술자는 이미지 넓이를 알려준다.
• 디바이스가 알아서 최적의 컨텐츠를 보여준다.
• 300w == 300px, 600w == 600px, 700w == 700px
• 성능에 따라 로딩하는 것을 다르게 하기 위해서다.
• 크기가 큰 사진부터 작은사진 순서대로 작성해야 작동한다.

참고: https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/