はじめに
アプリ作成の初段階、「画面遷移図」の作成において画像登録方法をなんとなく調べていました。今までは「とりあえずDL できればいいやっ」という感じで画像を保存していたので、どんな形式で保存されるかは一切見ていませんでした。ですが今後は適した画像によってサイトの見やすさ向上などを考えると無視できない問題である、と感じたので本日学んだことをアウトプットしようと思います。
SVGとPNG
今回はSVGとPNGについて学びました。他にもファイル形式が沢山あることを知りました。数の多さに驚きです
SVGとPNGは圧縮の種類やフォーマット、ブラウザの対応状況によって異なりますが、一般的に最も使われているファイル形式になります。
次からはそれぞれの特徴、メリット、デメリットについてまとめてみます
★SVGとは★
Scalable Vector Graphicsは、ウェブ上で最も広く使われるベクターファイル形式で、以下の特長があります。
- スケーラブル: 画質を損なわずにサイズの拡大・縮小が可能。
- ベクター: 画像をリアルタイムでレンダリングし、ピクセルに変換するコードで構成。
- グラフィックス: PNG、JPEG、GIFに似た画像形式。
SVGはXMLで書かれたコードで、形状、線、色などを表現し、InkscapeやAdobe Illustratorなどのベクターグラフィックエディターで編集できます。また、PNGからSVGへの変換も可能です。
利点（メリット）
- 拡大・縮小: 画質を損なわずに自由自在にサイズ変更が可能。
- 画質の劣化なし: 常に鮮明な画像。
- ファイルサイズが小さい: 最適化ツールを使用するとサイトの読み込み速度が向上。
- アニメーション対応: PNGにはないアニメーション機能。
- 透過処理: 汎用性が高い。
懸念点（デメリット）
- 互換性の問題: 古いブラウザやデバイスではサポートされない場合がある。
- 作成・編集の難易度: 特別なプログラムが必要で、XMLで設計することも難しい。
- 埋め込みの難しさ: WordPressではプラグインが必要。
- デバイス負担: 大量のベクター画像はデバイスに負担をかける。
使用推奨シーン
- ロゴ、アイコン、グラフ、図: シンプルな画像に最適。
- レスポンシブウェブデザイン、Retina対応: 拡張性があり、画質の劣化がないため適している。
- アニメーション: シンプルなグラフィックのアニメーションに最適。
非推奨シーン
- 複雑な画像: スクリーンショットや写真、多くの色や形を含む画像には不向き。複雑なベクターはブラウザの処理に負担をかける。
SVGは、その優れた拡張性と画質の保持機能により、特定の用途において非常に有用ですが、用途に応じてPNGや他の形式との使い分けが重要です。
★PNGとは★
Portable Network Graphicsは、インターネット上でJPEGの次に最も広く使用されるラスター画像形式です。以下の特徴があります。
- ラスター画像: ピクセルで構成され、解像度に影響を受けるため、サイズ変更すると画質に影響が出る。
- 透過処理対応: 透明な背景を持つ画像が作成可能。
- 非アニメーション対応: アニメーションはサポートしていない。
利点（メリット）
- 普及率: 幅広く使われており、一般的な画像編集ツールで簡単に扱える。
- 可逆圧縮: 圧縮しても画質が劣化せず、JPEGよりも鮮明な画像が得られる。
- 編集の容易さ: 無料のツールでも編集が可能。
懸念点（デメリット）
- サイズ変更時の画質劣化: 拡大・縮小時に画質が劣化しやすい。
- ファイルサイズの大きさ: 可逆圧縮のため、ファイルサイズが大きくなりやすい。
- Retina対応の難しさ: 高解像度ディスプレイへの対応が難しい。
- アニメーション非対応: アニメーションが必要な場合、他の形式を使う必要がある。
使用推奨シーン
- 詳細な画像やアートワーク: 多くの色を使用する画像や高解像度の画像に適している。
- 透過が必要な画像: 透明な背景が求められる場合に有用。
- 互換性が求められる場合: 古いブラウザやデバイス、SNS、メールテンプレートでの使用に適している。
非推奨シーン
- ロゴや装飾的なグラフィック: これらの場合、SVGの方が適している。
- アニメーション: アニメーションを必要とする場合は他の形式が必要。
PNGは、複雑な非アニメーション画像や透過が必要な画像に最適ですが、SVGと適切に使い分けることが重要です。
結局どちら？
最終的にまとめてみると…結論としては、どちらの形式が優れているかは用途により、両方の形式にはそれぞれ適した場面がある…ということ💦
| SVG | PNG | |
|---|---|---|
| 利点 | ・アニメーション対応: PNGは非対応。SVGはGIFやAPNGの代わりに使える。 ・レスポンシブ: 画質を損なわずにサイズ変更が可能。Retina対応。 ・小さいファイルサイズ: サーバー負荷が少ない。 ・用途: シンプルで色数の少ないアートワーク、ロゴ、装飾的なグラフィックに最適 |
・複雑なグラフィックに対応: 大きな解像度や多くの色を持つ画像に最適。 ・広い互換性: ブラウザやメールソフトなど、多くのプラットフォームでサポートされている。 ・用途: 複雑なグラフィック、写真、大量の色を含む画像に最適。 |
| 選び方 | アニメーション、レスポンシブデザイン、シンプルなグラフィック。 | 複雑な画像、写真、互換性が重要な場合。 |
ついでに今回私は画面遷移図のアイコンはSVGを使用してみました
さいごに
SVGとPNGについて、簡単にまとめてみました。最終的な判断は個々人によりますが、少しでも参考になれば幸いです。
下記のサイトは個人的にとても参考になりました。かなり説明が詳しく書かれていると思います。より詳しく知りたい方はこちらも参考にしてみることをお勧めします。