iPhoneで画像がぼやけてる!あなたのサイトのRetina対応大丈夫?

 

皆さん、自分のサイト、iPhoneでよく見てる?!

日ごろiPhoneでいろいろなサイトを見てると、「あ、画像がぼやけちゃってるな。」「Retina対応してないな。」ってことがよくあります。

今日は、実は皆、わりと見落としてるんじゃないかなって思う、Retina対応について書いてきましょー!

そんなの知ってるよって感じだったらごめんね♪

 

Retinaディスプレイとは?

Retinaディスプレイ(英語:Retina Display)は、アップル社製製品のうち、高精細ディスプレイを搭載したモデルに与えられる名称、およびディスプレイそのものを指す名称である。

「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

レティナディスプレイは、前のディスプレイと比べ、画面解像度とコントラストが4倍ほどに達し、もっと鮮やかで深い色になる。

by wikipedia

 

・・・という、高解像度のディスプレイ

iPhone、iPadや、Mac一部機種に搭載されています。

Apple以外でも同じような高解像度のディスプレイが出てきています。

 

何が問題?

Retinaディスプレイの場合、普通の2倍の解像度。

よりきれいな画面が見られるんでしょ?いいじゃん(^∇^)って思ってたんですが、実は、このRetinaディスプレイだと、

表示するより2倍の大きさで画像を用意しておかないと、ぼやける

という問題が・・・。

たとえば、こちらのイラスト。

マコ 150×150px

幅150pxの大きさで表示していますが、これを同じ150pxの大きさの画像で用意してしまうと、

iPhoneでの画像

スマホ150px

 

ぼやけてるー・・・!

 

300×300px以上の大きさで用意して、width:”150px” height:”150px” の指定をして表示させることでやっと、元通りになります。

スマホ300px

パソコン用の大きな画像を等倍で載せていて、スマホでは縮小されて表示されるときは気にしなくて大丈夫です(MacのRetinaディスプレイのだったらぼやけちゃうけど)が、スマホでもそのままのサイズになる小さめ画像のとき要注意です!

リストマークみたいに、あまりに小さいものは、ぼやけても気にならないかと思います。

 

ワードプレスの時はさらに注意!

要注意なのが、ワードプレスを利用してるとき。

画像挿入のときに、サムネイル・ミディアム・ラージと大きさを指定できます。

大きめの画像を用意しておいて、サムネイルの大きさで表示して余裕と思いきや、

300×330pxのサムネイル画像

 

スマホ画像

image

 

またぼやけてる・・・(-_-)

 

ワードプレスだと、サムネイルやミディアムなどのサイズの画像が自動生成されて、それが原寸のまま挿入されているんですよね。

(よくみると、◯◯-150×150.pngって名前になってる)

なので、サムネイルでなく、元画像をwidth、height指定して入れます(/_;)メンドイ

-150×150と、size-thumbnail wp-image-373を削除↓

300×330pxを150×150指定

 
スマホ画像

image

よしこれでOK( ^)o(^ )♪

 

 

※ちなみに、WPの自動生成されるサムネイルたちなんですが、自動生成しないように設定しておくことができるんですね!!

いまブログ書くために調べていて知りました。ムダに各サイズ作られちゃうので、使わないなら設定しておいた方がいいかも。

参考:WP サムネール画像、自動作成の無効化と一括削除

 

画像の大きさとサイト速度

画像が大きくなると、気になるのがサイト速度。

iPhoneで撮った画像なんかはそのまま使っちゃうと超絶ムダに大きいので(3,000pxとか普通にある)、最低限必要な大きさまで小さくします。

 
あとは、画像圧縮をしてます。

画像圧縮ツールなどで手動でやることもできますが、ワードプレスなら自動で画像圧縮してくれるEWWW Image Optimizerなどのプラグインが便利。

うちのように、画像多用するサイトにはおすすめです。

 
※2015/12/19追記 

EWWW Image Optimizerなのですが、画像アップロード時にエラーを起こすことが頻繁になったので、使用を停止しました。

ワードプレスのメディアライブラリで画像を編集して、「画像縮尺の変更」で縮小すると画像サイズが小さくなるので、今は圧縮ではなくそちらだけで対応していますが、これだと、-e○○○….jpgというように、新しい画像が生成されてしまうんですよね汗

また別のプラグインを使うようになったら、また追記しておきます。

 

Retinaディスプレイの時だけ2倍の画像に切り替えるJavaスクリプトなどもありますが、私は上の方法(2倍の大きさの画像を使用+画像圧縮)で、今のところ問題ないです。

(※ただし、900px以上の大きい画像については原寸のまま使用していて、MacのRetinaディスプレイには対応しきれてません・・ほとんどがスマホユーザーなので良いかなという状況)

 

いかがでしたでしょうか? Retina対応のコツはつかめましたか?

 

写真やイラストがポイントになるサイトで、スマホユーザー中心のサイトの場合は、ぜひRetina対応しておきましょう♡

 

 

おすすめ記事

 

コメントを残す

メールアドレスが公開されることはありません。