CSSスプライトは今も使われていて、数年間は使い続けられる技術でしょうか？

Question

CSSスプライトは今も使われていて、数年間は使い続けられる技術でしょうか？

最新の作る方はgulpを使って、複数の画像をひとつにまとめ、
出てきたソースをコピペする形でしょうか？

Answer 1

使い方次第だと思います。

CSSでいろいろ表現できるようになって、ボタンとか、スプライト画像を使う場所は減ってきているかなと思います。

なんでもかんでもまとめて画像サイズが大きくなっても意味がないし、使わないところで読み込むのももったいないですしね。

base64エンコードするというテクニックもありますが、容量がすごく小さくなるというわけではないので。
たとえば通信状況が悪い山の中とかで、何度もリクエストを投げるのがツライとかだったら有用ですが…
どちらにしろすべてのデータを読み込まないといけないことにはかわりはないですしね。

将来的なことを心配するなら、そもそも画像を使うんじゃなくて、アイコンやロゴのベクターデータはSVGで描画するというのが広まってきています。

そういうのでカバーできない画像だけスプライト化する、でいいんじゃないかな？と思いますよ。

Comments

[退会済みユーザー]

ありがとうございました。

やはり使う機会は減ってきているが、やったことがありませんは数年はさすがにまずいのですかね？
対して変わらないなら今まで通り、の画像複数で対応でも閲覧者の見た目上は変わりませんが、無視できるほどの差なのですかね？

[退会済みユーザー]

＞＞＞
将来的なことを心配するなら、そもそも画像を使うんじゃなくて、アイコンやロゴのベクターデータはSVGで描画するというのが広まってきています。

ベクトルデータで作って、WEBサービスなどでSVG化するということでしょうか？
自分でプログラミングしてsvgはとてもできないので、それでよいのでしょうか？
cs6なので、イラレ、フォトショ上ではたしかできません。

[NatsumiOki]

やったことがないことは、うだうだ考えず一度やってみるべきですGOGO！

ユーザーのことを考えてパフォーマンスを追及するならベンチマークを計測して、より良い方法を選択するだけのことですね。
とくに今スマホでの閲覧が増えて、PCよりスペックが低く通信状況が不安定な中でユーザーに愛想尽かされないようにしないといけませんからね。

スプライトにしないということは、画像の個数分、サーバにリクエスト送る・データを返す　を繰り返すわけですから、読み込む画像のサイズがトータルで同じだとしても、それだけ読み込みに時間がかかる恐れがあるわけです。

SVGへの書き出しはCS6でもできるはずです。
https://digitalfan.jp/75781