👩🏻‍💻[이미지 포맷과 점진적 향상기법]

✔️ 점진적 향상기법

 

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

 

-  브라우저가 차례대로 지원하는 포맷인지 탐색하여 만약 지원하지 않는 포맷이라 판단되면 다음요소로 넘어가며 사용하는 기법 

 

ex) type속성

 

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

1. 위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색한다

2. 만약 지원하지 않는 포맷이라고 판단되면 다음 source로 넘어간다

3. 만약 모든 source 요소의 이미지 사용이 불가능 하다면 <img>요소의 이미지를 랜더링한다.

 

(WebP나 AVIF와 같은 최신 포맷의 이미지를 지원하고싶다면 크로스브라우징을 위해 <picture>요소와 함께 사용하는것이 좋다.)

 

 

 

✔️ 이미지 포맷의 종류

 

🥲 GIF : 256색의 컬러만 표현가능하여 선명하진 않지만 용량은 적게 듬

         투명표현 정도 조절 X , 그림자표현 X , 에니메이션처리 O

 

 

🥲 JPG/JPEG :  매우 화소가 높고 , 용량은 적지만 투명처리 불가능

 

 

🥲 PNG : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큼

 

 

🥲 SVG : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능

 

 

🥲 WebP : JPEG에 비해 용량은 70% 수준으로 낮지만 더 뛰어난 색상 지원

               PNG처럼 투명도 표현 가능 , GIF처럼 애니메이션 표현 가능

               (== 만능포맷)

 

 

🥲 AVIF : WebP처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 가능

             JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷

             (지원하지 않는 브라우저가 많음)