あなたの Web サイトには、他のサイトと同様に、製品、コレクション、アイコンなどの写真が多数含まれており、そのほとんどは PNG または JPEG 画像形式です。しかし、アップロードされる PNG または JPEG 画像が増えるほど、Web サイトの読み込みが遅くなることがわかりました。あなたの場合は、SVG 形式のアイコンなど、一部の画像タイプの画像の最適化を検討してください。
PNG や JPEG と比較して、SVG ファイルには、画像の高解像度を維持しながら読み込み速度が向上するという利点があります。この記事を通じて、SVG ファイルの優れた点と、Web サイトのパフォーマンスを向上させるために SVG ファイルを利用する必要がある理由を理解しましょう。
このページでは
SVGファイルとは
PNG や JPEG などの他の一般的な画像ファイルとは異なり、SVG (スケーラブル ベクター グラフィックス) はベクトルベースの画像形式であり、品質を損なうことなく、より小さくしたり大きくしたりすることができます。 SVG ファイルを理解するには、その特性を広く使用されている形式 PNG と比較してみるとよいでしょう。
| SVG | PNG | |
|---|---|---|
| ファイルの種類 | ベクトルベース | ラスターベース (またはピクセルベース) |
| ファイルサイズ | PNGよりもはるかに小さい | 高解像度で大きい |
| 仕組み | XML プログラミング言語を使用して Web ブラウザまたはアプリケーションと通信し、画像を表示します | フィルタリング、エンコード、可逆圧縮プロセスを経て、圧縮画像をソース画像と同じように表示します。 |
| 最適な用途 | ウェブサイトのデザイン、ロゴ、アイコン | 写真、編集、ロゴなど |
SVG ファイルを使用する必要がある理由
SVG 形式には多くの優れた利点があり、Web サイトやアプリケーションのデザインに最適です。
無制限のスケーラビリティ
ベクターを使用するため、SVG 画像は解像度に依存せず、品質に影響を与えることなくあらゆる次元でスケーラブルです。画像を作成するための数学的アルゴリズムに基づいて、Web ブラウザーが画像を読み取って画面に表示します。ほんの小さなコードで、表示ウィンドウ、デバイス、レスポンシブ デザインなどのさまざまなビューアに適応できる SVG 形式は、品質を損なうことなく画像を画面上に完全にレンダリングして表示するのが簡単です。
この機能により、SVG は PNG や JPEG などのラスターベースのファイル タイプよりも優れています。ラスター イメージの場合、イメージ情報はピクセルのグリッドに格納されます。そのため、画像を拡大すると、各ピクセルが元のサイズを超えて拡大する必要があり、品質が低下します。
簡単なカスタマイズ
SVG ファイルを使用すると、Web デザイナーが Adobe Illustrator や CorelDraw などの一般的なデザイン ソフトウェアを使用して、ベクター形状、テキスト、色などの変更を行うための多くの制御が可能になります。画像ファイルの編集はわずか数分で完了します。
小型
前述したように、SVG ファイルはラスター イメージよりもはるかに軽量であり、さらに、小さいサイズと画質の間でトレードオフを行う必要がありません。画像が小さいほど、Web サイトの読み込みが速くなります。したがって、SVG を使用すると、Web サイトの読み込み速度が全体的に向上します。
SEO に優しい
SVG 形式はテキストに基づいて定義されているため、検索エンジンは画像をより迅速かつ簡単に読み取り、クロールし、インデックスを付けることができます。したがって、ページランクと検索エンジンの最適化を向上させることができます。検索エンジンはタイトル、キーワード、ALT タグなどのメタデータに従ってラスター画像のみを認識するため、この点で SVG は PNG や JPEG よりも優れています。
現在、ほとんどの Web サイトテーマプロバイダーは、高速な読み込み、高解像度の画像、検索エンジンでの高いランクなどの要素を優先したいと考えています。特に、Be Yours などの一部の Shopify テーマでは、SVG のみが受け入れられるいくつかのセクションまたはブロックが指定されます。したがって、この場合は PNG や JPEG ではなく SVG を選択することをお勧めします。
Be Yours テーマでの SVG の使用
SVG ファイルは、この記事の手順に従って、Adobe Photoshop や Adobe Illustrator などの一般的なグラフィック デザイン アプリを使用して自分で作成できます。
自分で SVG を作成するのが複雑な場合は、作業を容易にする SVG アイコン プロバイダーRemixicon.comをご利用ください。 Remixicon.com には、選択できる膨大な SVG アイコン ライブラリがあり、2 回クリックするだけで希望のアイコンを簡単に入手できます。
- Remixicon.com で、キーワードを入力して必要なアイコンを検索します。
- リストからアイコンをクリックし、 「SVG をコピー」ボタンを選択します。
SVG アイコンを追加するテーマのセクション/ブロックにアクセスし、関連するフィールドに SVG 画像コードを貼り付けます。
たとえば、Be Yours テーマには、 [カスタム SVG アイコン]フィールドにカスタム SVG を追加できる[保証]セクションがあります。
- 「保存」をクリックして変更を確認します。
読んでいただきありがとうございます。この記事がお役に立てば幸いです。 Facebook 、 Twitter 、ウェブサイトのブログで今すぐフォローして、最新情報を入手してください。
"