PNG から SVG に変換する方法
公開: 2023-02-12品質の高い画像とサイトの速度の適切なバランスを見つけることは、ユーザー エクスペリエンス (UX) にとって非常に重要です。 おそらく、訪問者に高品質の写真を楽しんでもらいたいでしょう。 それでも、Core Web Vitals に影響を与えたくありません。
SVG 形式では、PNG や JPEG などのラスター グラフィックスの代わりにベクターを使用して画像を作成します。 ピクセルではなく角度があるため、SVG 画像はぼやけて見えることなく任意のサイズにスケーリングできます。 この形式を利用することは、訪問者のデバイスに関係なく、巨大なファイル サイズなしで優れた画質を維持するための優れた方法です。
この記事では、一般的な画像形式を比較し、Web サイトで SVG 画像の使用を検討すべき理由について説明します。 さらに、PNG 画像を SVG ファイルに変換する最良の方法も紹介します。 始めましょう！
PNGファイルとは？
PNG 画像について聞いたことがあるかもしれませんが、JPEG や他の画像タイプとどう違うのでしょうか? PNG 形式は、画質を維持しながらインターネットに画像を転送するために特別に作成されました。
PNG またはポータブル ネットワーク グラフィックス。 JPEG のような PNG 画像は、ラスター グラフィックスを使用します。 つまり、これは画像を作成するために定義されたピクセルのグリッドです。
画像ソース：Pinterest
ラスター グラフィックスに固有の問題の 1 つは、拡大すると品質が低下することです。 その理由は、ピクセルが数学的に増加し、多くの場合強制的に切り上げられるため、ピクセルがぼやけて見えるからです。 残念ながら、低品質の画像はサイトの UX や検索エンジン最適化 (SEO) にさえ影響を与える可能性があります。
PNG 画像の主な利点は、忠実度を損なうことなく圧縮形式から再構築できることです。 この特性により、それらは Web サイトで一般的に選択されます。
ほとんどの画像ビューアは、デフォルトで PNG 形式もサポートしています。 ただし、ファイル サイズは JPEG ファイルよりも大きくなる傾向があります。
SVG ファイルとは
SVG はスケーラブル ベクター グラフィックスの略です。 この画像形式は、PNG や JPEG ほど一般的ではありませんが、いくつかの大きな利点があります。
SVG ファイルは、ベクトル (基本的には角度と距離) を利用して画像を作成します。 この形式は、色付きのピクセルのグリッドを使用するラスター グラフィックスとは異なります。 SVG コンバーターは、ピクセルのグリッドを取得し、さまざまな用途のためにそれを SVG ベクトルに変換します。
この違いは、コンピューターが画像を処理する方法を変更するため、重要です。 SVG 画像の主な強みは、品質を損なうことなくスケーリングできることです。 つまり、解像度を失ったりぼやけたりすることなく、画像を拡大またはサイズ変更できます。
サイズが変化しても角度は変化しないため、SVG 画像は小さな電話でも巨大なテレビ画面でも同じように鮮明になります。 この品質は、Web サイトをモバイル デバイスでレスポンシブにするのに非常に有利であり、SEO を改善することさえできます。
PNG と SVG の違いは何ですか?
PNG 画像はラスター グラフィック (ピクセル) ですが、SVG はベクターを使用します。 これらのファイル形式には、さらにいくつかの重要な違いがあります。 見てみましょう！
サポート
PNG 形式は、JPEG 形式と同様に非常に一般的であり、ほとんどのプログラムでデフォルトでサポートされています。 そのため、ファイル サイズよりも画質が重要なアプリケーションでは、PNG が一般的に選択されます。 そのため、写真や動画のポートフォリオ Web サイトで PNG 画像が表示されることがあります。
SVG ファイル形式のオプションは、Adobe Illustrator などのベクターベースのグラフィック エディターで見つけることができますが、他のプログラムではサポートされていない場合があります。 特に一部の電子メール プラットフォームのような古いアプリやシンプルなアプリでは、ベクター グラフィックスがサポートされていないか、認識されない場合があります。 したがって、SVG は電子メール マーケティング メッセージには適していない可能性があります。
画面
一方、ラスター グラフィックスを使用してグリッド上に色付きのピクセルを表示する PNG 形式と比較すると、SVG 形式はベクトルを使用して画像内のさまざまなグラフィック要素の境界を定義します。
そのため、PNG 画像は、ズームインまたはサイズ変更すると忠実度が失われます。 顧客が e コマース アイテムをより近くで見ることができるようにする製品画像には理想的ではない場合があります。 ただし、SVG 写真はサイズ変更によって鮮明さが失われることはありません。
ファイルサイズ
通常、ファイル サイズによって、PNG 画像と SVG 画像のどちらを使用するかを決定する場所が決まります。 ただし、どちらの形式も、すべてのユースケースで本質的に優れているわけではありません。
小さい画像や低品質の画像の場合、多くの場合、PNG 形式で十分であり、使いやすく、ファイル サイズも妥当です。 Web サイトの主な目的がグラフィックではない場合、PNG を圧縮して最適化すれば、通常は PNG を使用しなくても済みます。
ベクトルベースのグラフィックスの場合、小さな画像でも複数の角度や要素が含まれている可能性があるため、ファイル サイズが大きくなります。 実際、SVG ファイルのサイズは無期限に変更できるため、それほど重要ではありません。
PNG 画像のサイズと品質が向上すると、ファイル サイズも大きくなります。 ただし、サイズが SVG 画像のファイル サイズに与える影響は小さくなります。 これにより、ほとんどの場合、SVG ファイルがより効率的なオプションになります。
つまり、画像のサイズと品質が向上するにつれて、SVG 形式が PNG 形式よりも優れたオプションとして追い越されます。 SVG は、サイズの大きい高品質の写真に重点を置いたサイトの場合に理想的な形式です。
PNG から SVG への変換が必要な理由
SVG グラフィックは、ユーザーが画像を拡大したり、別の画面で表示したり、サイズを変更したりする可能性が高い Web サイトで、ファイル サイズを小さくして一貫した鮮明さを提供します。 したがって、訪問者はぼやけや小さな画面のために画像を表示するのに苦労する必要はありません。
画像ソース: ウィキメディア・コモンズ
SVG 形式は、さまざまなシナリオで画質を確保するために、グラフィック デザインや印刷で一般的に使用されています。 この形式は PNG や JPEG ほど普及していませんが、Adobe Illustrator などのベクター グラフィック エディタで使用できます。
SVG は、Web サイトやマーケティング資料の画質を一定に保つ必要がある場合に適しています。 全体として、より少ないサーバー リソースを使用して、サイトのパフォーマンスへの影響を抑えながら、より高品質の画像を Web サイトでホストできます。
PNG から SVG に変換するにはどうすればよいですか? (3つの方法)
Adobe Illustrator は、ベクター グラフィックスの編集専用に設計されています。 ただし、このソフトウェアは必要以上に複雑な場合があります。
PNG を SVG ファイルに変換すると、間違いなく時間を節約でき、高品質の画像のファイル サイズを縮小できます。 ここでは、PNG 画像を SVG ファイル形式にすばやく変換するための無料でシンプルなオンライン ソリューションを紹介します。
1.アドビエクスプレス
Adobe Illustrator は、市場で最も人気のあるベクター グラフィック エディターの 1 つとしてすでに説明しました。 ただし、アドビには、画像をベクター形式に変換するためのより簡単なソリューションがあります。
Adobe Express は、Adobe Illustrator と同じテクノロジーを使用して JPEG および PNG ファイルを SVG に変換する無料のオンライン Web アプリケーションです。 Adobe Express は、評判の良い会社から提供されており、追加の便利な機能を備えているため、優れたオプションです。 画像の変換に加えて、Adobe Express を使用して、背景の追加または削除、フィルターの適用、アニメーションの作成さえ行うことができます。
Adobe Express コンバーターを使用するには、 [写真をアップロード]ボタンをクリックして開始します。
これにより変換画面が表示され、画像をドラッグ アンド ドロップするか、デバイスからファイルをアップロードできます。 画像がベクターに変換されると、プロセスが自動的に開始されます。
このプロセスには数秒しかかかりません。 ただし、Adobe Express の無料版のファイル制限サイズはわずか 10 MB であり、高品質の画像には不十分な場合があります。
2.フリーコンバート
それほど強力ではありませんが、同様に単純なソリューションは FreeConvert です。 このWebサイトでは、画像やその他のメディアをさまざまな形式に変換および圧縮することに焦点を当てた、画像編集ツールの数を減らしています. ただし、FreeConvert は最大 1GB のファイル サイズを処理できます。これは、ほとんどの状況では十分すぎるはずです。
PNG を SVG に変換するには、画像をインターフェイスにドラッグするか、デバイスからアップロードするだけです。 画像がアップロードされたら、出力としてSVGを選択し、 [変換]ボタンをクリックします。
ファイルのアップロードと変換には数秒かかります。 プロセスが完了したら、新しくフォーマットされたイメージをダウンロードできます。
3.コンバート
Convertio は FreeConvert と同様に機能します。 さらに、さまざまな書式設定ツールを提供します。 これらには、画像、オーディオ、ビデオ、およびドキュメント コンバーターが含まれます。 無料版のファイル サイズの制限は 100 MB で、ほとんどの小規模から中規模のプロジェクトには十分です。
事前に選択された変換経路のリンクを使用するか、画像をアップロードして目的の出力を選択できます。
[変換]ボタンをクリックすると、プロセスが自動的に開始され、ステータスが更新されます。 完了したら、 [ダウンロード]ボタンを選択して、新しい SVG を受け取ります。
結論
PNG から SVG に変換する方法がわかったので、低品質の画像について心配する必要はもうありません。 ベクトルベースのグラフィックスは、解像度を失うことなく、サイズ変更、ズーム、ストレッチが可能です。
PNG ファイルを SVG に変換するには、次の優れたオプションのいずれかを使用します。
- Adobe Express : Adobe Illustrator で使用されているのと同じテクノロジーを搭載した、有名な会社の強力なソリューションです。
- FreeConvert :あらゆる種類の画像ファイルを最大 1GB まで変換できる使いやすい Web アプリケーション。
- Convertio :さまざまな種類のファイルを最大 100 MB まで変換および圧縮できる、もう 1 つの使いやすい Web アプリ。
画像形式の選択は、Web サイトのパフォーマンスを最適化するためのほんの一部です。 選択した WordPress ホスティング プロバイダーも、読み込み速度に影響を与える可能性があります。 WP Engine では、スケーラブルなサーバー アーキテクチャ、世界規模のデータ センター、無料のコンテンツ配信ネットワーク (CDN) など、パフォーマンス重視の機能を提供しています!