SVG画像を使用すると、ウェブサイトのパフォーマンスに適していますか？

svg画像：Webデザインに最適

Scalable Vector Graphics（SVG）は、多くの理由でWebグラフィック形式に最適な選択肢です。重要な理由の1つは、比較的小さなファイルサイズです。ただし、これは絶対的ではありません。もっと深く見てみましょう。

（この記事は、Sitegroundとのコラボレーションの一連の記事の一部です。SitePointを可能にしてくれたパートナーへのサポートに感謝します。 ベクター画像の利点

ラジカル画像（.jpeg、.pngなど）は、グリッドに配置された平方ピクセルで構成されています。したがって、画像が大きいほど、より多くのピクセルが使用され、ファイルサイズが増加します。 それだけでなく、ピクセルベースのグラフィックスケーリングは良くありません。それはどういう意味ですか？これは、300 x 225ピクセルの元の幅のある花です。

これは、同じ画像がより高い解像度で表示される方法です：

ぼやけたエッジ、ぼやけた表面、および全体的な画質の大幅な減少に注意してください。

最近の網膜画面がユーザーデバイスで一般的であることを考えると、ウェブサイトでラスター画像で発生するリスクは高いです。別の方法は、高解像度のグラフィックを提供することですが、これはもちろんWebページのパフォーマンスに深刻な影響を与える可能性があります。

および

要素

幸いなことに、Modern HTMLはこの問題を応答性のある画像（つまり、

および要素）で解決します。執筆時点では、すべての主要なブラウザの最新バージョンは、IE11とOpera Miniを除くこれらの2つの要素をサポートしています。

srcsetレスポンシブ画像の目標は、使用するデバイスに最高品質の画像を提供することです。これには、さまざまな解像度で画像を提供することが含まれますが、ブラウザはデバイスの機能にアクセスするのに適した画像のみをロードできます。 <picture></picture>

これらのテクノロジーの仕組みについて詳しく知りたい場合は、Saurabh KirtaniによるSrcsetを使用してレスポンシブ画像を構築する方法がこのトピックを深く掘り下げます。

srcset以下は、実際には<picture></picture>のように見えるものです：

以下は、

要素の例です。

ご覧のとおり、アクセスデバイスに従って画像のコピーが1つだけ提供されますが、どちらのテクノロジも、画像の複数のコピーをサーバーに準備してアップロードする必要があります。これはあなたのウェブサイトのパフォーマンスに影響しませんが、時間とサーバーの帯域幅に悪影響を及ぼします。

svgは解像度に依存しません

スケーリングはベクトルグラフィックスのDNAであり、SVGはXMLベースのベクトル画像形式です。 SVGは、ピクセルサイズに依存しない幾何学的な描画命令（形状、経路、線など）で構成されています。ファイルサイズの観点からは、これらの命令が同じままであるため、画像がレンダリングされるサイズは関係ありません。

解像度に依存するもう1つの意味は、同じ画像の異なるコピーをさまざまなデバイスに合わせて準備する必要がないことです。

つまり、いくつかの要因は、画像の複雑さなど、SVGファイルサイズに悪影響を与える可能性があります。描画命令が複雑なほど、ファイルサイズが大きくなります。

効率的なSVGファイルの提案

一般的に言えば、WebページのSVGは、ロゴ、マップ、アイコンなど、非常に簡単です。このような単純なSVG画像は、ラスターの対応物と比較して、ファイルサイズが小さくなる可能性があります。

ただし、ファイルサイズをさらに最適化し、訪問者がウェブサイトで素晴らしい体験をしていることを確認するために、いくつかの手順があります。

以下にはいくつかのヒントがあります：

最初からデザインにパフォーマンスを組み込みます

自分で簡単なSVGグラフィックを記述するか、snap.svgなどのJavaScriptライブラリを使用してベクトルグラフィックを描画できます。通常、ジョブを完了するには、Adobe Illustratorなどのベクトルグラフィックエディターを開始するだけです。

グラフィックエディターを使用する場合、設計段階でSVGコードを簡素化することを考慮すると、後で最適化すると作業を破壊するリスクが低下する可能性があります。

この方向に進むことができる最初のステップは、選択したグラフィックスエディターにキャンバスサイズを正しく設定することです。 Sarah Drasnerは、プロジェクトに応じて、100 x 100ピクセルに設定することをお勧めします。これにより、キャンバスが小さすぎないことが保証され、グラフィックをいじりすることなく最近ではほとんど減らすことができない小数点以下の場所が多数あります。一方、このサイズは大きすぎません。実際、より大きなキャンバスは、対応するパスポイントが多いことを意味します。

次に、パスポイントの数を減らすことは、SVGファイルのサイズを縮小するために重要です。これは、可能な限りパスの代わりに形状を使用することを意味しますが、個別にアニメーション化することを計画しない限り、複数のパスをより少ないパスに組み合わせることも意味します。 Adobe Illustratorは、パスポイントをさらに削減するための「簡素化された」パネルを提供します。これは、その使用法を説明するための短いビデオチュートリアルです。

SVGをスマートな方法でエクスポート

グラフィックエディターのエクスポート機能を最大限に活用します。そうしないと、一部のSVGコードが独自のタグと必要のない膨満感が満たされる可能性があります。

たとえば、

Adob​​e Illustratorの最新バージョン（執筆時点でのCC 2017）がある場合、SVG図面をエクスポートして.SVGファイルタイプを選択するためにオプションとしてエクスポートを使用してください：

Illustratorのパネルは、ファイルのサイズと出力をクリーンにして、ほとんどネットワークに優しいタグを削減するのに役立ついくつかの設定を提供します。パネルの[表示]ボタンをクリックして、コードをプレビューすることもできます。

イラストレーターの各オプションの詳細なウォークスルーについては、Adobe IllustratorからSVGを取得するGeoff Grahamのさまざまな方法が素晴らしい記事です。

SVG最適化ツールを使用して、より多くのバイトを圧縮します

SVGグラフィックをエクスポートした後、利用可能な優れたSVG最適化ツールでさらに絞り込むことができます。

SVGOMG（およびそのWebベースのGUIに対応するバージョン）とPeter CollingridgeのSVGエディターは、最も人気のあるツールです。

SVGOMGの使用方法の詳細については、Guillaume Cedric Martyによる「SVG画像の最適化」をチェックしてください。

GZIPT SVGファイルの配信を有効にします

SVG最適化To-Doリストの最後のステップは、サーバー上のGZIP圧縮を有効にすることです。 SVGは単なるXMLタグであるため、問題なく簡単に圧縮できます。

ファイル削減の利点は重要です。 SVG 1.1仕様の付録Jは、非圧縮と圧縮SVGファイルの例の比較表を示しています。結果は圧縮を圧迫しており、ファイルサイズは77〜84％減少しています。

結論

SVGグラフィックスは、Webページに最適です。単純なアイコン、ロゴなどで使用すると、通常、この記事に記載されている少数の予防策を講じた場合、格子のカウンターパートよりも優れたパフォーマンスを発揮します。

私が上記のテクニックは決して網羅的ではありません。さらに効率を向上させることができます。詳細な最適化手法については、次のリソースが必読です。

W3C SVG 1.1仕様

Webページ上の

svg

サラ・ドラスナー
• による
「高性能SVG」
• 「WebページでSVG配信を最適化するためのテクニック」 アンドレアス・ラーセン
による
• "Optimization svg"
• SVG最適化ワークフローは何ですか？コメントボックスをクリックして共有してください！
SVGおよびWebサイトのパフォーマンスに関するFAQ（FAQ）WebサイトのパフォーマンスにSVGを使用することの利点は何ですか？

Scalable Vector Graphics（SVG）は、Webサイトのパフォーマンスに多くの利点を提供します。第一に、SVGは解像度に関するものではありません。つまり、画面のサイズや解像度に関係なく品質を維持します。これは、応答性の高いWebデザインにとって特に有益です。第二に、SVGは通常、JPEGやPNGなどの他の画像形式と比較してファイルサイズが小さく、ページの読み込み速度を大幅に改善できます。最後に、SVGはCSSとJavaScriptでアニメーション化および操作でき、追加のHTTPリクエストなしでより柔軟性とインタラクティブ性を提供します。

SVGはSEOにどのように影響しますか？

SVGは、さまざまな方法でSEOにプラスの影響を与える可能性があります。 SVGファイルは小さいため、Googleのランキング要因であるページの読み込み速度を改善できます。さらに、他の画像形式とは異なり、SVGは検索エンジンでインデックス化およびraw索することができます。これは、代替テキストやその他のメタデータをSVGに追加して、SEOの取り組みをさらに強化できることを意味します。

SVGは複雑なグラフィックスに使用できますか？

はい、SVGはロゴ、アイコン、イラストなどの複雑なグラフィックに最適です。ラスター画像とは異なり、SVGは拡大または削減された後に歪んでいないため、さまざまなサイズのディスプレイを必要とする複雑なデザインに最適です。さらに、SVGは、CSSとJavaScriptを使用してスタイルとアニメーションを使用できるため、より複雑でインタラクティブなデザインを実現できます。

SVGを使用することの欠点はありますか？

SVGには多くの利点がありますが、考慮すべき潜在的な欠点もあります。一部の古いブラウザはSVGをサポートしていない場合があります。これは、Webサイトが特定のユーザーに表示する方法に影響を与える可能性があります。さらに、SVGはシンプルまたは適度に複雑なグラフィックに最適ですが、非常に詳細な画像や写真タイプの画像に最適な選択肢ではない場合があります。

SVGを最適化してパフォーマンスを向上させるにはどうすればよいですか？

SVGを最適化してパフォーマンスを向上させるには、複数の方法があります。 1つの方法は、SVGコードを縮小することです。SVGコードは、不要な文字やスペースを削除してファイルサイズを削減します。 GZIP圧縮を使用して、ファイルサイズをさらに削減することもできます。また、複数のSVGファイルを埋め込む代わりに、CSSとJavaScriptを使用してSVGアニメーションを作成したり、SVGを操作したりすることを検討してください。

SVGは、パフォーマンスの観点から他の画像形式と比較してどうですか？

SVGは、一般に、パフォーマンスの点で他の画像形式よりも優れています。ファイルサイズは小さく、ページの読み込み速度を改善できます。ズームイン時にピクセル化される可能性のあるラスター画像とは異なり、それらはあらゆるサイズで品質を保持します。ただし、非常に詳細な画像または写真型画像の場合、JPEGやPNGなどの形式がより適している場合があります。

はい、CSSまたはJavaScriptを使用してSVGをアニメーション化できます。これにより、追加のHTTPリクエストを必要とせずに、よりインタラクティブで魅力的なデザインが可能になります。ただし、複雑なアニメーションはファイルサイズを増加させ、パフォーマンスに影響を与える可能性があることを忘れないでください。

SVGは簡単にアクセスできますか？

はい、SVGには、代替テキストやその他のメタデータを追加することでアクセスできます。これにより、スクリーンリーダーは視覚障害のあるユーザーに画像を説明することができ、それによりウェブサイトへのアクセシビリティが向上します。

SVGの作成と使用を学ぶ方法は？

SVGを学ぶためにオンラインで利用できる多くのリソースがあります。 MDN Webドキュメント、CSS-Tricks、さまざまなコーディングブートキャンプなどのWebサイトは、SVGの作成と使用に関するチュートリアルとガイドを提供します。さらに、Adobe IllustratorやInkscapeなど、SVGグラフィックを作成するのに役立つ多くのツールがあります。

以上がSVG画像を使用すると、ウェブサイトのパフォーマンスに適していますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。