質問: ### illustratorで作成した画像を、pcブラウザで閲覧時にぼやけないように配置する ----質問---- Illustratorで作成した、グラデーションが多様に使われている画像を webサイトのTOPページに配置したいのですが、pngデータでは輪郭がぼやけてしまうため SVGデータで配置しようとしています。 しかし、 1 ずべて表示されるまでの読み込みに時間がかかる -ページを開くときにレンダリングするためだと理解しています 2 そもそも、SVGデータは大きな背景の画像として適しているのか調べたが分からない ### 試したこと png(png-24)で解像度300pxで別名保存し、配置してみたが輪郭がぼやけてしまう -SVGで配置すると印刷物のように鮮明に再現されます。 SVGファイルを大きなサイズで配置する(1100*900程度)上での注意点など あればアドバイスいただけると幸いです。
回答: > > 1 ずべて表示されるまでの読み込みに時間がかかる > > > 何が問題かを特定して対処したほうがよいです。大きなサイズのSVGなら読み込み自体が問題になっている可能性もあります。 【Timeline ツールの使い方 | Tools for Web Developers | Google Developers】 【Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita】 【Chrome DevToolsを使用してサイトのパフォーマンス改善をしてみた - WILLGATE tech blog】 サイズの問題であればHTMLに埋め込んでしまえば「ずべて表示されるまでの読み込みに時間がかかる」事は無くなるかもしれません。 あとは簡略化や不必要に分割されたパスの結合、不要な(表示に現れない)パスの削除なども試してみてください。 【基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法 - WPJ】 【精度を保ってSVGを1バイトでも小さくする - Qiita】 【Webサイトを遅くするダメなSVG画像をスッキリ最適化する手軽な方法 - WPJ】 > > 2 そもそも、SVGデータは大きな背景の画像として適しているのか調べたが分からない > > > SVGの内容によるので適しているともいないとも一概に言えないと思います。複雑で細かく、フィルタやグラデーションを多用したSVGは、描画処理に時間がかかることもあるだろう、とは思います。