AVIF画像を作成するための便利なツール-CSSチュートリアル-php.cn

squoosh

機能

シャープ

無料使用

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Joseph Gordon-Levitt

Mar 08, 2025 am 09:34 AM

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を含む他の広く使用されている圧縮フォーマットに変換できるようにします。

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

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

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

Useful Tools for Creating AVIF Images

機能

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

無料使用

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つの便利なツールです。

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

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

<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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Laravel チュートリアル

1601

PHP チュートリアル

1503

276

Related knowledge

ディスプレイの違いは何ですか：インライン、ディスプレイ：ブロック、ディスプレイ：インラインブロック？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay：インライン、ブロック、およびinline-blockinhtml/cssarelayoutbehavior、spaceusage、andstylingcontrol.1.inlineelementsflowwithtext、notstartonnewlines、nagrorewidth/height、height、andonlyhorizontalpadddddddddddddddding

スタイリングは、CSSとは異なるリンクを訪問しました Jul 11, 2025 am 03:26 AM

アクセスしたリンクのスタイルを設定すると、特にコンテンツ集約型のWebサイトでユーザーエクスペリエンスを向上させることができ、ユーザーがより良いナビゲートを支援します。 1。CSSを使用してください：訪問した擬似クラスは、色の変化などの訪問されたリンクのスタイルを定義します。 2。ブラウザは、プライバシーの制限により、いくつかの属性の変更のみを許可することに注意してください。 3.突然の状態を避けるために、色の選択は全体的なスタイルと調整する必要があります。 4.モバイル端子はこの効果を表示しない場合があり、アイコン補助ロゴなどの他の視覚的なプロンプトと組み合わせることをお勧めします。

CSSクリップパスでカスタムシェイプを作成します Jul 09, 2025 am 01:29 AM

CSSのクリップパス属性を作物要素に使用して、写真やSVGに依存することなく、三角形、円形ノッチ、ポリゴンなどのカスタム形状になります。その利点には、次のものが含まれます。1。円、楕円、ポリゴンなどのさまざまな基本的な形状をサポートします。 2。レスポンシブ調整とモバイル端子に適応可能。 3.アニメーションが簡単で、HoverまたはJavaScriptと組み合わせて動的効果を実現できます。 4.レイアウトフローには影響せず、ディスプレイエリアのみを収穫します。一般的な使用法は、円形のクリップパス：円（50pxatcenter）および三角クリップパス：ポリゴン（50％0％、100 0％、0 0％）などです。知らせ

CSSを使用して応答性のある画像を作成する方法は？ Jul 15, 2025 am 01:10 AM

CSSを使用してレスポンシブ画像を作成するには、主に次の方法で達成できます。1。最大幅を使用してください：100％と高さ：自動化して、割合を維持しながら画像がコンテナ幅に適応できるようにします。 2。HTMLのSRCSETおよびサイズの属性を使用して、異なる画面に適合した画像ソースをインテリジェントにロードします。 3.オブジェクトフィットとオブジェクトポジションを使用して、画像のトリミングとフォーカスディスプレイを制御します。一緒に、これらの方法により、画像がさまざまなデバイスで明確かつ美しく表示されるようになります。

一般的なCSSブラウザの矛盾とは何ですか？ Jul 26, 2025 am 07:04 AM

さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。

「不透明度」プロパティを説明してください Jul 15, 2025 am 01:23 AM

不透明度は、0（完全に透明）から1（完全に不透明）の範囲の値を持つ、要素の全体的な透明性を制御するCSSの属性です。 1.イメージホバーフェード効果によく使用され、不透明な遷移を設定することでインタラクティブエクスペリエンスを強化します。 2。テキストの読みやすさを改善するための背景マスクレイヤーを作成します。 3.障害状態のコントロールボタンまたはアイコンの視覚的フィードバック。指定された色部分のみに影響するRGBAとは異なり、すべての子供要素に影響を与えることに注意してください。スムーズなアニメーションは移行とともに実現できますが、頻繁に使用するとパフォーマンスに影響を与える可能性があります。 Will-ChangeまたはTransformと組み合わせて使用することをお勧めします。不透明度を合理的に適用すると、ページの階層と対話性が向上しますが、ユーザーとの干渉を避ける必要があります。

アクセントカラーのプロパティとは何ですか？ Jul 26, 2025 am 09:25 AM

Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します

`：has（）` pseudo-class（parent selector）を説明する Jul 15, 2025 am 12:32 AM

：has has（）pseudo-classincsSallowStargetingAparentelementBasedOnitsChildElements.itworksbyusingthesyntaxparent：has has has has（child-selector）toapplystylescample、forexample、div：appliestytylestoadianmage.multelectorectorscomma

See all articles

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

squoosh

機能

シャープ

無料使用

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック