Embedded Content Img

<img>

• <img> 태그는 html 페이지에 이미지를 삽입할 때 사용하는 태그입니다.

src (source)

• <img> 태그는 src라는 필수 속성이 있어야 합니다. src 속성은 브라우저에게 이미지 파일의 위치 및 파일명을 알려줍니다. 큰따옴표 안에 들어가는 경로는 절대경로이거나 상대경로이어야 합니다.

alt (alternative text)

• alt 속성은 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여줍니다. 또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 주기도 합니다.

반응형 이미지를 위한 srcset

• srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있습니다.
• srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성입니다.

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

• x서술자는 화소의 밀도(pixel density)를 나타냅니다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줍니다.

<img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x"
src="a.png"
alt="test">

• Pixel density : 동일한 면적에 들어가는 화소의 수를 의미합니다. 화소의 갯수가 많을수록 더 높은 해상도의 기기임을 알 수 있습니다.
  여러분이 보고있는 화면의 화소 밀도를 알고 싶으시다면 브라우저 api를 이용해서 보실 수 있습니다. 개발자 화면의 콘솔창에서 window.devicePixelRatio 명령어를 입력해보세요.

• w서술자는 원본 이미지의 넓이가 차례대로 300px, 600px, 700px 임을 브라우저에게 알려줍니다. px이 아닌 w로 표기하는것에 주의하세요.

<img
width="200px"
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
src="a.png"
alt="test">

• w서술자와 x서술자는 동시에 사용할 수 없습니다. 또한 src 속성을 유지하는 것은 필수입니다. srcset 을 사용할 수 없는 브라우저(Internet Explorer)를 대비해 사용하는 이미지입니다.

• sizes 속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려줍니다.

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.png"
alt="test">

• 브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈 정보를 통합해 가장 적절한 이미지를 로딩하게됩니다.
• 물론 srcset 속성은 sizes 속성이 없다고 해도 잘 동작하겠지만, 웹표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시되어야 합니다.

• sizes 속성을 사용할 때 주의할 점은 CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있다는 점 입니다. (CSS 스타일이 sizes 속성에 우선합니다.) 협업할 때는 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유합시다.