AVIF(AV1 이미지 파일 형식) 는 JPG, JPEG, PNG 및 WebP와 같은 다른 형식과 비교할 때 훨씬 더 많은 파일 축소를 제공하는 이미지를 저장하기 위한 최신 이미지 파일 형식 사양입니다. AVIF 사양의 버전 1.0.0은 2019년 XNUMX월에 완료되었으며 Alliance for Open Media에서 일반에 공개했습니다.
이 기사에서는 AVIF 이미지를 만들기 위한 몇 가지 브라우저 기반 도구와 명령줄 도구에 대해 배웁니다.
JPG, PNGS, WebP 및 GIF보다 AVIF를 사용하는 이유는 무엇입니까?
- 무손실 압축 및 손실 압축
- JPEG는 끔찍한 밴딩으로 고통받습니다.
- WebP가 훨씬 낫지만 AVIF에 비해 여전히 눈에 띄는 막힘이 있습니다.
- 다중 색 공간
- 8, 10, 12비트 색심도
주의 사항
Jake Archibald가 쓴 기사 몇 년 전 이 새로운 이미지 형식에 대해 설명하고 이미지 압축의 몇 가지 단점을 식별하는 데 도움이 되었습니다. 일반적으로 AVIF로 압축할 때 다음 두 가지를 확인해야 합니다.
- 사용자가 페이지 컨텍스트에서 이미지를 보고 압축으로 인해 이미지가 보기 흉하다면 해당 압축 수준은 허용되지 않습니다. 그러나 그 경계 위의 작은 노치 하나는 괜찮습니다.
- 이미지가 원본에 비해 눈에 띄는 디테일을 잃어도 괜찮습니다. 그 세부 사항이 이미지의 맥락에 중요하지 않는 한.
참조 : Smashing Magazine의 Addy Osmani는 AVIF 및 WebP 사용에 대해 자세히 설명합니다..
브라우저 솔루션
Squoosh
Squoosh 는 다양한 형식의 이미지를 AVIF를 포함하여 널리 사용되는 다른 압축 형식으로 변환할 수 있는 인기 있는 이미지 압축 웹 앱입니다.
특징
- 파일 크기 제한: 4MB
- 이미지 최적화 설정(오른쪽에 있음)
- 다운로드 컨트롤 – 여기에는 결과 파일의 크기와 원본 이미지의 축소 비율 확인이 포함됩니다.
- 무료로 사용할 수
AVIF.io
아비프.io 어떤 형태의 코드도 필요로 하지 않는 이미지 도구입니다. 선택한 이미지를 PNG, JPG, GIF 등으로 업로드하기만 하면 압축된 버전이 반환됩니다.
특징
- 전환 설정(업로드 배너의 오른쪽 상단에 있음)
- 무료로 사용할 수
에서 질문에 대한 답변을 찾을 수 있습니다. AVIF.io FAQ 페이지.
명령줄 솔루션
avif-cli
avif-cli by Lovell 폴더에 저장된 이미지(PNG, JPEG 등)를 가져와서 지정한 축소 크기의 AVIF 이미지로 변환할 수 있습니다.
다음은 요구 사항과 수행해야 할 작업입니다.
- Node.js 12.13.0+
패키지 설치:
npm install avif터미널에서 다음 명령을 실행합니다.
npx avif --input="./imgs/*" --output="./output/" --verbose./imgs/*– 모든 이미지 파일의 위치를 나타냅니다../output/– 출력 폴더의 위치를 나타냅니다.
특징
- 무료로 사용할 수
- 변환 속도를 설정할 수 있습니다
다음을 통해 더 많은 명령에 대해 알아볼 수 있습니다. avif-cli GitHub 페이지.
날카로운
날카로운 는 일반적인 형식의 큰 이미지를 더 작고 웹 친화적인 AVIF 이미지로 변환하는 또 다른 유용한 도구입니다.
다음은 요구 사항과 수행해야 할 작업입니다.
- Node.js 12.13.0+
패키지 설치:
npm install sharp라는 이름의 JavaScript 파일을 만듭니다. sharp-example.js 이 코드를 복사하십시오 :
const sharp = require('sharp')
const convertToAVIF = () => {
sharp('path_to_image')
.toFormat('avif', {palette: true})
.toFile(__dirname + 'path_to_output_image')
}
convertToAVIF()어디에 path_to_image 이름과 확장자를 사용하여 이미지 경로를 나타냅니다. 예:
./imgs/example.jpgAudiencegain과 path_to_output_image 이미지가 이름과 함께 저장되기를 원하는 경로를 나타냅니다. 확장자, 즉:
/sharp-compressed/compressed-example.avif터미널에서 다음 명령을 실행합니다.
node sharp-example.js거기! 출력 위치에 압축된 AVIF 파일이 있어야 합니다!
특징
- 무료로 사용할 수
- 다음을 사용하여 이미지를 회전, 흐리게, 크기 조정, 자르기, 크기 조정 등을 할 수 있습니다.
sharp
참조: Stanley Ulili의 기사 Sharp를 사용하여 Node.js에서 이미지를 처리하는 방법.
결론
AVIF는 프론트 엔드 개발자가 프로젝트에 대해 고려해야 하는 기술입니다. 이러한 도구를 사용하면 기존 JPEG 및 PNG 이미지를 AVIF 형식으로 변환할 수 있습니다. 그러나 워크플로에 새로운 도구를 채택할 때와 마찬가지로 특정 사용 사례에 따라 이점과 단점을 적절하게 평가해야 합니다.
내가 이 글을 쓰면서 즐거웠던 만큼 당신도 이 글을 읽는 것을 즐겼기를 바랍니다. 시간 내주셔서 감사합니다. 앞으로 좋은 하루 보내시기 바랍니다!
