ガジェマガ

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

ブログを書くコツ

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

2018年5月24日

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

トーマスです。ツイッター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キロ削減できているのは事実だし、このプラグインを入れているからと言って動作が重くなったりは無いので、このまま使い続けることにしている。

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からのデータが読み込まれて変更した数値が反映される。

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

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

スマホ レビュー

2020/11/15

【iPhone12レビュー】ライバルは2万円安いiPhone11

毎年秋の風物詩となりつつある最新型のiPhone12が今年も発売された。今回のiPhone12シリーズは4モデルもあってどれを購入するか迷うんだけど、とりあえず俺は最もベーシックで売れるであろうiPhone12を購入したからレビューしたい。 この他にもうすぐ発売となるiPhone12 Pro Maxの購入を迷っているところではあるんだけど、iPhone12とほとんど一緒だからモチベは低め。凄そうなら買う。多分買わない。 iPhone12の特徴 iPhone12の特徴は下記。 最強CPU A14チップ搭載 ...

ReadMore

ライフハック 買ってよかったもの

2021/6/17

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

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

ReadMore

ライフハック 買ってよかったもの

2021/8/1

【そもそも鞄いる?】ガジェマガの中の人のポケットとカバンの中身

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

ReadMore

ライフハック 体験談

2021/6/18

【狭い家のメリットデメリット】6畳1Kに8年住んだ感想【一人暮らし

田舎の人が都会に引っ越す際に危惧するのは部屋の狭さなんだけどそれは間違ってない。都会は家賃が高いから広い部屋に住めない。 でもそれは悪いことばかりではない。寧ろ狭い部屋は快適だな。と渋谷区6畳1Kの家に8年住んで思う。ということで今回は俺が感じた狭い部屋に住むメリットデメリットを解説する。 狭い部屋の家賃だけじゃないメリット 狭い部屋は家賃が安い。これが最大のメリットなのは間違いない。 東京都の平均家賃相場は22万円 実際俺が住む東京都渋谷区は日本でもトップクラスに家賃が高いエリアで、2LDKとかを選んだ ...

ReadMore

ライフハック

2021/7/25

タワマンに住みたいからメリットデメリットを考える【一人暮らし】

久しぶりに興味があることが見つかって最近テンションが上がってる。タワマンに住みたい。今の8万円の家の立地は最強だし、設備の割に家賃が安くて気に入ってはいるんだけど、さすがに9年住んで色々と限界を感じているのが正直なところ。 そろそろ引っ越したいと思うことが増えてきていたんだけど、どうせなら振れ幅重視でタワマンに住んだら面白いかも。と思ったのがきっかけ。ただ、タワマンなんて人生初だし怖すぎ。ということで俺がタワマンを検討している理由と、タワマンに住むメリットデメリットを検討する。 今の家の不満点 まずはタワ ...

ReadMore

スマホ レビュー

2020/11/10

【Galaxy Note20 Ultraレビュー】浪漫の塊。コスパは最悪。

2年間カメラのために愛用しつづけたMate 20 Proを遂に乗り換える。その候補がOnePlus 8 ProとGalaxy Note20 Ultraなんだ。OnePlus 8 Proは既にレビューをしていて8万円で買える最強スマホと言える仕上がりなんだけど、スマホは乗り換えたら多分1年は使うことになるから、メインスマホ選びは慎重にならざるを得ない。 ということで15万円もする超最強スマホGalaxy Note20 Ultraを入手したからレビューする。 Galaxy Note20 Ultraの特長 Ga ...

ReadMore

AFFINGER5導入

2020/6/4

【ブログで稼ぐ】AFFINGER5導入から1年5か月のPVと収益

ブログで稼ぐならワードプレスを使った方が良い、ワードプレスで稼ぐなら有料テーマを使った方が良いという話は聞いたことがある人も多いと思う。 俺もその話を鵜呑みにしてワードプレスの有料テーマAFFINGER5を購入した口なんだけど、AFFINGER5を導入したことでどれくらい効果があったのかをガジェマガの事例で紹介したい。 ガジェマガ運営の経緯 まずはガジェマガ運営の経緯を紹介する。 2015年10月にFC2でブログ運営開始 2016年5月頃にオススメスマホランキング記事が検索上位に表示される 2016年5月 ...

ReadMore

メンズ美容・健康 ライフハック 体験談

2021/1/6

【体験談】ICLカウンセリングでレーシックに申し込んだ話【視力矯正】

最近レーシックとかICLと言った視力矯正手術を耳にする機会が増えていて、俺もせっかくだから視力を良くしようとICLに申し込んだ結果、レーシックの予約をして家に帰った。何を言っているのかわからないと思うけど俺にもわかっていない。 ということでカウンセリングでなにが起きたのか、なぜICLではなくレーシックを選んだのかを解説する。 視力の悪さは機会損失 俺の視力はギリ裸眼で生活できるレベルで、両目0.7なこともあって車の運転するときもコンタクトとかメガネは使わない。かといって十分な視力というわけではなく、遠くの ...

ReadMore

-ブログを書くコツ

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