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」のものを貼り付けています。

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

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

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

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

実例その1

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

retina-and-score_12

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

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

Chromeウェブストア

以前紹介したChrome拡張「Image Size Info」でも確認できますが、OSごとに出力切り替えされているかの確認は「View Image Info」の方が不具合無く表示されるので、今回はそちらを使用します。また、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. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  2. サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp …
  3. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  4. 簡単で効果的なストレス解消方法。「リセットボタン」で本当のリラックスを呼びだそう…
  5. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

関連記事

  1. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  2. intuitive-custom-post-order_ec

    ワードプレス

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

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

  3. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  4. display-speed_ec

    ワードプレス

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

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

  5. browzer-extension_ec

    ワードプレス

    “WEBサイズマスター”へ。Chrome拡張「Page Ruler」「Ima…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

  6. annotation-image_ec

    ワードプレス

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

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

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

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

レク.サウンドラボ

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

特集記事

  1. adjust-the-button_ecmg
  2. original-share-button_ecmg
  3. tcd-theme-selection_ecmg
  4. valuable-content-from-image_ec
  5. business-books_ecmg
  6. improvement-flow_ecmg
  7. todoist-extension_ecmg
  8. theme-change_ecrt
  9. tcd-theme-user-review_ecmg
  10. todoist_ec

ピックアップ記事

  1. gif-animation_ec
  2. todoist-routine_ecrt
  3. blog-contents_ecrt
  4. jpg-gif-png_ecmg
  5. like-button-card_ecmg
  6. todoist-advanced_ec
  7. sns-count-cache_ecmg
  8. facebook-app-id-app-secret_ecmg
  9. todoist-constitution_ec
  10. original-share-button_ecmg

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

business-books

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

todoist

おすすめ記事

  1. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…
  2. WordPressサイトを丸ごとバックアップ!「BackWP…
  3. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  4. “WEBサイズマスター”へ。Chro…
  5. 基本的なSEOチェックに。DescriptionやOGPを確…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. tcd-theme-selection_ecmg

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  2. valuable-content-from-image_ec

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
PAGE TOP