<img>

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

src (source)

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

alt (alternative text)

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

<img src="img/a.jpg" alt="이미지 없음">
<img src="img/a.jpg" alt="">
<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">

반응형 이미지를 위한 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">

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

</aside>