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. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  5. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする

関連記事

  1. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

  2. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  3. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  4. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  5. phrase-express_ecmg

    マネジメント

    魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「PhraseExpress」の設…

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  6. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

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

特集記事

  1. retina_ecmg
  2. todoist-tips_ecmg
  3. valuable-content-from-image_ec
  4. business-books_ecmg
  5. tcd-mag_ecmg-ps
  6. todoist_ec
  7. display-speed_ec
  8. tcd-theme-selection_ecmg-ps

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. unroll-me_ec
  3. blog-theme-mag_ecmg-ps
  4. compress-jpeg-png-images_ecrt
  5. chrome-font_ecmg
  6. intuitive-custom-post-order_ec
  7. facebook-page-plugin_ecmg-ps
  8. media-setting_ec

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. feedly-count-problem_ecmg
  2. pushbullet_ec
  3. retina-text-widget_ecrt

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-advanced_ec
  2. gif-animation_ec
  3. compress-jpeg-png-images_ecrt

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. restriction_ecmg-ps
  3. blog-contents_ecrt
  1. tcd-mag_ecmg-ps

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  3. business-books_ecmg

    マーケティング

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

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. extension-tools-for-bloggers_ec

    ブログ

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