retina-weight-saving_ecmg

ワードプレス

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

Retinaディスプレイでオリジナルの画質を再現したいなら、画像を2倍のサイズでアップロードすれば綺麗に見えること。その代償としてページの表示が遅くなってしまうこと。Windowsではそこまでの解像度は必要ないこと。

そんな話に触れつつ、前回の記事ではRetina表示対応における問題対策として【OSによって適切な解像度の画像を表示させる】方法を紹介。プラグインひとつで解決できました

これで「Macで綺麗に。Windowsでサクサク表示。」は達成したことになりますが…

高解像度画像の軽量化(圧縮)

さて、Macでもサクサク表示してもらわないと困るわけです。先の対策だけではMacで表示される画像のボリュームは大きいまま。

じゃあそれも解決しましょう。こっちもプラグインひとつで。

ここでは混乱を避けるために以下のようにワードを使い分けます。
「画像サイズ」=画像の幅などの大きさ
「画像ボリューム」=画像のファイルサイズ

Compress JPEG & PNG imagesの導入

retina-and-score_18

Compress JPEG & PNG images】は、アップロード画像を圧縮してくれるWordPressプラグイン。あの有名なWEBサービスTinyPNG のプラグインバージョンです。

それなりにガツンと圧縮してくれるのにしっかり綺麗な状態を維持してくれることで有名なサービスですね。時には画像ボリュームを半分以下にしてくれることもあります。

WEBサービスのほうを使ってもいいのですが、プラグインとしてインストールしておけば画像をアップロードするたびに自動で圧縮してくれるので楽ちん。必要なときにだけ発動させることができるのも魅力です。

さらに嬉しいのは、どのサイズの画像に対して圧縮を行うか設定できるところ。つまり、自動生成される画像を圧縮対象にしないことが可能。そこが今回のRetina対応化&軽量化対策にばっちりマッチするんです。

「ん?自動生成されている画像ってなに?」という方はまずこちらから 

知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

Compress JPEG & PNG imagesの導入と設定方法はこちら 

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方

プラグインでの圧縮対象はオリジナル画像だけにします。ここで必要なのは、Macで表示されるオリジナル画像の軽量化だからです。前回紹介した対策をしていれば、Windowsでは軽い画像が表示されているのでこれ以上圧縮しなくても大丈夫。もちろん必要だと感じる場合はチェックを入れてください。

retina-and-score_18

無料で使用できるのは1ヶ月に500ファイルまでです。ひとつチェックを増やせば半減することもお忘れなく!詳しくは⇒こちらの記事で。

はい。これだけ。やるべきことはこれで完了!
…「やるべきこと」、は完了。…「知っておくべきこと」が、あと一つ残っています。

JPEG PNG GIF。画像形式の使い分け

いくら圧縮したからといっても、まだまだ重たい場合も出てきます。そこで必要になってくるのが、貼り付ける画像形式を判断すること。気にしすぎ?いえ、サイトをRetina対応させたいあなたには特に必要なことです。使う画像形式、なんとなーく統一して決めていませんか?

私はこれまで、なんでもかんでもPNG画像を貼り付けていました。最初にちょっと調べて、画質のクオリティーが1番高い、となんとなーく知ったからです。それ以降は●●の一つ覚えのようにPNG、PNG、PNG…

で、今回を機にあともうちょっとだけ調べたら、もうちょっとだけ分かりました。一番の収穫は、「記事に使う画像全てがPNGである必要は無い」と分かったことです。

PNGはボリューム満点

例えばもうひとつの対策記事で説明に使ったこの画像。 

retina-and-score_12

これはJPEGです。ボリュームは76.97kb。今だから察しがつくと思いますが、実はこれ、「Compress JPEG & PNG images」を通したあとの値です。元々のボリュームは99kb。あまり圧縮が効かなかったように思えますが、既に圧縮して出力しているからです。
(※詳しくは⇒こちら

一方、この画像をPNGで書きだした際のボリュームはというと…
圧縮前で929.5kb、圧縮後で366kbでした。

おおっ!めっちゃ圧縮できてるじゃない!…って違うんです。伝えたいのはそこじゃなくて、画像形式が違うだけで、ここまで画像ボリュームに差が出てくる、ということです。圧縮前で言うと約10倍です。

確かにJPEGとPNGを並べて猛烈に拡大比較すると、違いは分かりました。でも正直なところ、これで10倍!?といった感じです。実際、上の画像を見てそこまで極端な劣化を感じましたか?

もちろん、仕事に関わるポートフォリオのコンテンツとしてアップロードする必要があったり、作品として”そのまま”表現したいのであれば話は別です。むしろRAWデータやTIFFなど、よりクオリティーが高い画像が必要な場合もあるようです。

で、このサイトでは必要でしょうか?…必要なさそうです。

JPEGで一本化!というわけにもいかない

それでも、全てJPEGで済むかといえばそうでもないんです。JPEGが得意とするのは、連続して色が変化する画像。つまり写真のような画像です

逆に、文字やロゴ、図形のようなラインがくっきりしているものをメインとして含む画像に関しては苦手とし、境界線が滲んで見えてしまうことがあります。そして色数が極端に少ない、単色系の画像に使用すると、逆にPNGよりボリュームアップしてしまうことも多くなります。

そうなるとやはり、使い分けが必要となってくるということが分かります。画像形式にはそれぞれ長所と短所があり、ブログレベルで必要な最低限の知識は持っておいたほうが良さそうです。

詳しくはこちら 
知っているつもりの拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

Retina対応と軽量化を図る使い分け

詳細は上の使い分け記事に任せるとして、結果的にJPEGは、Retina対応と軽量化対策の両立には欠かせない中心的存在になります。画像を2倍のサイズにしてもボリュームが小さいことが最大の恩恵。圧縮をかけた際の劣化を気にするよりも、2倍サイズの画像がギュッと収まっている方が、実際には綺麗に見えるのです。まさに雲泥の差と言えるほどの違いです。

Retina対応化まとめ

静止画像はJPEG形式をメインとして使用する

表示させたい2倍サイズの画像をアップロードする

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

オリジナル画像には圧縮を施す

以上となります。ただし【表示させたい2倍サイズの画像をアップロードする】に関しては注意が必要です。特にアイキャッチ画像はページのトップにあることがほとんどでしょう。「ページにアクセスしてから実際に表示されるまで」、つまり「ファーストビューでの読み込み時間」が長くなる原因となるからです。

ユーザビリティーとページ表示速度の基準として、Googleの提供するPageSpeed Insightsがよく取り挙げられます。そこでも「ファーストビューでの読み込み時間」は重視されているようです。

それでも今回の一連の対策を行えば、ちょっとサイズ(幅×高さ)を調整するだけでアラートが出なくなったり…そう、実は今回のRetina対応に関する一連記事は、PageSpeed Insightsでのスコアも同時に上げる対策と同時進行で検証した一部、「Retina対応方法部分」でした。

個人的にはスコアばかり気にする必要もないと考えているので、あくまでユーザビリティーの基準のひとつとして捉え、【ブログ画像のRetina表示対応】と【PageSpeed Insightsのスコア】。これらを両立しバランスさせる視点で、今後はスコア対策にも触れていこうと思います。

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

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

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  2. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. retina_ecmg
  2. facebook-fast-display_ecmg
  3. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!BackWPupプラグインで自動保存のタイマー設定

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

  4. annotation-image-ecmg

    ワードプレス

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

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

  5. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  6. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

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

特集記事

  1. todoist-tips_ecmg
  2. retina_ecmg
  3. theme-change_ecrt
  4. improvement-flow_ecmg
  5. todoist_ec
  6. valuable-content-from-image_ec

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

todoist

人気記事

  1. chrome-font_ecmg-1
  2. child-theme_ecmg
  3. media-setting_ec
  4. todoist-basic_ec-ps
  5. compress-jpeg-png-images-ecmg
  6. screenpresso-initial-setting_ec

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

tcd-mag

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. enlarge-image-ecmg
  3. todoist-productivity_ecmg
  4. chrome-full-screen-capture-ecmg
  5. blog-theme-mag_ecmg-ps
  6. lightshot_ecmg

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

retina-os-solution

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. analytics-ip-filter-ecmg
  3. retina-text-widget-ecmg
  4. backup-all-in-auto_ec
  5. screenpresso-initial-setting_ec
  6. feedly-count-problem_ecmg

ゆっくり、フシギな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. facebook-fast-display_ecmg
  2. todoist-productivity_ecmg
  3. widgetoon-js-count-jsoon_ecmg
  4. lightshot_ecmg
  5. todoist-constitution_ec
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. todoist_ec
  3. theme-change_ecrt
  4. extension-tools-for-bloggers_ec
  5. improvement-flow_ecmg
  6. adjust-the-button_ecmg

人気記事

  1. jpg-gif-png_ecmg
  2. media-setting_ec
  3. todoist-basic_ec-ps
  4. child-theme-mechanism_ecmg-ps
  5. chrome-full-screen-capture-ecmg
  6. chrome-font_ecmg-1
  7. child-theme_ecmg

最近の記事

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

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  2. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  4. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  5. todoist-extension_ecmg

    マネジメント

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