Embedded content

<img> 태그

• 이미지를 삽입할 때 사용하는 태그

src(source)

• 닫는 태그가 없음
• 안에 컨텐츠를 넣을 수가 없음, 자식 요소로 컨텐츠를 추가할 수 없음

이미지 경로

• 절대 경로: src=/images/peng.png"
• 상대 경로: src=./images/peng.png"
  /는 루트를 의미함, './' 현재 거기 '../' 하나 밖

alt(alternative text)

• 이미지가 보이지 않을 때 속성에 적힌 텍스트를 이미지 대신 보여줌
• 화면에 보여주지 않음
• SEO(Search Engine Optimization)에 도움을 주기도 함(브라우저에 이미지에 대한 정보를 전달함) -> ex. 고양이라는 단어를 검색 했을 때 alt 속성에 고양이가 포함되어있으면 검색 결과에 포함될 수 있도록 함
• 스크린 리더가 읽을 필요가 없는 이미지는 alt="" 상태로 넣어줄 것, 만약 넣어주지 않는다면 파일명을 읽게 된다(src="peng.png")

반응형 이미지를 위한 srcset

• 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있음
• 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용함, 브라우저에게 이미지의 선택권을 위임하는 속성

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

1. x서술자

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

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

1픽셀에 2개의 화소가 들어가면 logo_1.png 이미지를 넣어주고
1픽셀에 3개의 화소가 들어가면 logo_2.png 이미지를 넣는다.

• pixel density : 동일한 면적에 들어가는 화소의 수, 콘솔 창에 window.devicePixelRatio 명령어를 입력하면 화소의 수를 확인할 수 있다.
  -> 특정 브라우저에는 정해진 것만 보여주게 되는 것

2. 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 사용할 수 없는 브라우저가 있을 수 있기 때문에 src속성을 필수적으로 사용해줘야한다.

3. sizes

• 뷰포트의 조건에 따라 이미지가 UI 안에서 차지하게 될 사이즈를 브라우저에게 알려준다

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px, //960이상이면  250px
			 (min-width: 620px) 150px, //620이상이면 150px로 표시
			 300px"//둘다 아니면(620 미만이면) 300px으로 표시해라
src="a.png"
alt="test">

-제공한 이미지의 원본 사이즈(srcset속성)와 뷰 포트에 따른 이미지 사이즈 정보(sizes)를 통합해 가장 적절한 이미지를 로딩한다.

주의할점 CSS를 통한 이미지 사이즈를 컨트롤 하는 방법(반응형)과 충돌할 수 있기 때문에 협업 전 어떠한 방법으로 반응형 이미지를 처리했는지 공유할 것!

<picture> 태그

• picture 요소는 source 요소와 img 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소
• img 요소의 srcset이 화면에 따른 이미지 크기를 조절한다면, picture 요소는 이미지 포맷 자체를 변경 할 수 있다.

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

• 위 코드에서 화면 사이즈가 960 이상이면 babies_larget.jpeg를 보여줄 것이고,
  620 이상이면 babies.jpeg를 보여줄 것이다. 만약 둘다 해당하지 않는다면 Img 태그의 babies_small.jpeg를 보여줄 것이다

media 속성

• picture 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾게 된다.
• 조건에 맞는 source 요소 안에 srcset 속성값을 값을 찾아 img 태그의 src에 넣어 화면에 보여준다.
  -> 그렇기 때문에 img 요소가 없다면 이미지가 화면에 나타나지 않는 점을 주의(picture 태그 내에서 img 자식 코드는 필수!!)
• picture와 source 요소 자체는 이미지를 표현하지 않는다.

type 속성

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>

• 위에서 부터 차례대로 브라우저가 지원하는 포맷인지 탐색하여 지원하지 않으면 다음 source 요소로 넘어간다.
• 만약 모든 source 요소의 이미지 사용이 불가능하면 img 요소의 이미지를 랜더링한다.
• 그렇기 때문에 Webp이나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스 브라우징( 여러 브라우저에서도 대부분 정상적으로 작동될 수 있도록, safari, chrome, firefox 등등) picture요소와 함께 사용하는 것이 좋다.
• 그렇게 해야 최신 포맷의 이미지를 지원하지 않는 브라우저에서 접근했을 떄 img 태그에 있는 요소라도 보여주어 사용자의 불편함을 감소시킬 수 있기 때문이다.
• 새로운 기술을 쓰기 전에 여러 사용자들의 다양한 브라우저 환경을 확인해야한다. 그렇기 때문에 picture 요소와 함께 사용하는 것! 이러한 방식의 크로스브라우징 기법을 점진적 향상기법 이라고 한다.

💡점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법

💡이미지 포맷 종류

|