WordPressでスマホ等のRetina対応について考える

投稿日2014.08.24
　/　更新日2014.12.08

0
4,207 views

はい。
今回はRetinaディスプレイのお話。

前回、WEB関連の記事を書いた流れで記事にしてみます。

今更感のある話題ですが…。
では、早速。

Retinaディスプレイと聞いてピンと来ない方もいらっしゃるかと思いますが、iPhoneやスマートフォン、iPad等のタブレットにはRetinaディスプレイが採用されていますよね？

どういうものか簡単に言うと、綺麗に見える画面です。

例えば、同じWEBサイトを見ていても、パソコンとスマホでは文字の滑らかさが違ったりします。スマホからのアクセスの方が綺麗で滑らかに見えます。

この原理としては、倍の大きさのものを縮小して表示させているから。例えば、横幅が320pxのスマホがあれば、640pxのものを半分に縮小。ゴチャゴチャ書いても分かりにくいと思うので、要は高解像度どいう事です。

なので、WEBサイトの文字は滑らかに表示されるのですが、問題になってくるのが画像分部。

先程の例えで言えば、画面サイズに合わせて320pxの画像を用意してしまうと、640pxに引き伸ばされて表示されてしまう為、Retinaディスプレイで見るとボヤけてしまいます。

イメージとしては…。

Retinaディスプレイ対応(640px)

Retinaディスプレイ未対応(320px)

こんな感じかと。
※フォトショップで加工したイメージ写真です。

この状態を回避するには、画面サイズの倍画像を準備する。例えば、表示したい大きさが横幅320pxであれば、640pxの画像を準備し、それを320pxに縮小して表示させる。

そうすれば、1枚目のデロリアンのような意図した表示になります。
※スマホからアクセスして頂ければ、違いが分かると思います。

WEBサイトをRetinaディスプレイに対応させる方法は沢山あって、Wordpressを利用しているなら「Retina WordPress」等で検索すれば、Retinaディスプレイに対応させるプラグインも見つかります。

プラグインを選択肢から外して考えると…。

① HTMLのimgタグに1/2サイズのwidthとheightを指定する
② CSSで画像サイズを縮小する
③ jqueryを使って画像を出し分ける
④ 記事を書く際に文中でPC用とスマホ用で条件分岐をさせておく
⑤ PCとスマホでテーマを切り分けておきfunctions.phpで文中のコードを置き換える

③を除いて、やっている事は同じですね。
一番簡単なのは②だと思います。

で、何が気になるのかと言うと、どの方法も大きいサイズの画像を縮小表示させている事。

サイトの高速化を考えた場合、元の画像サイズをリサイズしながらレンダリングすると、速度は10％前後落ちるようで、デベロッパーツールのpage speedでは「変更後のサイズで画像を提供する(画像サイズを適切にすると、データサイズを大きく削減できます)」項目が赤になってしまいます。

これがスっとしないんですよね。

①②③⑤のどの手法でも結局は同じですし、④に関しては画像を出し分ける処理が追加されるので、高速化の視点から言うと使いたくない感じで…。

一応このブログは

②のCSSを使って、画像サイズを縮小しています。
※やっぱり簡単に導入できるので。

記事中の画像サイズが全て統一されていれば他の方法もアリなんですが、テーマによって画像サイズを変えた時期があったので、それらの記事を修正する方が大変。

一応、ザックリとRetinaディスプレイに対応させる為に行ったのが、記事の内容を一括置換出来るプラグインSearch Regexを使って、文中写真のサイズとclass(元はmiddle指定)を、largeサイズに一括変換しました。

画像サイズが揃っていないので、変換しきれていない記事もありますが、とりあえずの対応は出来ていると思います。ただ、CSS4が主流になって、画像を出し分け出来るimage-set関数が使えるようになっても、この問題は解決しませんよね？？

結局のところ、現時点でサイトをRetina対応にするには、レンダリング速度の低下に目をつぶって倍サイズの画像を縮小させるか、レンダリング速度を重視して多少の画像荒れに目をつぶって元サイズのまま表示させるか。

更に高速化を目指すなら、昔の携帯のように一切画像は使わず、文中には画像へのテキストリンクを貼っておくか…。