retina-os-solution_ecmg

ワードプレス

【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適切表示させる方法

ページ表示速度の観点で考えると、画像においてはできるだけ小さいサイズでアップロードするべきです。でも一方で、MacのRetinaディスプレイなど解像度の高い環境での見栄えが気になります。そう、画像がボヤケて見えてしまうのです。

例えばRetinaディスプレイでオリジナルの画質を再現したいなら、単純に2倍のサイズでアップロードすれば綺麗に見えます。でもその分、貼られる画像が多くなるほど、表示速度はガッツリと重くなっていく。そしてWindowsではそこまでの解像度も必要ありません。Windowsでの閲覧者にとっては「ただ重い」だけです。

じゃあどーしたらイインダヨ!ボクはRetina対応させたいの!

そうですね。これはもはやワガママな話では無いと思います。デバイスのディスプレイはどんどん高解像度化し、それらが普及していっています。

でも「デバイスごとの表示切り替え」なんて、ちょっと調べてみたぐらいでは、私達のような初心者にはムズカシそうです。だから、そんな初心者でもできる方法を選びましょう

ここで考えるべきことは2つ。

OSによって適切な解像度の画像を表示させる

高解像度画像の軽量化

どちらもプラグインで解決させます。早速いってみましょう。

OSによって適切な解像度の画像を表示させる

以前、WordPressプラグイン【Simple Image Sizes】を使って、「メディアの追加」画面に現れる画像サイズの選択肢を増やす方法を紹介しました 

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法

そこでも触れている通り、ページ表示速度の観点からも挿入できる画像サイズの選択肢を増やしておくべきです。そしてそれにはもう一つ・・・今回のRetina対応化の上でも重要な理由があるんです。

WindowsとMacでの見栄えの違い

下の2つの画像を見比べて下さい。どちらが綺麗に見えますか?
(※モバイル環境では表示が小さくなっているので、違いが分かりづらいと思います)

 カラム最大幅にリサイズしてからアップロード⇒フルサイズで挿入した画像

retina-and-score_10

 カラム最大幅の2倍サイズの画像をアップロード⇒size5(カラム最大幅)で挿入した画像

retina-and-score_11

「size5」とは、プラグインで追加した選択肢です。詳しくは上の記事  を参照下さい。

閲覧環境によって、それぞれこんな答えが返ってくるのではないでしょうか。

え?…おんなじぐらいじゃない?

いやいやいや!完っ全に下の画像のほうがクッキリしてるでしょ!

どうでしたか?もし両方のOS環境を持ち合わせている人は、ぜひ見比べてみて下さい。

このサイトの記事最大幅は628pxです。プラグイン紹介記事の復習になりますが、下のほうの画像は「Simple Image Sizes」によって、アップロードした画像とは別途自動生成されたもの

ここでは幅1256pxの画像をそのままアップロードし、記事最大幅(628px)に自動リサイズされた「size5」のものを貼り付けています。

しつこいようですがこれは、元画像とは別途生成されたもの。だから表示サイズはそのままなのに、元よりずっと軽い画像が貼られている。「リンク先」を「メディア」にして、クリックでオリジナル画像を拡大表示させたい時などは非常に有効な手法です。

現在はWordPressテーマを変更したため、記事最大幅は変わっています。

さて、ここまで復習した上で考えてみましょう。まず、Windowsユーザーの言う『おんなじぐらいじゃない?』の理由は分かりますね。上の画像も下の画像も、同じサイズの画像だから

ではMacユーザーのコメントについて。実際、完全に下の画像のほうが綺麗に見えます。まさに雲泥の差と言えるほどですね。これはなぜでしょう?同じサイズのはずでは…?

答えは簡単。Macでは基本的に、アップロードしたオリジナル画像が表示されるためです。

実例その1

文章で説明しただけではピンと来ないかもしれません。画像を使ってOSごとに確認していきましょう。例えば下の画像。これは上で挙げた例と同じく、記事最大幅の2倍サイズでアップロードし、別途生成された選択肢の中から、記事最大幅の画像を貼り付けたものです。
(表現がムズカシイ!)

retina-and-score_12

MacでもWindowsでも問題なく綺麗に表示されていると思います。さて、実際にOSごとに切り分けて出力されているのでしょうか?Chrome拡張「View Image Info」で確認してみます。

インストールはこちらから

Chromeウェブストア

Firefoxでは右クリックで現れる「画像の情報を表示」からすぐに確認できます。
Windows環境で確認

retina-and-score_13

画像の上で右クリック→「View Image Info」を選択すると画像の情報が表示されます。ここで注目したいのは画像URL画像ファイルサイズ。この画像は「retina-and-score_12」とリネームしてアップロードしましたが、ここではURLの最後に「-628×419」と付いています。

指定した通り、記事最大幅の画像が表示されているということですね。ファイルサイズは29.38kb。ではMacでも確認してみましょう。

Mac環境で確認

retina-and-score_14

ご覧のとおり、Mac環境では画像URLはアップロードしたそのままのものになっています。
つまり、元画像が表示されているということ。画像ファイルサイズも76.97kbと、大きくなっていることが確認できますね。

実例その2

もう一つだけ実例を挙げておきましょう。下のような小さいサイズで貼り付けた場合です。
今回はそこまで大きな画像を使う必要は無いので、幅600pxの画像をアップロード。そして拡張子は先程のjpgから変更し、pngで試してみます。

retina-and-score_15

retina-and-score_15

貼り付けに関しても検証。左の画像はWordPressデフォルトで自動生成されている「中サイズ」(300px)。右の画像は「Simple Image Sizes」で追加した同じ300pxの選択肢。同じ結果になるか検証してみました。

Windows環境で確認

retina-and-score_16

Mac環境で確認

retina-and-score_17

「中サイズ」(300px)追加した300pxの選択肢ともに上記結果となりました。実例1の時と同じように、画像出力がOSごとに切り替えられていることが分かります。ここでは割愛しましたが、gif画像でも同様の結果を確認できました。ではまとめます。

Macでは、アップロードしたオリジナル画像が常に表示される。

Windowsでは、選択した自動生成画像を表示する。

上記OSごとの出力切り替えは、自動で行われる。

WordPressデフォルト選択肢「中サイズ」などを貼り付けても同様。

プラグインで追加したサイズを貼り付けても同様。

これらはjpg、png、gifの拡張子全てに適用される。

つまり、倍サイズの画像をアップロードし、プラグインで貼り付けサイズの選択肢を増やしておけば最強ということですね。綺麗に表示させるために、常にフルサイズで貼り付けていた人には、朗報でしょう?Macでも綺麗に。Windowsでもサクサク。というわけです。

使用するWordPressテーマによっても違いがあるかもしれません。あくまで実例として参考にしていただき、ご自身の環境で確認してみてください。

これでWindows表示に影響なくRetina表示対応ができました。
OSによって適切な解像度の画像を表示させる】は達成。Windowsでサクサク。

…あれ?Macでもサクサク?にならないですよね。Macではオリジナル画像が表示されているわけですから。というわけで次はもう一つの課題【高解像度画像の軽量化】をします。Macでもサクサクしましょう 

【Retinaディスプレイ対応2】スリムで美しいブログを実現させる、画像圧縮と不可欠な知識

 Retinaディスプレイ対応まとめ

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  2. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 簡単で効果的なストレス解消方法。「リセットボタン」で本当のリラックスを呼びだそう…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

    いまだから、考えるべきこと。音楽制作をしていると、"自分の発するも…

  2. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  3. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  4. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  5. analytics-ip-filter_ecmg

    マーケティング

    自分のアクセス痕は残さない。アナリティクスのフィルタで自宅のIPアドレスを除外する方法

    自分の足あとを、残してはならない。サイト運営をしているなら、Goo…

  6. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. tcd-theme-user-review_ecmg
  2. adjust-the-button_ecmg
  3. business-books_ecmg
  4. retina_ecmg
  5. theme-change_ecrt
  6. extension-tools-for-bloggers_ec
  7. tcd-mag_ecmg
  8. todoist-tips_ecmg
  9. todoist-extension_ecmg
  10. tcd-theme-selection_ecmg

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. chrome-font_ecmg
  3. facebook-page-plugin_ecmg
  4. like-button-card_ecmg
  5. jpg-gif-png_ecmg
  6. todoist-class_ecrt
  7. child-theme_ecmg
  8. reset-button_ecrt
  9. todoist-advanced_ec
  10. phrase-express_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…
  2. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  3. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  4. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…
  5. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  2. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  3. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  4. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  5. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-mag_ecmg

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  3. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  4. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  5. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP