前回の記事で試しに高解像度画像を掲載した。件の MacBook Pro を筆頭に各デバイス・ブラウザで検証したのち、今後どうするかを決めるつもりでいた。

結論としては、基本的に今後は高解像度画像を採用することにした。理由を列挙するとこのようになる。

まず自分自身の希望というか方針として、このサイトはフォトログも兼ねている。だから写真は現実的な範囲でできるだけ美しく載せたい。「現実的な範囲」や「できるだけ美しい」というのは私の判断基準なので世間一般から見たらどうでもいいボーダーラインかもしれないが、私としてはこのクオリティなら多少の通信量増加は良しとする方針だ。だいたい日本語ウェブフォントを全面的に採用しているくらいである。今更気にするほどのこともない。そもそもこのサイトが常識的に見て重いかどうかといえばはっきり言って「圧倒的に軽い」。広告の類いを一切載せていないのも大きいと思うし、JavaScript も最小限に留めている。日本のブロードバンド環境ならおそらくは重いとも感じないだろうし、MVNO の 4G 回線でもアクセスしてみたが、何のことはなく「さらー」っと表示された。

順序が逆になったが、検証の結果高解像度画像の良さがはっきり見てとれた。Retina ディスプレイの良さがいまいち分からないと言ったが、対応させた画像（2400px * 1800px の縮小表示）は圧巻の一言であった。掲載した落ち葉の写真を見た瞬間心は決まったと言っていい。このためなら対応させる意味はあると納得した。なお、この記事のタイトルで「高解像度ディスプレイ対応」などと書かずあえて「Retina ディスプレイ」としたのは、高精細なディスプレイ（Retina ディスプレイ）に標準で2倍表示するのが Mac OS の独自機能だからである。Windows などで手動設定で2倍スケーリング表示したときどのような描画品質になるのかは不明だ（高精細ディスプレイを所持していないので確認できない）。

懸念していた縮小表示によるジャギーの発生は、主なモダンブラウザでは発生しないことを確認した。Firefox、Internet Explorer、Edge、Chrome、Safari といったところ。ジャギーが発生するのは IE7,8 といった昔のバージョンのようである。IE9 からは他ブラウザと同様の表示になったらしい。
IE11 のエミュレーション機能で IE7 や 8 モードで表示させたが、画像の表示品質に変化はなかった。実ブラウザでしか発生しないようだが、私の元にはその環境がないので確認できなかった。一応対応策があったので後述の方法でフォローしている。
唯一例外的な表示をしたのが Edge だった。ウィンドウ幅 1200px 以上にしていても srcset による振り分けで小さい画像を拡大表示していたが、ウィンドウ幅をより大きくすると基準の 2400px の縮小表示になるという、よく分からない動作をしていた。よく分からないので Edge のことはとりあえず放っておくことにした。

ここからは対応するにあたっての行った点について。

まず、私の場合の基本運用についてあらためて書いておく。ここが異なれば当然対応策も変わってくると思う。

• 掲載する画像の実サイズは 2400px * 1800px を基本とする。
  それを width=”100%” height=”auto” で親要素幅に収める（結果 1200px * 900px に縮小表示される）。
• JavaScript、srcset などによる判別・振り分け表示は行わない。運用がめんどくさいので。
  WordPress がアップロード画像に対し自動で縮小サイズを作成し srcset で振り分けを行っているが、私は通常リサイズ画像には関知していない。

そして以下は対応策。

• WordPress（正確には PHP）のアップロードファイル上限サイズを変更。
  標準では 2MB が上限サイズになっていた。高解像度画像ではこの上限に引っかかることが頻発するので上限を変更。余裕を見て 10MB に。
  php.ini に

  upload_max_filesize = 10M
  post_max_size = 20M

  と記述。upload_max_filesize を 10MB にしただけではアップロード上限は 8MB となっていた。なので post_max_size も併せて変更。どのくらいが適当なのか分からないが、倍とした。
  php.ini は直接修正もできるだろうが、さくらのレンタルサーバではサーバコントロールパネルから「PHP 設定の編集」で可能。上記を追記するだけで良い。

  cf. https://serverlog.jp/wordpress-upload_max_filesize/

• CSS、img に対しベンダープレフィックスを追記。
  前述の MS IE の古いバージョンにおいて、縮小表示画像にジャギーが出ることへの対処法。

  img {
     -ms-interpolation-mode:bicubic;
  }

  と記述。先に触れたように検証環境がないため確認はできていない。

  cf. http://w3q.jp/t/3258

• （蛇足）WordPress の画像リサイズにおけるクオリティ変更。
  アップロードした画像に対して自動で複数のサイズを作成するが、この画像が軒並み画質が悪い。以前使えるかなと思ったことがあるものの、見るに堪えぬ品質で結局手前の Photoshop でリサイズ作業を行うことにした経緯がある。調べている中でこの圧縮品質を変更することができることを知ったので実行した。ちなみに圧縮品質は 100 を最低圧縮（最高品質）として以前は 90 だったのが今は 82 となっているらしい。私が見るにぼやぼやの画像で、フォトログなど写真中心のコンテンツには向かないと思われる。私は圧縮する必要はないので 100 に変更した。
  functions.php に以下を追記。

  add_filter('wp_editor_set_quality',function($quality){return 100;});

  cf. https://nendeb.com/369
  https://ja.wordpress.org/support/topic/45-アップグレードに伴う既知の問題とその解決方/

  • なお、この対策中に沼にはまることになった。functions.php に追記してアップロードしたら、シンタックスエラーで真っ白。ハァ？ と思い慎重に編集し直してアップロードしても真っ白。XAMPP でのローカル環境では正常動作することから記述ミスではない。原因がまったく分からず数時間悶えたのち、あるページに「関数を値のように扱う構文（無名関数・クロージャ）はPHP5.3以降専用です」の一言。まさかと思いサーバの PHP バージョンを確認してみると 5.2 なのであった。オィィ。
    さくらのレンタルサーバだとサーバコントロールパネル、「PHP バージョンの選択」から変更できる。推奨バージョンにしたら 5.6 だった。

    cf. http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14117239309