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 요소와 함께 사용하는 것! 이러한 방식의 크로스브라우징 기법을 점진적 향상기법 이라고 한다.

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

💡이미지 포맷 종류

종류	줄임말	설명
GIF	Graphics Interchange Format	256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.
JPG/JPEG	Joint Photographic Expert Group image	매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.
PNG	Portable Network Graphics	왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.
SVG	Scalable Vector Graphics	SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.
WebP	Web Picture Format	압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.
AVIF	AV1 Image File Format	WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.

|