ガジェマガ

ガジェットと生活改善のブログマガジン【毎日更新】

ブログPV・アクセス

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

更新日:

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

本日もガジェマガをご覧いただきありがとうございます。ツイッターフォローYoutubeチャンネル登録してくれたら圧倒的に感謝します。



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

導入結果

結論から言ってしまうとウェブサイトのデータ量の軽量化には成功したけど、それほど大きな違いはない。具体的にガジェマガの画像が多いページ(アームでノートパソコンを宙に浮かせてハイテクデスクトップ環境を構築しました)を例に説明すると、ページ全体のデータ容量が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からのデータが読み込まれて変更した数値が反映される。

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

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

まとめ ライフハック

2019/2/27

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

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

ReadMore

ブログPV・アクセス

2019/2/10

【月刊ガジェマガ19年1月号】2018年振り返り

あけましておめでとうございます。1月に入ったので12月のガジェマガの活動を記録する。 先月の報告はこちら。 12月に買ったもの ドルチェグストタワーカプセルホルダー 毎日使っているドルチェグストのカプセルの保管が煩雑だったから見せる収納としてドルチェグストタワーカプセルホルダーを購入。普通に毎日使ってて便利。 Soundcore Liberty Air完全ワイヤレスイヤホン 発売日に勢いで買ってしまった完全ワイヤレスイヤホン。ikanziを持っていたけど、Ankerが作っているイヤホンの品質を確かめたくな ...

ReadMore

ガジェット ライフハック

2019/2/10

ガジェマガの中の人のポケットとカバンの中身【男の必要最小限】

多くの有名ブロガーがカバンの中身を記事にしているのにガジェマガではまだ一度も鞄の中身について書いたことがなかった。ブロガーになりたいのであれば、他のブロガーが書いている記事はしっかりと抑えておきたいということで、今回はガジェマガなりのカバンの中身と、ポケットの中身を紹介したい。 鞄はオカマの象徴 in USA 俺は中学生高校生の頃はリュックサックを使っていたし、社会人になってからはボディバッグを休日の荷物入れとして使っていた。社会人になり立ての頃にアメリカに留学していた妹と再会する機会があって、アメリカの ...

ReadMore

パソコン・周辺機器

2019/2/10

Huawei Matebook X Proを2か月使った感想【欠点あり】

去年の11月5日にMatebook X Proを購入して丸2ヵ月経った。今のメインマシンはこれ一台で、ブログ執筆も動画編集も全部Matebook X Pro一台で行っているから、購入してから2か月間でMatebook X Proに触れない日は一日もなかったと思う。 今回は丸2ヵ月使って感じたHuawei Matebook X Proに関するリアルな感想をまとめたい。 Matebook X Proに期待したこと そもそもここ2年程はパソコンを新品で購入することがなくて、型落ち中古パソコンを定期的に買い替えて ...

ReadMore

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

2019/3/19

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

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社10社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 格安SIMはどこも一緒です これからMVNO11社社のプランを紹介するけど、結論から言うとどこも代わり映え ...

ReadMore

-ブログPV・アクセス

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