CSS 이미지 보충

<img>

html 페이지에 삽입되는 <img> 태그는 src와 alt 속성이 들어간다.
⚠️ alt는 필수 속성은 아니지만, 접근성과 SEO 등을 고려하였을 때 꼭 넣어주어야 한다.

srcset 속성

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

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

📌 추가 정보
화소 : 화면을 구성하는 최소 단위 , pixel
pixel density : 동일한 면적에 들어가는 화소의 수, 화소의 갯수가 많을수록 더 높은 해상도를 가진다. (window.devicePixelRatio 명령어로 확인이 가능하다.)

▪️ w 서술자
w 서술자는 원본 이미지의 넓이를 차례대로 알려준다. 이 정보를 통해 브라우저에게 현재 사용자 환경에 따른 가장 적절한 이미지를 로딩한다. w 서술자가 적용되면 이미지 크기는 기본적으로 뷰포트의 100%를 차지하려고 한다.
⚠️ 넓이가 300px 이면 300w 로 표기하여야 한다.

⚠️ x 서술자와 w 서술자는 동시에 사용할 수 없다.
⚠️ src 속성을 유지하고 사용하여야 한다. (이때 src는 사용할 수 없는 브라우저를 대비하고, 기본 값의 역할을 한다.)

▪️ sizes 속성
뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에게 알린다. 조건에 따른 이미지의 크기를 설정함과 동시에 w 서술자에 더해 브라우저에게 이미지를 선택할 수 있는 힌트를 준다.
→ 브라우저는 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지 사이즈 정보를 통합하여 가장 적잘한 이미지를 로딩한다.

sizes 속성이 없어도 srcset 속성은 잘 동작하지만, 웹 표준을 준수하기 위해서는 srcset과 sizes 속성이 같이 명시되어야 한다.

✔️ 브라우저는 네트워크 속도, 이미지의 용량, 화면의 해상도 등의 조건을 고려하여 최적의 이미지를 결정하기 때문에 브라우저에게 맡기는 것이 좋다.

⚠️ sizes 속성과 css를 통한 이미지 사이즈 컨트롤 방법이 충돌할 수 있는데, 이땐 css 스타일이 우선 되어 반응형 이미지 처리 시 고려되어야한다.

<picture>

picture 요소는 source 요소와 img 요소를 통해 각기 다른 디스플레이/디바이스에 따라 조건에 맞는 이미지를 보여주는 요소이다.

• img 요소의 srcset이 같은 이미지 중 가장 적절한 하나를 선택한다면 picture 요소는 여러 다른 종류의 이미지 중 하나를 선택할 때 사용한다.

✔️ media 속성

<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>

picture 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾는다.
source 요소 안의 srcset 속성 값을 찾아 img 태그의 src에 넣어 화면에 보여준다.
👉 그렇기 때문에 img 요소가 필수로 삽입되어 있어야 한다.

✔️ 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와 같은 최신 포맷 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소를 함께 사용하는 것이 좋다.

이러한 크로스브라우징 기법을 점진적 향상기법 이라고 한다.

📌 크로스 브라우징(Cross Browsing)

• 웹페이지의 상호 호환성
• 웹브라우저에 100% 똑같이 보이게 하는 것이 아니다.
  
  Cross Browsing 이란
  적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말한다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미한다.
  - Cross Browsing 가이드

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