Web Standard

AV1(.avif) 이미지 파일 포맷 기본적으로 초압축된 이미지 타입이다. 이미 넷플릭스는 JPEG, PNG, 심지어 WebP 이미지 포맷 보다 퀄리티나 압축률이 뛰어난 .avif 를 고려해왔다. Alliance for Open Media 에서 Google, Cisco 및 Xiph.org(Firefox 제작사인 Mozilla와 함께 작업)와 공동 으로 개발했으며, 이 형식은 오픈 소스이고 로열티가없는 이미지 형식으로 만들어졌다. JPEG 및 WebP 와 비교 AVIF는 JPEG, WebP에 비해 이미지 파일 크기를 크게 줄여준다. (JPEG 대비 50%, Webp 대비 20% 절감) 모든 이미지 코덱 지원, 손실/무손실, 알파 채널(투명) 가능, GIF 같은 애니메이션 가능! 하다는 점에서 굉장히 사용폭..

특정 폴더에 있는 png 이미지들을 webp로 변환시켜주는 툴을 만들어 보겠습니다. 간단하게 Node js 로 제작합니다. 우선 프로젝트 폴더를 만들어 주고 $ npm init 으로 프로젝트를 생성합니다. 그 후, 이미지 변환에 필요한 패키지들을 설치해 줍니다. (Global로 설치하셔도 무방합니다.) $ npm install imagemin imagemin-webp --save imagemin : 이미지 미니파이 해주는 툴imagemin-webp : imagemin의 webp 플러그인 설치가 완료 되었으면, /webp.js 파일을 만들어 줍니다. 퀄리티가 75% 이므로 손실이 있습니다. 만약 무손실 옵션을 사용하고 싶다면 로 작성해줍니다. 작성이 완료 되었으면 sources 폴더에 png 이미지 파일들..

개요 webp는 구글에서 발표한 새로운 웹전용 이미지 포맷이다. 기존의 다른 포맷들 보다 더 작게 압축이 가능한 장점이 있다. (동급 퀄리티 대비 png는 26%, jpeg는 34% 까지 감소!) 구글 공식 홈페이지 비디오 포맷인 VP8에서 파생되었으며 동영상 사이즈를 줄이는 webM 프로젝트가 webP까지 확장된 사례다. 비교 1. PNG (964kb) 2. JPG (459kb) 53% 감소 3. webP (49kb) 95% 감소! webP의 경우 원본을 75% 퀄리티로 압축 제작하였으나, 육안으로 구분 힘든 높은 퀄리티를 보여주었다. 용량은 무려 95% 감소!! 놀랍지 않은가? 제작방법 그렇다면 이 webP 파일은 어떻게 제작할 수 있을까? 아쉽게도 포토샵등 그래픽 소프트웨어에서 아직 지원되지 않는다..