[Front-End General] CSS Sprite, SVG Sprite との今後のつきあい方

公開日: 2016/12/05
更新日: 2018/12/26

おれおれボイラープレートから Compass を正式に外すにあたって、CSS Sprite を今後どう扱うかを検討してまとまったので個人的なまとめ。

[markdown]
## CSS Sprites

### 高速化テクニックと Compass への注目

HTTP/1.1 環境でのパフォーマンス向上を目的に、CSS Sprite による高速化テクニックが注目され、[Compass](http://compass-style.org/) が広く利用される。

> * [Compass Sprites | Compass Documentation](http://compass-style.org/reference/compass/utilities/sprites/)

このあたりとか。

* [Compass: CSS Sprite で画像ナビゲーションを作成する | deadwood](https://www.d-wood.com/blog/2014/08/12_6595.html)
* [Middleman で CSS Sprite をつかう | deadwood](https://www.d-wood.com/blog/2014/10/31_7131.html)

### Retina の普及とその対応

高解像度の Retina ディスプレイ普及に伴い、Compass を拡張するテクニックが求められるようになる。

> * [Using Compass Generated Sprite Sheets in Responsive Sass, by Jayson Jacobs.](http://www.hugeinc.com/ideas/perspective/using-compass-generated-sprite-sheets-in-responsive-sass)
> * [pivotaltracker/Retina-Sprites-for-Compass: A mixin for creating retina sprites with hover & active states](https://github.com/pivotaltracker/Retina-Sprites-for-Compass)
> * [Gaya/Retina-Sprites-for-Compass: Allow to use sprites in retina with Compass.](https://github.com/Gaya/Retina-Sprites-for-Compass)

### 脱 Compass

[bourbon](https://github.com/thoughtbot/bourbon) のような CSS mixin (Framework) との組み合わせ利用や Compass の開発停滞の影響もあり、脱 Compass の動きが強まる。
[spritesmith](https://github.com/Ensighten/spritesmith) のようなツールが利用される。

> * [Ensighten/spritesmith: Utility that takes sprites and converts them into a stylesheet and its coordinates](https://github.com/Ensighten/spritesmith)
> * [CSSスプライトを生成する「grunt-spritesmith」 – to-R](http://blog.webcreativepark.net/2014/04/06-190024.html)
> * [CSS Sprite を自動生成する – Gulp で作る Web フロントエンド開発環境 #8 – NET BIZ DIV. TECH BLOG](https://tech.recruit-mp.co.jp/front-end/post-6844/)
> * [[Gulp] [Sketch 3] これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る | UI/UX Design、フロントエンド系の技術に関する備忘録 | whiskers](http://whiskers.nukos.kitchen/2014/12/24/gulp-spritesmith.html)

## Web フォント（アイコンフォント）

Web フォント（アイコンフォント）という選択肢も現れた。

> * [Icon Font & SVG Icon Sets ❍ IcoMoon](https://icomoon.io/)

このあたりとか。

* [Web Font を作って使う | deadwood](https://www.d-wood.com/blog/2014/12/05_7285.html)

## SVG Sprites

SVG が優れている点は、多色カラーでの表現が可能なこと。
こちらを全面的に参考。

> * [8種類あるSVGスプライトそれぞれの特徴を比較してみた – 週刊SVG](http://ssvvgg.net/post/153900731865/8%E7%A8%AE%E9%A1%9E%E3%81%82%E3%82%8Bsvg%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88-%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E7%89%B9%E5%BE%B4%E3%82%92%E6%AF%94%E8%BC%83%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F)

こういったツールを使うよう。

> * [frexy/svg-sprite-generator: A SVG sprite generator](https://github.com/frexy/svg-sprite-generator)
> * [Why npm Scripts? | CSS-Tricks](https://css-tricks.com/why-npm-scripts/#article-header-id-9)
> * [実践、SVGスプライト – SVGアイコンの実装手法 | CodeGrid](https://app.codegrid.net/entry/svg-sprite-1)

## HTTP/2

HTTP/2 の普及が進めば、高速化テクニックが逆の結果を招く。

> * [常時 SSL 化による Web サイト表示速度向上の可能性について | WWW WATCH](https://hyper-text.org/archives/2015/01/full_time_ssl_site_speed.shtml)
>
> つまり、SPDY や HTTP/2 環境では、Web ページ内で読み込まれるリソースの数を減らすより、その数が増えても、それぞれのファイルサイズを小さくする方がパフォーマンスが向上する方向に振れるということになりますが、一方で現状の HTTP/1.1 環境で有効とされていた高速化のテクニック、例えば CSS Sprites （CSS スプライト）などが、（それによって画像のファイルサイズが肥大化すると） SPDY や HTTP/2 環境では表示速度を低下させかねないということにもなります。

HTTP/2時代のウェブサイト設計 from Kazuho Oku

## まとめ

普通の Web サイト構築・納品では、サイト更新に伴う画像ファイルの入れ替えができないと困るというメンテナンス性重視の観点から、CSS Sprite を使わない選択肢があったりする。
こういった流れから、以下の結論となりました。

– CSS Sprite とサヨナラ。素のファイルを利用。
– HTTP/2 化されておらず、今すぐ最適化が必要な案件では SVG Sprite を利用。

今後開発するサイトでは「Sprite を使わず、素の画像ファイルを配置する」という方向性。
（扱う案件の性質を考慮した個人的な見解です。）

## 補遺

> * [[翻訳] HTTP/2 時代におけるパフォーマンスの最適化 – Capital P](https://capitalp.jp/2016/12/29/http2/)

CSS Sprite のメモを発掘したので転載。

> * [jQuery×HTML5×CSS3を真面目に勉強（5）：WebページをRetina対応させるテクニック～実践編 (1/3) – ＠IT](http://www.atmarkit.co.jp/ait/articles/1309/26/news058.html)
> * [#334 Compass & CSS Sprites – RailsCasts](http://railscasts.com/episodes/334-compass-css-sprites?language=ja&view=asciicast)
> * [HTTPリクエスト数削減テクニック2： CSS Sprite編 (1/3)：CodeZine（コードジン）](http://codezine.jp/article/detail/7425)
> * [css – How to remove the hash from Compass’s generated sprite image filenames? – Stack Overflow](http://stackoverflow.com/questions/9183133/how-to-remove-the-hash-from-compasss-generated-sprite-image-filenames/9332472#9332472)
> * [[Sass] Retina対応のスプライトシート用 sass mixin « きんくまデザイン](http://www.kuma-de.com/blog/2013-07-06/5625)
[/markdown]