AVIF画像を作成するための便利なツール

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

画質を維持しながら、JPGと比較して50％のファイルサイズ、WebPと比較して20％のファイルサイズを節約します。

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

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

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

squoosh

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

機能
2. ファイルサイズ制限：4MB画像最適化設定（右に位置する）

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

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

機能

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

無料使用

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

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

<code>npm install avif</code>

ターミナルでコマンドを実行します：

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

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

機能

• 変換速度を設定できます

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

シャープ

Sharpは、共通形式の大きな画像をより小さく、よりネットワークに優しい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拡張機能を意味します。たとえば ターミナルでコマンドを実行します：

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

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

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

機能

無料使用

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

結論

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

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

以上がAVIF画像を作成するための便利なツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。