当サイトはアフィリエイトプログラムによる収益を得ています。

ブログを書くコツ

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

2018年5月24日

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

トーマスです。TwitterYoutubeTikTokもやってます。【お問い合わせ自己紹介半生振り返り

この記事の目次(クリックでジャンプ)

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

導入結果

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

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

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

これもいっとく?(見てほしいやつ)

800万回線到達
【残り483万回線】楽天モバイル血と涙のばら撒きキャンペーン開始

ここに来て楽天モバイルがまたとち狂った。三木谷社長を介して楽天に乗り換えると14000ポイントも貰えてしまうし、新規でも7000ポイントも貰える。 しかも一人辺り10回線までOK。既に楽天を契約してて ...

続きを見る

2024年上半期に買ってよかったもの買ってよくなかったもの

最近毎月やってる感のあるアマゾンセールが今月もまたあるらしい。但し今回のは年内最大規模なんだとか。 とはいえ最近は楽天もアマゾンもセール多すぎ。もはやホストのイベントみたいでなんの希少性も無いんだけど ...

続きを見る

こっちもおすすめ(おもしろいやつ)

失敗談・コラム 結婚生活

2024/12/1

【婚前契約書】結婚という不平等条約に防衛策を講じた話【泥沼離婚】

月刊ガジェマガでも書いたけど結婚する。予定。 まだしてない。あくまで予定。とはいえ結婚怖い。これは饅頭怖いとはわけが違う。マジで怖い。男の墓場。 なぜなら結婚は男に対する一方的な不平等条約だからなんだ。これが世の男性がなかなか結婚に踏み切れない理由でもある。それを少しでも改善したい。そう思って調べた結果、婚前契約書なる物を発見し締結するに至った。 だから今回は俺がなぜ婚前契約書を締結したのか、どんな内容なのかを世の結婚を迷える子羊に向けて解説する。参考にしてほしい。 結婚は圧倒的な不平等条約 上でも書いた ...

スマホ 感想

2024/12/10

メインスマホをPixel 9 ProからGalaxy S24に戻した理由

スマホゲーを全くしない俺はとにかくカメラに拘ってスマホの最適解を探し続けていて、先月それまで使っていたGalaxy S24からカメラ最強スマホのPixel 9 Proに乗り換えたんだけど、1ヵ月使用して結局またGalaxy S24に戻してしまった。 ということでその理由を解説する。スマホ選びの参考にしてほしい。 Pixel 9 Proはカメラ最強スマホ 繰り返しになるけど俺がPixel 9 Proに乗り換えた理由はカメラの画質が最強だったからなんだ。Galaxy S24と比較しても明確に違うし、特に標準カ ...

メンズ美容・健康 失敗談・コラム

2024/9/2

125万円払ったのに40万円でまた歯列矯正することになった話

俺は34歳で125万円もかけて歯列矯正を完了したことで念願の歯並び良い族の仲間入りを果たし、今現在は各所でマウントを取りまくっているんだけど、そんな俺に不測の事態が訪れた。 125万円も払ったのに歯並びが悪くなった。しかも全て俺が悪い。うんこ。 ということでまた追加で40万円も払って歯列矯正することになったからその失敗談を語る。これからの歯列矯正を検討している人、今歯列矯正してる人は参考にしてほしい。俺の屍を超えて行け。 【結論】固定器失くして歯並びが悪くなった いつも通り最初に結論から書いてしまうと全て ...

お金・投資 失敗談・コラム

2024/11/15

【富裕層】資産1億になって変わったお金の使い方、価値観【FIRE

ガジェマガの開設から8年。ありがたいことにブログとYoutubeが当たって2024年7月に俺の総資産が一億円を突破して富裕層になった。 とはいえ急に何が変わるということでもないんだけど、一億円を突破した記念にそれなりの資産を持って変わったお金の使い方とか価値観の変化をまとめる。 年収2000万になったときの変化をまとめた記事は下記。 基本的に一億貯めるのは無理 まず最初に絶望的な話からになるけど基本的に多くの日本国民が一億を貯めるのは無理。これはマウントを取りたいとかではなく、そもそも個人が一億以上の資産 ...

俺の一軍 腕時計・スマートウォッチ・小物

2024/11/9

【ポケットと鞄の中身】身に着けてる物一覧と選んだ理由、感想【俺の一軍】

ガジェマガでは過去に鞄はいらないとかポケットを活用しろとかスマホはこれ使えとか有線イヤホンは使うなとか色々なことを言いすぎていて、 「で、結局今のお前は何を使ってるの?」 って聞かれることがたまにあるから、ここではポケットと鞄の中身と、ついでに小物類、衣服、靴などなど俺が日常身に着けてメイン利用している物と、それを使っている理由、そしてその感想を一言でまとめていく。ポケットと鞄の中身の参考にしてほしい。 この記事では「俺の一軍シリーズ」として環境が変わるたびに内容を随時更新する続ける予定(最終更新2024 ...

メンズ美容・健康 俺の一軍

2024/11/7

【美容・健康環境】継続してる自己投資一覧とその感想【俺の一軍】

38歳は俺が10年前に考えていた以上に深刻。全身は痛いし顔もたるむ。肌質もよくないしハゲまで進行している。なにもしないと途端におじさん化する。だからやらざるを得ない。 そんな俺も最近は抗うために全力で、毎月の出費も増え続けてるのが現状。とはいえ38にもなると美容以外に金の使い道も無いからまぁ良いかとも思ってる。 ということで今回は今現在の俺が実践してる、俺なりに色々試した中でも効果を感じた美容健康法をまとめる。 この記事では「俺の一軍シリーズ」として環境が変わるたびに内容を随時更新する続ける予定(最終更新 ...

メンズ美容・健康 失敗談・コラム

2024/2/16

【口コミ】ゴリラクリニックヒゲ脱毛で30万円提示された話【高すぎ

髭いらねーって思って髭の永久脱毛に手を出そうとしたんだけど、ゴリラ脱毛のカウンセリング価格が想像以上に高くて、ネットでの値段の記載方法が悪質だと感じたので今日はその件を書きたい。 毎日髭剃るのめんどくさい みんなもそうだと思うけど、朝起きて仕事行くまでの時間は戦争だ。なぜなら俺はなるべく寝ていたい!むしろ起きたくない!でも社会人なので流石に会社に遅刻するわけにもいかず、毎日生きるためにゾンビ顔負けの死んだ表情で通勤しているのが実情だ。 そんな社会人にとって朝の時間は貴重だ。歯を磨いて顔を洗って髭そって朝ご ...

DIY ライフハック

2024/10/29

【ベッド拡張DIY】シングルベッドをセミダブルにした話【ニトリ】

一人暮らしだからと言ってシングルベッドに拘る必要があるだろうか、いやない(反語)。ということに一人暮らし10年目にして気づいたからベッドを拡張することにした。 いつの間にか6畳1Kの限界に挑むのが俺の生きがいになりつつあるんだけど今回は多分その集大成にして頂点。色々取り組んできた部屋改善は多分これで終わりになる。 ということで実際にベッドをどう拡張したのか、6畳でベッドを大きくして快適になったのか、生活に支障は出ないのかを解説したい。 6畳1Kの限界に挑む 繰り返しになるけど俺は10年間6畳1Kの激狭物件 ...

メンズ美容・健康 ライフハック 感想

2023/8/15

6か月かけて湯シャンに完全移行した過程、苦労と感想【脱シャンプー

思い返せば湯シャンについての記事を書いたのが2022年の8月。気づけば既に10ヵ月が経過しているんだけど この間には本当に紆余曲折があった。 洗いすぎは体に良くない。理論的に湯シャンは正しいはず。と思いながらも耐えられずにシャンプーに戻したり頻度を減らしたり試行錯誤をした結果、2023年3月頃からはようやく湯シャンに完全移行できた。 ということでその過程及び苦労、湯シャンの感想をまとめたい。 湯シャンのきっかけは荷物の削減 そもそも俺が湯シャンを始めた理由は荷物を削減するためなんだ。俺は地方とかバンコクと ...

ライフハック 俺の一軍

2024/11/7

【ルームツアー】家で使ってる物一覧と選んだ理由、感想【俺の一軍】

ガジェマガでは過去に色々な商品をレビューしすぎていて、 「で、結局今のお前は何を使ってるの?」 って聞かれることが多いから、ここでは俺の家で今現在使っている物と、それを使っている理由、感想を一言でまとめる。住環境構築の参考にしてほしい。 この記事では何か環境が変わるたびに内容を随時更新して俺の1軍をまとめる続ける予定(最終更新2022年11月10日) 家で使っている物一覧 まず俺が家の中で使っている物を一覧にすると下記。 クリックで感想にジャンプ リビング環境 壁美人 テレビ ChromeCast Fir ...

-ブログを書くコツ

Index

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