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

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

シェアして頂けると嬉しいです!!

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

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

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

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

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

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

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

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

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

イメージとしては…。

Retinaディスプレイ対応(640px)
通常画像

Retinaディスプレイ未対応(320px)
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では「変更後のサイズで画像を提供する(画像サイズを適切にすると、データ サイズを大きく削減できます)」項目が赤になってしまいます。

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

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

一応このブログは
WordPressでスマホ等のRetina対応について考える

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

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

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

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

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

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

以前はパソコンからのアクセスが殆どだったものの、スマホが主流になったこの数年で、アクセスの状態もガラっと変わってきました。

このブログに関しては

・スマホ(61%)
・パソコン(32%)
・タブレット(5%)

と、スマホからのアクセスが一番多くなっています。
※最近はタブレットのアクセスも増えましたね。

速度を取るか見た目をとるか。

近年、スマホの通信状態が向上している事もあり、自分は綺麗に見える方を重視しましたが、最終的には個人の判断になってくるかと思います。

長々と書きましたが。
それでは、失礼致します。

ガジェットに関するお知らせ
現在、デジカメや家電に関する内容は、新ブログ『まころぐ』にて更新中です。当ブログよりも、丁寧に解説するよう心掛けていますので、宜しければチェックしてみて下さい!!

最後まで読んで頂き、ありがとうございます。今回の投稿と同じカテゴリーにある、次の記事は「」、前の記事は 「」となっております。

また、このカテゴリーが含まれている 「ライフ&ホビー」ジャンルには 「472件」 の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

シェアして頂けると嬉しいです!!

Comment

お気軽にコメント下さい

お名前(ペンネーム)

あなたのBLOG URL ※無記入でもOK!

コメント記入欄

※コメント欄の『利用規約』を読み、本規約の内容を承諾してから送信下さい。

※初めてコメント欄を利用される場合、管理者の認証を受けた後ブログへ表示されます。
SHARE RANKING
※12月9日現在、同じカテゴリー内にて、主要SNSでのシェア数合計が多い投稿のランキングです。
SHARE シェアして頂けると嬉しいです!!