차세대 이미지 형식 WebP와 AVIF

WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다.

WebP

Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다.

장점

  • 더 작은 파일 크기
    JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 수 있다.
  • 투명도 지원
    PNG와 마찬가지로 투명도를 지원하며, 무손실 압축으로도 투명도를 제공할 수 있다.
  • 애니메이션 지원
    GIF와 유사하게 애니메이션을 지원하지만, 파일 크기는 훨씬 작다.

단점

  • 호환성 문제
    모든 브라우저와 이미지 뷰어에서 완전히 지원되지는 않는다. 그러나 최근에는 많은 브라우저가 WebP를 지원한다.
  • 변환 시간
    JPEG나 PNG에 비해 변환 시간이 길 수 있다.

AVIF

AOMedia Video 1(AV1) 코덱을 기반으로 한 이미지 포맷으로, 2019년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다.

장점

  • 더 뛰어난 압축 효율성
    WebP보다 더 나은 압축 효율성을 제공하여, 동일한 이미지 품질에서 파일 크기를 약 50%까지 줄일 수 있다.
  • 고화질 이미지
    높은 다이나믹 레인지(HDR) 이미지와 더 높은 색 깊이(10비트 이상)를 지원한다.
  • 투명도 및 애니메이션 지원
    WebP와 마찬가지로 투명도와 애니메이션을 지원한다.

단점

  • 호환성 문제
    WebP보다 지원하는 브라우저와 도구가 적다. 그러나 주요 브라우저들은 점차 AVIF 지원을 추가하고 있다.
  • 변환 시간
    AVIF 이미지의 인코딩 및 디코딩 시간이 더 길어질 수 있다.

비교

AVIF가 WebP보다 더 작은 파일 크기를 제공하는 경향이 있다. AVIF는 더 나은 이미지 품질과 색 표현을 제공할 수 있다. WebP가 현재 더 널리 지원되지만, AVIF의 지원도 빠르게 확산되고 있다.

웹사이트나 애플리케이션의 성능을 최적화하기 위해 이미지 포맷을 선택할 때, WebP와 AVIF는 모두 유용한 옵션이다. 각각의 장단점을 고려하여 프로젝트의 요구 사항에 가장 적합한 포맷을 선택하는 것이 중요하다. 예를 들어, 최대 호환성을 원한다면 WebP를 선택할 수 있고, 최고의 압축 효율성과 이미지 품질을 원한다면 AVIF를 선택하는 것이 좋다.

2024년 6월 현재, 브라우저 지원 현황은 다음과 같다.

브라우저 WebP 지원 버전 AVIF 지원 버전
Google Chrome 17 이상 85 이상
Mozilla Firefox 65 이상 93 이상
Microsoft Edge 79 이상 (Chromium)  85 이상 (Chromium)
Opera 11.10 이상 71 이상
Safari (macOS) 11 이상 (Big Sur) 13 이상 (Ventura)
Safari (iOS) 14 이상 16 이상
Android Browser 4.0 이상 -
Google Chrome for Android 모든 버전 85 이상
Mozilla Firefox for Android 68 이상 93 이상
Microsoft Edge for Android 모든 버전 85 이상
Opera Mobile 12.1 이상 60 이상

 

같은 카테고리의 다른 글
SASS / 변환 스타일 - nested, expanded, compact, compressed

SASS / 변환 스타일 - nested, expanded, compact, compressed

변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...

다음 웹마스터 도구 베타에 사이트 등록하는 방법

다음 웹마스터 도구 베타에 사이트 등록하는 방법

카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...

차세대 이미지 형식 WebP와 AVIF

WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다. WebP Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다. 장점 더 작은 파일 크기 JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 ...

Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기

Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기

Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before {   content: "\f105"; } 기본 마커 없애기 순서 ...

cwebp를 이용하여 이미지를 WebP 형식으로 변환하는 방법

JPG, PNG 등의 이미지를 WebP 형식으로 변환하는 방법은 여러 가지가 있습니다. 그 중 구글이 제공하는 cwebp라는 프로그램으로 변환하는 방법을 알아보겠습니다. 다운로드 아래의 링크에서 다운로드를 할 수 있습니다. https://developers.google.com/speed/webp/docs/precompiled?hl=ko Windows용, Linux용, macOS용을 제공하고 있으니, 사용하는 OS에 맞게 다운로드합니다. 여기서는 Windows용으로 설명합니다. 압축 풀기 Windows용 파일을 다운로드한 후 압축을 풉니다. 압축만 풀면 되고, 설치는 따로 할 필요가 없습니다. D:\cwebp에 압축을 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux

SASS / Mixin 정의하고 사용하기

SASS / Mixin 정의하고 사용하기

Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name {   // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) {   // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...