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. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  4. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

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

  2. dash_ecmg

    マネジメント

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

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

  3. unveil-lazy-load_ec

    ワードプレス

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

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

  4. jpg-gif-png_ecmg
  5. LightShot-Screenpresso_ec

    WEBデザイン

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

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

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

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

レク.サウンドラボ

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

特集記事

  1. retina_ecmg
  2. extension-tools-for-bloggers_ec
  3. business-books_ecmg
  4. display-speed_ec
  5. tcd-mag_ecmg-ps
  6. adjust-the-button_ecmg
  7. improvement-flow_ecmg
  8. todoist-extension_ecmg

ピックアップ記事

  1. tcd-theme-options_ecmg
  2. todoist-basic_ec-ps
  3. tcd-theme-widget_ecmg
  4. todoist-productivity_ecmg
  5. blog-theme-mag_ecmg-ps
  6. like-button-card_ecmg-ps
  7. phrase-express_ecmg
  8. quicktag_ecmg

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

business-books

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

todoist

掘り出し記事

  1. retina-text-widget_ecrt
  2. mailbox-goodbye-newapp_ec
  3. todoist-design_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. original-share-button_ecmg-ps
  2. unroll-me_ec
  3. tcd-theme-widget_ecmg

ゆっくり、フシギな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 | Blogger おすすめ書籍

「言葉にできる」は武器になる。 コンテンツの秘密-ぼくがジブリで考えたこと
プロフェッショナルは「ストーリー」で伝える 現代広告の心理技術101

Requ.log | おすすめエッセイ

言葉の贈り物 今日の人生

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

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

  1. restriction_ecmg-ps
  2. blog-contents_ecrt
  3. reset-button_ecrt
  1. todoist-tips_ecmg

    マネジメント

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. tcd-mag_ecmg-ps

    ワードプレス

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
PAGE TOP