Retinaとか言うからInlineSVGを判定して表示してみた。

福山です。

MacBook Pro Retinaの登場でRetina対応させないとなぁ、というより対応させたいと思います。

Retinaで普通の画像を見るとゲームボーイのドット表示が懐かしくなるとよく聞きます。

そんな思い出に浸っている暇はないので、今回はSVG形式に注目してみました。

InlineSVGを判定するJavaScript

Modernizr.jsを使います。

Modernizr

サイトから欲しい機能だけにチェックを入れてGENERATEE > DOWNLOAD ボタンを押します。

3kBくらいで済むようにInline SVGだけにチェックを入れました。

modernizr

サンプルコード


<html>
<head>
  <style>
  img{
    /* responsive image size */
    width:100%;
    height:auto;
  }
  </style>
  <!-- 描画に関係あるので早いうちに読み込む -->
  <script src="js/modernizr-inline-svg.js"></script>
</head>

<body>

  <script>
  if(Modernizr.inlinesvg){
    // svg対応
    document.write('<img src="bloglogo.svg" alt="" width="215" height="140">');
  }else{
    // svg非対応
    document.write('<img src="bloglogo.png" alt="" width="215" height="140">');
  }
  </script>

</body>
</html>

JavaScriptの判定なので直接書く場合に比べて読み込みが遅れます。

imgタグの他にobjectタグを使う方法もあります。

下の画像はIllustratorで作成したものをsvg形式で別名保存して適当に作りました。これを見ている人の大半は時代遅れのブラウザなんて使っていないでしょうから、滑らかな方の画像が表示されていると思います。InlineSVG非対応ブラウザで見るとpng形式を出します。

NginxとSVGのgzip圧縮

jpegやpngはgzip圧縮かけても容量は変わりませんが、svgは圧縮して容量を落とすことが可能です。

.svgzとかいう拡張子がありますけど使い方がよく分からないので、ふつーにgzip圧縮をかけました。

ファイル名末尾は.svg.gzにします。

私はApacheは知りませんが、Nginxを使っているので、gzip圧縮済みのファイルが存在した場合のみ.gzファイルを転送するモジュールを設置しています。

前回の記事:Nginxのgzip_static, Gzip Precompressionについて

ファイルサイズを半分以上削れました。

おわり

まぁ、こんな方法もある程度の認識で。