AVIF 이미지를 만드는 데 유용한 도구
이미지 품질을 유지하는 동안 JPG에 비해 50% 파일 크기와 웹에 비해 파일 크기가 50% 절약됩니다. 이 기사는 AVIF 이미지를 만들기위한 일부 브라우저 기반 도구 및 명령 줄 도구를 소개합니다.
왜 JPG, PNG, Webp 및 GIF 대신 AVIF를 선택합니까? : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : 그러나이 한계를 약간 높게해도 괜찮습니다.이미지의 컨텍스트에 세부 사항이 중요하지 않은 한, 원본 이미지와 비교하여 이미지에서 명백한 세부 사항을 잃어버린 것은 허용됩니다.
참조 : Addy Osmani는 Smashing Magazine에서 AVIF 및 Webp를 사용하는 데 중점을 둡니다.
브라우저 솔루션
squoosh- Squoosh는 AVIF를 포함하여 여러 형식의 다른 형식으로 이미지를 다른 형식으로 변환 할 수있는 인기있는 이미지 압축 웹 응용 프로그램입니다. 기능
- 파일 크기 한계 : 4MB
- 이미지 최적화 설정 (오른쪽에 위치)
- 다운로드 컨트롤 - 여기에는 결과 파일의 크기를 보며 원래 이미지와 비교하여 코드가 필요하지 않습니다. 선택한 이미지 (PNG, JPG, GIF 등)를 업로드하면 압축 버전으로 돌아갑니다. API에는 AVIF 이미지를 만드는 것 외에도 이미지 향상 및 수동 이미지 충전과 같은 더 많은 기능이 있습니다. 나는 당신이 무료 및 빠른 변환기를 찾고 있기 때문에 당신이 여기 있다고 믿습니다. 따라서 브라우저 솔루션으로 충분해야합니다.
특징
- 설명 없음 설명 파일 크기 제한
- 무료 사용 Cloudinary Avif 변환기 FAQ에서 FAQ에 대한 답변을 찾을 수 있습니다. Command Line 솔루션 avif-cli
다음은 요구 사항과해야 할 일입니다.
node.js 12.13.0
패키지 설치 :
<code>npm install avif</code>
로그인 후 복사
터미널에서 명령을 실행하십시오
모든 이미지 파일의 위치를 나타냅니다.
./ output/ - 출력 폴더의 위치 가 나타납니다.
<code>npx avif --input="./imgs/*" --output="./output/" --verbose</code>
로그인 후 복사
특징 -
-
는 변환 속도를 설정할 수 있습니다
Avif-Cli Github 페이지를 통해 명령에 대해 자세히 알아볼 수 있습니다.
샤프
Sharp는 공통 형식의 대형 이미지를 더 작고 네트워크 친화적 인 AVIF 이미지로 변환하는 또 다른 유용한 도구입니다.
다음은 요구 사항과해야 할 일입니다.
node.js 12.13.0 -
소프트웨어 패키지 설치 :
-
라는 JavaScript 파일을 만들고이 코드를 복사하십시오.
여기서 는 이미지의 경로, 이름 및 확장자를 나타냅니다.
및 는 이미지를 저장하려는 경로와 이름과 new 확장자를 의미합니다.
터미널에서 명령을 실행하십시오
그게 다야! 출력 위치에 압축 AVIF 파일이 있어야합니다!
특징
무료 사용
Sharp를 사용하여 회전, 흐리기, 크기 조정, 자르기, 줌 이미지 등을 사용하십시오.
-
참조 : Sharp를 사용하여 Node.js에서 이미지를 처리하는 방법에 대한 Stanley Ulili의 기사.
결론
AVIF는 프론트 엔드 개발자가 프로젝트에서 사용하는 것을 고려해야하는 기술입니다. 이 도구를 사용하면 기존 JPEG 및 PNG 이미지를 AVIF 형식으로 변환 할 수 있습니다. 그러나 워크 플로에서 새로운 도구를 채택하는 것과 같이 특정 사용 사례에 따라 장점과 단점을 올바르게 평가해야합니다.
나는 당신이 나 만큼이 기사를 읽는 것을 즐기시기 바랍니다. 시간을 내 주셔서 대단히 감사하고 좋은 하루를 기원합니다!
<code>npm install avif</code>
모든 이미지 파일의 위치를 나타냅니다.
<code>npx avif --input="./imgs/*" --output="./output/" --verbose</code>
- 특징
Avif-Cli Github 페이지를 통해 명령에 대해 자세히 알아볼 수 있습니다.
샤프
Sharp는 공통 형식의 대형 이미지를 더 작고 네트워크 친화적 인 AVIF 이미지로 변환하는 또 다른 유용한 도구입니다.
-
라는 JavaScript 파일을 만들고이 코드를 복사하십시오.
는 이미지의 경로, 이름 및 확장자를 나타냅니다.
및는 이미지를 저장하려는 경로와 이름과 new 확장자를 의미합니다.
그게 다야! 출력 위치에 압축 AVIF 파일이 있어야합니다!
특징
- 무료 사용
-
참조 : Sharp를 사용하여 Node.js에서 이미지를 처리하는 방법에 대한 Stanley Ulili의 기사.
위 내용은 AVIF 이미지를 만드는 데 유용한 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

이번 주에 플랫폼 뉴스 라운드 업 RONDUP, Chrome은로드에 대한 새로운 속성, 웹 개발자를위한 접근성 사양 및 BBC Move를 소개합니다.

이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다

구매 또는 빌드는 기술 분야의 고전적인 논쟁입니다. 신용 카드 청구서에 라인 항목이 없기 때문에 물건을 구축하는 것이 저렴할 수 있지만

한동안 iTunes는 팟 캐스팅에서 큰 개 였으므로 "Podcast 구독"을 링크 한 경우 다음과 같습니다.

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석
