Gravで画像のRetinaディスプレイ対応
画像のRetinaディスプレイ対応っていろいろありますが、どれが最適なんでしょうか？ 個人的には1x、2xを使い「画面解像度で画像を切り替える」方法が一番かなと思ってたら、2倍のはずのピクセル密度が、1.5倍、3倍といったデバイスが存在するんですね。 そうなるとwordpressでも使われている「ディスプレイサイズで画像を切り替える」方法がやはりスタンダードなんですが、Gravでもこの方法採用しています。
画像のRetinaディスプレイ対応はとても簡単
Gravで画像をRetinaディスプレイ対応するには、高密度画像のファイル名に接尾辞(@2x,@3xなど)を付けてページに追加するだけなので とても簡単です。
例えば、下記の2枚の画像を同じディレクトリにアップロードします。 高密度画像は2倍にするとサイズが大きくなりすぎるので、1.5倍にしています。
- 通常の画像sample.jpg(横幅780px)
- 高密度画像のsample@2x.jpg(横幅1200px)
ページ上に読み込むのは通常の画像なので、下記のようになります。
HTMLは下記のように出力されます。 このサンプルでは、780px以下はsample.jpg、780～1200pxはsrcを参照するのでsample.jpg、 1200px以上がsample@2x.jpgとなります。
<img alt="" src="/grav2/user/pages/01.home/sample.jpg" srcset="/grav2/user/pages/01.home/sample@2x.jpg 1200w, /grav2/user/pages/01.home/sample.jpg 780w" sizes="100vw" />
高密度画像のみをアップロードすると低品質バージョンを自動生成
Gravのサイトの解説をよく読むと、高密度画像のみをアップすると低品質バージョンが自動生成されると記載されています。sample@3x.jpgをアップすると自動的にsample@2x.jpgとsample@1x.jpgがされることになります。 前の設定では2枚を作成していたので、こちらの方がより手間が減っていいですね。
実際にsample@3x.jpgをページに追加すると、Gravは2倍と1倍を作成されました。 生成された画像はキャッシュされたものなので、通常の画像のパスと異なります。
<p><img alt="" src="/grav2/images/4/5/3/9/f/4539fe29fc118415a11657e4f1cd86f672b2ebf7-sample1x.jpeg" srcset="/grav2/images/2/8/0/8/2/28082de2b0c448b11fa59c3874f71c02bb0035f2-sample3x.jpeg 1440w, /grav2/images/8/e/0/8/6/8e086cbb6c7a1cb076a938cdea49f0549b08b715-sample2x.jpeg 960w, /grav2/images/4/5/3/9/f/4539fe29fc118415a11657e4f1cd86f672b2ebf7-sample1x.jpeg 480w" sizes="100vw" /></p>image@2x.jpgを追加すると1倍を作成されました。
<p><img alt="" src="/grav2/images/0/1/4/1/8/0141808c1e93f1dec2ca4277287d03f921838f29-image1x.jpeg" srcset="/grav2/images/e/6/6/c/f/e66cf9daafa6fd9d1545dda7ee6128e079bf53e9-image2x.jpeg 1680w, /grav2/images/0/1/4/1/8/0141808c1e93f1dec2ca4277287d03f921838f29-image1x.jpeg 840w" sizes="100vw" /></p>参考サイト
https://learn.getgrav.org/content/media#higher-density-displays