한눈에 보는 정의
AV1 영상 압축 기술을 쓰는 이미지 형식. 같은 화질에서 JPG보다 훨씬 작은 파일을 만들 수 있다.
이런 말로 들어요
- 메인 배너는 AVIF로 주고, 안 되는 브라우저는 WebP로 보이게 했습니다.
- AVIF로 바꾸니 용량은 줄었는데 변환 시간이 오래 걸리네요.
그림으로 보기
AVIF는 같은 화질에서 더 작은 파일을 만들 수 있지만 변환이 느릴 수 있어, WebP·JPG 대체 이미지와 함께 씁니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
AVIF는 WebP보다 나중에 나온 이미지 형식으로, 압축 효율이 높아 사진 용량을 크게 줄일 수 있습니다. web.dev 글은 콘텐츠와 설정에 따라 JPG보다 50% 넘게 줄어든 사례가 있다고 소개합니다. 다만 저장(인코딩)에 시간이 더 걸리고, 아주 오래된 브라우저는 보여 주지 못할 수 있습니다. 그래서 AVIF를 먼저 주고 안 되면 WebP나 JPG로 대신 보여 주는 방식을 함께 씁니다.
실무 예시
예를 들어 큰 배경 사진은 picture 요소로 AVIF, WebP, JPG를 순서대로 넣어 두면 브라우저가 볼 수 있는 가장 가벼운 형식을 골라 보여 줍니다.
함께 살펴볼 점
압축을 너무 세게 하면 피부·하늘 같은 부드러운 부분에 얼룩이 생깁니다. 형식별 결과를 실제 화면에서 비교하고, 원본은 따로 보관합니다.
AI에게 이렇게 요청해 보세요
메인 배너 이미지를 picture 요소로 AVIF → WebP → JPG 순서의 대체 이미지를 갖게 바꿔 줘. 가로세로 크기를 적어서 화면이 밀리지 않게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Serve AVIF images / Using AVIF to compress images on your site - web.dev 새 창
콘텐츠·설정에 따라 JPG 대비 50% 이상 절감 사례가 있다는 설명을 확인했습니다.
자료 확인 - Image file type and format guide - MDN 새 창
AVIF가 AV1 기반의 로열티 없는 형식으로 PNG·JPG보다 압축이 좋다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정