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. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  2. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. annotation-image_ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Screenpres…

  2. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  4. feedly-count-problem_ecmg

    ワードプレス

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

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

  5. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

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

特集記事

  1. todoist-extension_ecmg
  2. valuable-content-from-image_ec
  3. todoist-tips_ecmg
  4. tcd-theme-user-review_ecmg
  5. business-books_ecmg
  6. display-speed_ec

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. unroll-me_ec
  3. tcd-theme-options_ecmg
  4. compress-jpeg-png-images_ecrt
  5. media-setting_ec
  6. simple-image-sizes_ec-ps

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

todoist

掘り出し記事

  1. feedly-count-problem_ecmg
  2. child-theme-mechanism_ecmg-ps
  3. retina-weight-saving_ecmg
  4. retina-text-widget_ecrt

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-constitution_ec
  2. tcd-css-customize_ecmg
  3. blog-theme-mag_ecmg-ps
  4. compress-jpeg-png-images_ecrt

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. spark-tutorial-ecmg
  2. modern-dilemma-ecmg
  3. paradigm-shift-ecmg
  4. irreplaceable-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. irreplaceable-ecmg
  3. reset-button_ecrt
  4. blog-contents_ecrt
  1. valuable-content-from-image_ec

    ワードプレス

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

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  3. adjust-the-button_ecmg

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP