AVIF（AV1畫像ファイル形式）は、畫像の保存に使用される最新の畫像ファイル形式の仕様であり、JPG、JPEG、PNG、WebPなどの他の形式と比較してファイルサイズを大幅に削減できます。 AVIF仕様バージョン1.0.0は、2019年2月に確定し、Open Media Allianceによってリリースされました。

畫質(zhì)を維持しながら、JPGと比較して50％のファイルサイズ、WebPと比較して20％のファイルサイズを節(jié)約します。

この記事では、AVIF畫像を作成するためのブラウザベースのツールとコマンドラインツールを紹介します。

なぜJPG、PNG、WebP、GIFの代わりにAVIFを選択するのですか？ : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :ただし、この制限をわずかに上回っても構(gòu)いません。

畫像のコンテキストにとって詳細(xì)が重要でない限り、元の畫像と比較して、畫像の明白な詳細(xì)を失うことは許容できます。
• 參照：Addy Osmaniは、Smashing MagazineでAvifとWebpを使用するように分割します。
• ブラウザソリューション

squoosh

squooshは、人気のある畫像圧縮Webアプリケーションであり、複數(shù)形式の畫像をAVIFを含む他の広く使用されている圧縮フォーマットに変換できるようにします。

機(jī)能
2. ファイルサイズ制限：4MB畫像最適化設(shè)定（右に位置する）

ダウンロードコントロール - これには、結(jié)果ファイルのサイズと元の畫像と比較したパーセンテージ削減が含まれますコードは必要ありません。選択した畫像（PNG、JPG、GIFなど）をアップロードするだけで、圧縮バージョンに戻ります。 AVIFイメージの作成に加えて、そのAPIには、畫像の強(qiáng)化や手動畫像の詰め物などの機(jī)能もあります。

無料で速いコンバーターを探しているので、あなたはここにいると思います。したがって、ブラウザソリューションで十分です。

機(jī)能

説明ファイルのサイズ制限

無料使用

• Cloudinary Avif Converter FAQでFAQへの回答を見つけることができます。
• コマンドラインソリューション
• avif-cli
• lovelllのavif-cliを使用すると、フォルダー（PNG、JPEGなど）に保存された畫像を撮影し、指定された縮小サイズのAVIF畫像に変換できます。

以下は要件であり、必要なことです。

<code>npm install avif</code>

ターミナルでコマンドを?qū)g行します：

<code>npx avif --input="./imgs/*" --output="./output/" --verbose</code>

• ./ IMGS/* - すべての畫像ファイルの位置を示します
• ./出力/ - 出力フォルダーの場所を示します

機(jī)能

• 変換速度を設(shè)定できます

AVIF-CLI GitHubページからコマンドの詳細(xì)をご覧ください。

シャープ

Sharpは、共通形式の大きな畫像をより小さく、よりネットワークに優(yōu)しいAVIF畫像に変換するためのもう1つの便利なツールです。

以下は要件と必要なことです。

node.js 12.13.0

ソフトウェアパッケージのインストール：

<code>npm install sharp</code>

という名前の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

および

<code>./imgs/example.jpg</code>

は、畫像を保存したいパスとその名前と

newpath_to_output_image拡張機(jī)能を意味します。たとえば ターミナルでコマンドを?qū)g行します：

<code>/sharp-compressed/compressed-example.avif</code>

それだけです！出力場所に圧縮されたAVIFファイルが必要です！

<code>node sharp-example.js</code>

機(jī)能

無料使用

シャープを使用して、回転、ぼやけ、サイズを変更、収穫、ズーム畫像など
• 參照：Sharpを使用して、node.jsで畫像を処理する方法に関するStanley Uliliの記事。

結(jié)論

Avifは、フロントエンド開発者がプロ??ジェクトで使用することを検討すべきテクノロジーです。これらのツールを使用すると、既存のJPEGおよびPNG畫像をAVIF形式に変換できます。ただし、ワークフローに新しいツールを採用するように、特定のユースケースに基づいてその利點(diǎn)と短所を正しく評価する必要があります。

私と同じようにこの記事を読んで楽しんでいただければ幸いです。どうもありがとうございました。素晴らしい一日をお祈りしております。

以上がAVIF畫像を作成するための便利なツールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。