ブログ/ 画像
画像・実践ガイド

PNG、JPG、WebP: 各画像に適切な形式を選択します

画像形式を比較し、写真やキャプチャ内の透明性の損失、巨大なファイル、アーティファクトを回避します。

置くファビアーノ・フレイタス· · 2 分で読めます
PNG、JPG、および WebP エディトリアル イラスト: 各画像に適切な形式を選択します
FileBito編集イラスト

ブランドは背景が透明なロゴを提出しましたが、変換されたバージョンは白い四角形の中に表示されます。通常、問題は選択した形式にあります。 PNG、JPG、WebP はさまざまなニーズに対応します。宛先を考えずに変換すると、すでに行われた作業に悪影響を及ぼす可能性があります。

写真と描画には同じ圧縮は必要ありません

JPG は写真を効率的に圧縮しますが、透明度は維持されません。 PNG は可逆圧縮でアウトラインを保持するため、ロゴやスクリーンショットでよく使われます。 WebP は、エクスポート モードに応じて、適切なサイズと透明性を組み合わせることができます。使用画像を変換するバージョンを生成し、ファイルを受け取るシステムとの互換性を確認します。

サイズが小さい画像でも、PNG として保存された大きな写真領域が含まれている場合は、重さが大きくなる可能性があります。逆に、細い線のテキストを低品質で JPG に変換すると、ぼやける場合があります。すべてに対応できる単一の理想的な形式はありません。

さまざまな色の背景を確認してください

png、jpg、webp の 3 つのステップ: 各画像に適切な形式を選択します
このタイプのファイルを確認する手順と注意点。

マークまたはアイコンを配信する前に、結果をグレーと黒で開き、透明度が維持されているかどうかを確認します。色の変化と最終的なサイズにも注目してください。インターネット上に公開する場合は、実際に使用するブラウザやプラットフォームでテストしてください。

不可逆変換を繰り返さないでください

圧縮を使用して新しい JPEG をエクスポートするたびに、品質が低下する可能性があります。オリジナルを適切な形式で保存し、そこから最終バージョンを生成します。みたいな名前ロゴ-transparente.webpチームが内容から推測することなく目的を特定するのに役立ちます。

形式によっても読者の目に見えるものが変わる可能性があります

背景が透明なロゴは、あるプログラムでは正しく開きますが、別のプログラムでは予期せず暗い背景が表示されます。これは、エクスポート中に透明度が低下したために発生する場合があります。他の場合には、ビューアが画像の背後に異なる色を使用していることもあります。起源を特定するには、ファイルを 2 つの既知の色でテストし、元の色と比較します。

写真で、過剰な圧縮によりバンディングやスミアが発生する、空、影、または柔らかいグラデーションのある領域を探します。小さなテキストを含む画像の場合は、100% ズームで文字の端を調べます。キロバイト単位で重さを比較するだけでは十分ではありません。目的は、その画像を機能させる詳細を保持することです。ソーシャル ネットワークがファイルを自動的に再変換する場合は、結果がローカル プレビューと異なる場合があるため、最終的なパブリケーションを確認してください。

こちらもお読みください

技術リファレンス: 画像フォーマット、圧縮、透明度 (MDN).

写真提供者: ファビアーノ・フレイタス
ファビアーノ・フレイタスについて

Fabiano Freitas は情報技術管理の学位を取得しており、日常生活に適用されるテクノロジー、デジタル ツール、生産性について執筆しています。 FileBito では、プライバシー、ファイルの品質、結果のチェックに配慮した、PDF、画像、データ、変換に関する実践的なガイダンスを公開しています。

← すべての記事を見る