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

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

要素の例です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論

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

Webページ上の

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

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

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

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

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

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

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

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

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

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

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

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

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

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