점진적 향상기법이란? / 이미지 포맷의 종류

점진적 향상기법

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

 

예시

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

 

작동방법

 

1. 웹 브라우저가 위에서부터 차례대로 내려오며 지원 가능한 포맷인지 탐색한다. (그래서 맨 위에게 가장 성능이 좋으며 효율적인 최신 기술임)
2. 내려오며 지원 가능한 것을 택한다.
3. 아무것도 지원하지 않을 경우, 기본 이미지를 택한다. (여기서의 babies.jpeg)

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

---

이미지 포맷의 종류

 

GIF(Graphics Interchange Format): 

256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듬. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능함. 애니메이션 처리가 가능함. 보통 meme들이 이 포맷인 경우가 많음.

 

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% 수준인 용량을 자랑하는 차세대 이미지 포맷. 아직 지원하지 않는 브라우저가 많음에 주의해야 함.