つっつです。
ついに最終回透過PNGの圧縮について語りたいと思います！

流行りのサイトって人物を大きくくり抜いて配置したりする事があったりしますよね。

PNGの圧縮の限界

デザインの都合上アルファチャンネル(半透明)PNGで保存する事があると思うのですが非常に重くなった経験ありませんか？
例えばこんなのとか

この場合、PNGを圧縮するTinyPngなんかは256色のインデックスカラーに変換して容量を圧縮するので
写真など色素数が多い写真切り抜きなどは確実に劣化するので使えませんよね。

この画像も実寸でみると、お肌やクラッカーの部分がなんだか変ですよね、しかも容量も半分位にしか減らないし。

こんな場合はSVGを使ったクリッピングマスクが有効です。

SVGとは

ざっくり言ってしまえばWEBブラウザーでも表示できるAI&PSDファイルの様なシロ物です。

どうやってやるの

準備するものは下の図を参考にしてください。

そしてこのコードのwidth、height、xlink:hrefを書き換えてください

<svg width="画像のwidth" height="画像のheight">
  <defs>
        <mask id="msk1">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="型抜き画像のパス"  width="画像のwidth" height="画像のheight"></image>
        </mask>
   </defs>
   <image mask="url(#msk1)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="JPG画像のパス" preserveAspectRatio="none" x="0" y="0"  width="画像のwidth" height="画像のheight"></image>
</svg>
</pre>
例えばこんな感じです、
<pre>
<svg width="1600" height="1065">
  <defs>
        <mask id="msk1">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.go-next.co.jp/blog/sample/2015/0818/imgopt/img/msk.jpg" width="1600" height="1065"></image>
        </mask>
   </defs>
   <image mask="url(#msk1)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.go-next.co.jp/blog/sample/2015/0818/imgopt/img/master.jpg" preserveAspectRatio="none" x="0" y="0" width="1600" height="1065"></image>
</svg>

そして、HTMLファイルに貼り付けるだけです。比較的簡単だと思いませんか？

気になる効果測定

定番の計測サイトで計測です。

ノーマル

サンプル確認はこちら

SVG

サンプル確認はこちら

どうですか？

みるからに効果ありだと思いませんか？ 3秒って自分もびっくりしました。

容量ですがノーマルのPNGだと1.4MBのところがなんと0.2MBと7分の1に減ってるのです！
(ちなみに先ほどの問題のあったTinyPngなどでPNG8で圧縮したものは0.46MBです)

ちなみに似たテクニックを使ったこんなサイトもあります。

スマホの場合はcssクリッピングマスクが使えるのでこのテクニックは必要ないかと思います。
そのことはまたの機会ににでも。

ではでは、高速化やりすぎて険悪になる前にハッピーなWEBライフ送ってください。