ガジェマガ

おすすめガジェットと生活改善のブログマガジン

ブログPV・アクセス

【PB Responsive Images導入】画面サイズに合わせた画像を出し分けてページを軽量化する

更新日:

ウェブサイトの表示速度改善のネックになるのは画像の重さだ。この画像を軽くできればウェブサイトのデータ量を大幅に削減して、表示速度を早めることが出来る。

本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。




そこで今回閲覧者の画面幅に併せてレスポンシブイメージを出し分けるプラグインを導入したので効果を報告したい。

導入結果

結論から言ってしまうとウェブサイトのデータ量の軽量化には成功したけど、それほど大きな違いはない。具体的にガジェマガの画像が多いページ(アームでノートパソコンを宙に浮かせてハイテクデスクトップ環境を構築しました)を例に説明すると、ページ全体のデータ容量が3.4メガから2.9メガまで減った。500キロの削減だ。

そのページの総データ容量はChromeのデベロッパーツールからNetworkタブを選択することで確認できる。キャッシュを読み込まないようにCtrlキーとF5を同時に押してスーパーリロードしよう。

パソコン表示だとページのデータ量は3.4メガで

これがスマホ表示だと2.9メガになった。

これを大きいと見るか小さいと見るかだけど、今の日本の通信速度を考えると無視できる差だと思う。それでも俺がPB Responsive Imagesを導入するのは、月末にスマホのデータ通信制限で苦しんでいる人が多いからで、その人達には700キロの差はかなり大きいからだ。月末にアクセスが落ちる事態は避けたいので、少しでも多くの人にガジェマガを見てもらえるように導入している。

劣化しすぎるという問題点

PB Responsive Imagesが自動でリサイズしてくれる画像は思ったより劣化が激しい。スマホの横幅は大きくて420pxほどを想定していて、ガジェマガのスマホ画面では画像は横一杯に表示するので最大で420pxほどの大きさになる。それならPB Responsive Imagesを使ってスマホで420pxの画像を表示するように設定しても良いんだけど、あまりにも画質の劣化が激しくて見れたもんじゃなかった。

納得出来るレベルを探した結果、横幅800pxに落ち着いた。ワードプレスにアップロードする段階での解像度が横幅900pxだから、たった100pxの削減にしかなっていない。

それでもデータ容量を700キロ削減できているのは事実だし、このプラグインを入れているからと言って動作が重くなったりは無いので、このまま使い続けることにしている。

Sponcerd


PB Responsive Images設定方法

まずはPB Responsive Imagesプラグインをインストールして有効化するだけで画像の出し分けはもうできているので、スマホで自分のウェブサイトを見ながら納得行く画質のサイズを設定する。

ワードプレスの設定にResponsive Images項目が追加されている。ここから詳細設定が可能だ。

これが現在のガジェマガの設定だ。

それぞれの意味はこうだ。

  • それ以外 800pxの画像を出力
  • 420px以上 800pxの画像を出力
  • 600pxから800px 900pxの画像を出力
  • 885px以上 900pxの画像を出力

画面サイズ600px以下では800pxの画像を表示して、600px以上では900pxの画像を表示する設定にしている。

Quaryの数値を自由に変更することで、任意の画像出力サイズに変更できる。

設定が保存できない

これ俺の環境だけかもしれないんだけど、設定画面で数値を入力してSave Changesを選択すると画面が真っ白になって設定が保存できない。だから設定するために少し遠回りをした。その方法も書いておきたい。

ここではphpを直接弄って設定を変更する。Wordpressメニューのプラグイン→プラグイン編集→PB Responsive Images→選択→options.phpへと進むと123行目から128行目に画像サイズの設定項目がある。

ここで任意の数字に調整して、ファイルを更新する。

その後にPB Responsive Imagesの設定に戻って、Restore Defaults(設定を初期化)を選択するとoptions.phpからのデータが読み込まれて変更した数値が反映される。

実際にウェブサイトを確認すると画像の大きさが変わっているはずだ。

細部に神は宿るではないけど、ブログを運営して記事を書いているのであれば、アクセスを取るための施策はなんだってしていきたい。その意味で、データ通信制限中の閲覧者にも優しくなるこのプラグインの仕様はどこかで役に立つはずだ。

まとめ ライフハック

2018/12/16

【2018年版】生活が変わるガジェマガ式買ってよかったもの16選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 本 ...

ReadMore

スマホ・タブレット ライフハック

2018/12/11

家電量販店販売員と交渉してスマホを安く購入する方法【応用可】

どうせ同じスマホを購入するなら1円でも安く買いたい。そんな人におすすめなのが家電量販店でのスマホ販売員との交渉だ。 家電量販店の販売員はショップの店員さんと違って表には出さない下げ幅を持っていることが多く、うまく交渉することで相手が持つ下げ幅を最大限引き出すことができる。 今回は一時期電話番号を23回線保有しながら月の支払いが2,000円程度だった元携帯乞食でありながら、家電量販店と携帯ショップでのスマホ販売経験もある俺が値下げを引き出すコツを教える。 本日もガジェマガ(@Gadgetkaeru)をご覧い ...

ReadMore

パソコン・周辺機器

2018/11/27

【Matebook X Proレビュー】Macの外観サーフェスのスペック

2018年の6月に発売されたばかりのMatebook X Proを購入したので、ライバル機であるMacbookやSurfaceと比較しながらレビューする。 Matebook X Proの最大の魅力は3:2比率で画面占有率91%の3Kディスプレイだから、そこを中心にボディの質感からスペックまで網羅した。 今薄型ノートパソコンウルトラブックの購入、買い替えを検討している人は参考にしてほしい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 Huawei Matebook X ...

ReadMore

お得情報 スマホ・タブレット

2018/11/18

【ZenFone5Zが5万円】GEARBESTでスマホを安く買う

GEAR BESTって知ってるだろうか。簡単に言うと中国のAMAZONなんだけど、日本への進出も着々と進めていて、最近では日本倉庫まで作ってしまった通販会社だ。AMAZONも楽天もあるなかで更に通販会社の選択を増やす必要があるのだろうかという疑問を抱く気持ちはよく分かるんだろうけど、GEAR BESTには独自の魅力がある。今日はGEAR BESTが同魅力的なのか、具体的に製品を列挙しながら解説したい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 GEAR BESTの魅 ...

ReadMore

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

スマホ・タブレット

2018/11/9

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

これからスマホを買う人、次のスマホへの買い替えを検討している人向けに、AndroidとiPhoneの違いとそれぞれの優れている点を比較解説する。 また、なぜ俺がiPhoneからAndroidに買い替えたのかを解説したい。 迷っている人はとりあえずこの記事を読めば違いがすべて把握できる。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 iPhoneもAndroidもできることはほぼ一緒 当たり前だけど主に出来ることはほとんど一緒だから、iPhoneとAndroidの違いはト ...

ReadMore

スマホ・タブレット まとめ 格安SIM

2018/12/16

【ほぼ同じ】格安SIM11社の料金と特徴比較+おすすめスマホ15

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社11社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 格安SIMはどこも一緒で ...

ReadMore

-ブログPV・アクセス

Copyright© ガジェマガ , 2018 All Rights Reserved Powered by AFFINGER5.