WordPressの画像表示高速化とRetinaディスプレイ
本ブログの表示高速化のためにアレコレ試しています※1。プログラム側の対処はだいたい終わったと思うので、画像関係の見直しを行なっていますが、これが一筋縄ではいかない。
最近当たり前になったRetinaディスプレイでの表示が絡むと意外に面倒くさいのです。
- ※1 前回記事：WordPressの表示高速化メモ
画像サイズを減らしたい
本ブログでは表示する画像は大体横500px程度の大きさに抑えています。このときのファイルサイズは数十KB〜100KBぐらい。
この場合、1記事あたりの転送サイズを200KBに押さえようとすると、記事内には画像は2-3枚しか貼れません。ブログで表示される画像にはタイトルロゴやサムネイルもありますし、表示に利用しているjavascriptも結構なサイズがあるので、200KB制限を守るのはかなり大変です。
スマホ表示がボケる問題
このブログは記事の横幅は720pxになっています。これが最近のスマホでは実際には倍の1440pxや、3倍の2160pxで表示でされていたりします。スマホに限らず、PCのディスプレイも4K対応が進んできて、HTMLで設定したピクセル数と表示に使われるサイズが乖離しています。
美しい画像を表示するための仕組みなのですが、小さなサイズの画像を表示すると少々困ったことになります。例えば、横500pxの大きさでアップロードした画像をスマホで表示すると1000px（2倍）や1500px（3倍）に引き伸ばされて表示されます。
JPEG画像なら拡大しても粗は（それほど）目立ちませんが、PNGやGIF画像では線がボケる原因になります。横500pxに抑えるために縮小をかけた画像では事態が悪化し、縮小→拡大と2度の変換がかかってボケボケになってしまいます。
この問題に対する正攻法は、大き目の画像をアップロードしておいて閲覧側で縮小表示させることです。しかし、それではファイルサイズが大きくなって非常につらいです。縦横2倍の画像だとファイルサイズは4倍になりますので。
srcset での対応もイマイチ
wordpressでは<img>要素のsrcset属性を使って画像を出し分けることができます。大き目の画像をアップロードして、wordpress側で小サイズの画像を自動作成。あとは閲覧側の画面解像度に合わせて送信する画像を出し分けます。
悪くない機能なのですが、wordpressの小サイズ画像の自動作成機能が今ひとつ使いにくいのと※2、高解像度ディスプレイに対しては大きな画像を送らないといけないのが不満です。
ロゴはPNG→SVGで対応
タイトルロゴやヘッダ画像は全てのページで表示されるので、表示速度に与える影響が大きいです。なるべくギリギリまでファイルサイズを削りたいのですが、下手に削るとスマホ表示がボケボケになってしまいます。このブログでも以前はボケたタイトル画像が表示されていたと思います。下記画像の左側の状態。
・
大きなファイルサイズでアップロードすれば問題は解決するのですが、ファイルサイズが2倍以上（2.1KB→4.9KB）になりますし、将来さらに高い解像度が必要になるたびに追加するのも味が悪い。iPhoneXだと3倍解像度ですし。
そこで、少し頑張ってInkscapeでロゴをSVG化してみました。ファイルサイズは3KBになりましたが、将来大きな解像度が標準になっても無作業で対応できます。
スクリーンショットが難関
自分で作った・作る画像は最初からSVGにすれば良いのですが、スクリーンショットのような、自作ではない画像をどうしたものか悩んでいます。
ロゴのような簡単な画像なら Inkscpaeでパスを拾ってSVG化できるのですが、複雑な画像はお手上げですので。
もう少し、いろいろ考えてみます。何か良い解決方法があったら教えてください。