점진적 향상기법이란? / 이미지 포맷의 종류
점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법.
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>
- 웹 브라우저가 위에서부터 차례대로 내려오며 지원 가능한 포맷인지 탐색한다. (그래서 맨 위에게 가장 성능이 좋으며 효율적인 최신 기술임)
- 내려오며 지원 가능한 것을 택한다.
- 아무것도 지원하지 않을 경우, 기본 이미지를 택한다. (여기서의 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% 수준인 용량을 자랑하는 차세대 이미지 포맷. 아직 지원하지 않는 브라우저가 많음에 주의해야 함.
Author And Source
이 문제에 관하여(점진적 향상기법이란? / 이미지 포맷의 종류), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@koreanhamster/점진적-향상기법이란-이미지-포맷의-종류저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)