• WEB

大きなPNG画像圧縮!サイト速度高速化!画像最適化テクニック3!!

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加
大きなPNG画像圧縮!サイト速度高速化!画像最適化テクニック3!!

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

IE9以下はごめんなさい
これらの技術は実際に弊社で作成したサイトでも使ってます。

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

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ライフ送ってください。

このエントリーをはてなブックマークに追加

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ