WordPressでスマホ等のRetina対応について考える
- 投稿日2014.08.24
-
0
- 4,278 views
はい。
今回はRetinaディスプレイのお話。
前回、WEB関連の記事を書いた流れで記事にしてみます。
今更感のある話題ですが…。
では、早速。
Retinaディスプレイと聞いてピンと来ない方もいらっしゃるかと思いますが、iPhoneやスマートフォン、iPad等のタブレットにはRetinaディスプレイが採用されていますよね?
どういうものか簡単に言うと、綺麗に見える画面です。
例えば、同じWEBサイトを見ていても、パソコンとスマホでは文字の滑らかさが違ったりします。スマホからのアクセスの方が綺麗で滑らかに見えます。
この原理としては、倍の大きさのものを縮小して表示させているから。例えば、横幅が320pxのスマホがあれば、640pxのものを半分に縮小。ゴチャゴチャ書いても分かりにくいと思うので、要は高解像度どいう事です。
なので、WEBサイトの文字は滑らかに表示されるのですが、問題になってくるのが画像分部。
先程の例えで言えば、画面サイズに合わせて320pxの画像を用意してしまうと、640pxに引き伸ばされて表示されてしまう為、Retinaディスプレイで見るとボヤけてしまいます。
イメージとしては…。
こんな感じかと。
※フォトショップで加工したイメージ写真です。
この状態を回避するには、画面サイズの倍画像を準備する。例えば、表示したい大きさが横幅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対応にするには、レンダリング速度の低下に目をつぶって倍サイズの画像を縮小させるか、レンダリング速度を重視して多少の画像荒れに目をつぶって元サイズのまま表示させるか。
更に高速化を目指すなら、昔の携帯のように一切画像は使わず、文中には画像へのテキストリンクを貼っておくか…。
以前はパソコンからのアクセスが殆どだったものの、スマホが主流になったこの数年で、アクセスの状態もガラっと変わってきました。
このブログに関しては
・スマホ(61%)
・パソコン(32%)
・タブレット(5%)
と、スマホからのアクセスが一番多くなっています。
※最近はタブレットのアクセスも増えましたね。
速度を取るか見た目をとるか。
近年、スマホの通信状態が向上している事もあり、自分は綺麗に見える方を重視しましたが、最終的には個人の判断になってくるかと思います。
長々と書きましたが。
それでは、失礼致します。
ガジェットに関するお知らせ
現在、デジカメや家電に関する内容は、新ブログ『まころぐ』にて更新中です。当ブログよりも、丁寧に解説するよう心掛けていますので、宜しければチェックしてみて下さい!!
最後まで読んで頂き、ありがとうございます。今回の投稿と同じカテゴリーにある、次の記事は「重いプラグインを見直してWordPressを高速化するまとめ」、前の記事は 「ロリポップやチカッパでWordPressの高速化にチャレンジ!!」となっております。
- リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった! 2024年11月24日
- 決まりきらない潮位でも釣りが出来ればそれでOK!! 2024年11月15日
- 防犯カメラ『Google Nest Cam』使用レビュー!工事不要の簡単設置でオススメ!! 2024年11月3日
- 学校のプリント整理にScanSnap iX1600でデジタル保存した感想 2024年10月20日
- イッキ見したドラマ『異世界居酒屋のぶ』は惹き込まれる世界観でオススメ!! 2024年9月29日
Comment
お気軽にコメント下さい※初めてコメント欄を利用される場合、管理者の認証を受けた後ブログへ表示されます。