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. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  2. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  3. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  4. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. LightShot-Screenpresso_ecmg

    WEBデザイン

    辿り着いたブログ用キャプチャーツール、LightShotとScreenpresso。機能比較と併用の…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  2. set-double-rectangle_ecmg
  3. like-button-card_ecmg-ps
  4. description-video_ec
  5. chrome-full-screen-capture-ecmg

    ブログ

    ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

  6. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

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

特集記事

  1. todoist-extension_ecmg
  2. extension-tools-for-bloggers_ec
  3. adjust-the-button_ecmg
  4. improvement-flow_ecmg
  5. todoist_ec
  6. tcd-mag_ecmg-ps

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

todoist

ピックアップ記事

  1. gif-animation_ec
  2. spark-tutorial-ecmg
  3. chrome-font_ecmg
  4. like-button-card_ecmg-ps
  5. todoist-constitution_ec
  6. widgetoon-js-count-jsoon_ecmg

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

tcd-mag

掘り出し記事

  1. favicon-generator_ecmg
  2. screenpresso-capture-ecmg
  3. browzer-extension_ec
  4. meta-seo-inspector_ecmg
  5. todoist-re-schedule_ec
  6. analytics-ip-filter-ecmg

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

retina-os-solution

ピックアップ記事

  1. sns-count-cache_ecmg2
  2. original-share-button_ecmg-ps
  3. lightshot_ecmg
  4. quicktag_ecmg
  5. compress-jpeg-png-images-ecmg
  6. todoist-constitution_ec

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. quicktag_ecmg
  2. annotation-image-ecmg
  3. chrome-font_ecmg
  4. todoist-advanced_ec
  5. child-theme-mechanism_ecmg-ps
  6. child-theme_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. todoist-tips_ecmg
  2. theme-change_ecrt
  3. tcd-theme-user-review_ecmg
  4. improvement-flow_ecmg
  5. todoist_ec
  6. tcd-theme-selection_ecmg-ps

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. enlarge-image-ecmg
  3. firefox-full-screen-capture-ecmg
  4. unroll-me_ec
  5. media-setting_ec
  6. facebook-page-plugin_ecmg-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  2. todoist-extension_ecmg

    マネジメント

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

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  4. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  5. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
PAGE TOP