本ブログ管理者のゴウタロウです。今回はワタシの重いブログをどうにかしようと思っていたところに思わぬ方法を見つけたので共有したいと思います。
ワタシのブログは元々はてなブログで運用していましたが、2018年7月に羽田空港サーバーさんのブログ移行サービスを利用して、ワードプレスで運用するようになりました。
ほぼ他力で開設したブログなので、ブログ管理のテクニカルな部分は全くの無知です。それゆえにあまり弄くらずにブログテーマ「JIN」の初期設定のままで運用しています。
また無知ゆえに便利そうなプラグインもアレヤコレヤと入れていて、結果としてブログの表示に非常に時間がかかる(＝重い)ブログとなっています(Adsenseペッタペタはスルーしてください)。
本ブログは陸マイラー系ブログとして、クレジットカードによるポイントの貯め方、ポイントサイトの利用法からマイルの貯め方、それらを活用したホテルや飛行機の利用法、結果として旅行に行くので旅行記としての旅ブログまでを主に扱っています。
なるべくオリジナリティを出すために特に旅ブログなどでは自分で撮ってきた画像を多用しています。
ただそれゆえに、画像を利用した記事ほど非常に表示に時間がかかる重い記事となってしまっています。どこかのブログ表示測定サイトを利用した時は、表示に時間がかかりすぎてエラーが出ちゃったほどです笑。
それでも一定のアクセス(PV)をもらえていたので放置していましたが、自分でも自分の記事をよく見るので特にスマホ表示とかでは表示に時間がかかり、google神が推奨する「ユーザーフレンドリーではないな」と思っていました。思いつつもやはり放置していたのですが・・・
しかし最近にほんブログ村のマイレージカテゴリーで上位常連となっている「マイルトラベルの日記」さんの下記記事を拝見して、やはりこのままじゃアカンな、と思ったのです。
そこで今回ブログ軽量化計画として、ついに画像の圧縮に手を付けることにしました。面倒な作業なのでずっと放置していたのですが、はてなブログでは出来なかったのにワードプレスではちょっとした手間を加えると簡単にできてしまったので、共有できたらと思います。
ただ最初に述べたようにブログ管理のテクニカルな部分には全くの無知なワタシが考えたことなので、すでにご存知の方がいらっしゃったらそっとブラウザを閉じて下さいm(_ _)m。編集後記にもう少しだけテクニカルっぽいことをまとめています。
今回ご紹介する方法はアップロードする画像容量が下がったことを数値で確認することが出来ます。
ただWPは画像読み込み時にいくつかの画像サイズで取り込んでおり、今回の方法を用いて自分でリサイズしなくてもメディア追加時に「大」や「中」や「小」サイズを選択すれば事足りるはずです。ご注意を。
目次
ブログに載せる画像の圧縮方法について
ブログに載せる画像の圧縮法についてはググればいくらでも出てきます。ソフトを利用する方法、(ワードプレスの場合は)プラグインを利用する方法、はてまてサーバーの設定をいじる方法まで・・・。
しかしざっと見てみるとどれもコレも面倒なことこの上もないのです。
ソフトを利用する方法の王道はフォトショップですね。保存時に解像度を落とせばファイルサイズも圧縮されます。しかし高価でPCのCPUにもメモリにも負荷をかけるフォトショップを画像圧縮のためだけに利用するのが現実的ではありません。
その他フリーソフトでも色々ソフトがありますが、本題ではないので割愛します。何より「いちいちソフトを利用するのが面倒だから今まで画像圧縮を放置してきた」という根本的な問題があるので、ソフトを利用する方法は却下です。
ワードプレスの場合はプラグインを入れておけば自動的に画像サイズを圧縮してくれる便利機能があります。
下記の記事は参考になるのではないでしょうか？
ただワタシ、「EWWW Image Optimizer」は入れているのですよねぇ。元々のファイルがひどいからか、その効果を実感したことはありません。
サーバーの設定をいじるちょっと難しそうな方法はまなぶさんが記事にされていますね。
テクニカル無知なワタシにはサーバーをいじるなんて無理です(；´∀｀)。
ワードプレスの「メディアの追加」利用時に画像サイズを下げる方法
前項でお伝えした方法はどれもコレも面倒で仕方がありません。しかし今回ワードプレスで記事を書いている時、画像を追加する時に必ず利用する「メディアの追加」画面から画像のファイルサイズを下げる方法を発見したのです。
この方法はスマホとかデジカメで撮ったファイルをそのままブログに載せちゃっていたワタシのような方のみに有効な方法で、ちゃんと画像ファイルサイズをコントロールしているヒトには無用なことです。
例えばワードプレスでのメディア追加画面で、左上の画像のファイルサイズは933kBとなっています。だいたい画像を軽くしている方々は数十バイトkBまで小さくしている中1MBに近いサイズとなっています。
また解像度はスマホで撮影したときのままの2458 x 1794とブログでは不要なほどのビックサイズです。特にスマホでの表示が7割を超える昨今の事情ではこんな大きな解像度は不要です。
今回はその解像度を下げることによってファイルサイズを小さくする方法になります。
ワードプレスのメディア画面で画像解像度を下げる方法
ではワードプレスのメディア画面で画像解像度を下げる方法を進めていきたいと思います。
メディアの追加画面の右側「添付ファイルの詳細」の「画像を編集」を選択します。
「画像の編集」画面の右側にある「縮尺変更」を利用して画像サイズを下げることによってファイル容量を下げるのが今回の方法です。なので言葉を正確に使えば「圧縮」ではなく「縮小」になります。
ブログに載せる最適な解像度(＝サイズ)には多くの方が研究しているようです。長尺のサイズで言えば600ー800ピクセルがブログの表示には最適との報告が多いです。
550ピクセル以下になるとブロク記事の横幅より小さく表示されるようです。
ワタシの場合はデジカメの解像度でよく使われるVGAサイズ(640×480)の640という数値が好きなので、640で統一することにしました。ちなみにどちらかを設定すれば、もう片方の数値はアスペクト比(タテxヨコ)を維持したまま変更してくれるので心配ご無用です。
最後に「縮尺変更」をクリックして確定・保存することを忘れないようにしましょう。縮尺変更したら、右下の「戻る」でメディアの追加画面に戻ります。
するとご覧のように画像サイズが、理想的な数十kBまで落ちてくれました。コレにて一件落着です。
面倒なソフトやプラグインを利用しなくてもワードプレスの設定画面のみで画像の容量を下げることが出来ます。
ワタシのようにスマホやデジカメの画像をそのままペッタペタと貼ってブログ記事を重くしていたヒトにとっては特に効果的な画像ファイル容量の下げ方なんじゃないかなぁと思っています。
ワードプレスの設定画面のみで画像ファイル容量を下げる方法の問題点
今回ご紹介したワードプレスの「メディアの追加」画面を利用した画像ファイル容量を下げる方法ですが、ワタシにとっては簡便な方法として感動したものです。しかし万人受けする方法じゃないかもしれません。
1．画像を圧縮する方法ではなく縮小する方法であること
今回の方法は画像サイズを下げることによってファイル容量を減らしています。ブログで利用するファイルは余計な情報を減らして軽くする「圧縮」も推奨されているので、もう少し工夫が必要なのかもしれません。
圧縮だと画像の解像度は落ちてない(＝きれい)なままですが、縮小すると解像度が落ちてしまうので拡大表示したりクリアに見せたいときにはオススメしにくいです。
2．写真ブログできれいに写真を見せたい方には問題外の方法
写真を紹介するブログではやはり写真を大画面できれいに見せたくなると思います。その場合長尺640ピクセルでは物足りないらしいです。できれば1,600ピクセルぐらいですが、そう言うコンセプトのブログなら重い画像でも利用価値はあると思います。
編集後記にまとめたように、記事上のサイズは小さく表示は大きく、と言う方法が有効でしょう。
3．解像度が低い画像を用意している場合は役に立たない
最初から解像度が低い画像を用意している場合は今回の「縮小」の効果は得られずやはり「圧縮」が必要になります。
低い解像度で大きな容量の画像ファイルって詳しくないので分からないですが、そう言うこともあるでしょう。
4．拡大表示してもサイズは640×480のまま
今回の方法は画像を縮小してしまうので、表示は小さいままでいいけどクリックして拡大表示したときには大きく見て欲しいときなどには適切ではない方法になります。
じゃあどうすればいいの？と言う話ですが、それは編集後記にまとめてみたいと思います。
まとめ
ブログ表示測定サイトで測定時間がかかりすぎてエラーが出てしまうほど問題のあるワタシのブログをgoogle様が推奨するユーザーフレンドリーにするために、まずは画像のファイルサイズを下げる方法を模索してみました。
その結果いちいちソフトで容量を落とさなくても、ワードプレスの標準エディタで十分画像ファイルの容量を下げることが分かりました。
万人受けする方法ではなく、ワタシのように撮った写真をそのまま貼っちゃうようなヒトにとって有効な方法とは思います。
今回ご紹介した方法ですべての画像をサイズ640×480以下に設定しファイルサイズを100kB以下にして書いた記事が直近の下記の記事です。
スマホで見てみると多少軽くなったような気がしないでもないような・・・^^;。
結局PCでもスマホでも大きな解像度は必要なさそうなので、とりあえず画像の問題はこれで解決したと勝手に判断します。ただ既存の記事の画像サイズをすべて落とすのは流石に大変そうなので、真のユーザーフレンドリーとは程遠いのですが、今後もよろしくお付き合いくださいm(_ _)m。
今回の方法はWP利用歴半年ぐらいのビギナーが考えた方法で、プロや経験値が高い人にとっては何言っているの？と思われちゃう内容かもしれません。
こういう方法もある、ぐらいで参考にして下さい。
編集後記
今回ご提示したファイルサイズを落とす方法ですが、ワタシを含めてビギナー向きの考え方や方法です(たぶん)。
実はワードプレスの「メディア設定」の意味を詳しく調べてみると、今回のような方法を取らなくてもクリックタブを選択するだけで変更できるようになるとは思います。
ワタシも未だによく理解していないのですが、メディアファイルの設定や有効なプラグインを利用すれば画像サイズを様々に容易に変化させることが出来ます。
ぜひ下記記事とそれに続くリンク先をご参照下さい。
要はメディアの追加画面の右下でファイルサイズを選択することができるし、プラグインを利用すれば自分好みのファイルサイズも登録しておくことができるということです。
設定「メディア」画面
「メディア追加」の画面また拡大表示させるためのリンク先「メディアファイル」と、拡大表示させる必要がないリンク先「なし」をちゃんと区別して設定しないとイケないということですね。
このやり方だと実際にファイルサイズが落ちているのか分からないので、今回本文中に行ったサイズ変更の方法でファイルサイズが目に見えて落ちているのを確認してホッとしているのですが、たぶん「中サイズー640x 360」とかを選択すれば画像サイズを落として記事にファイルを貼り付けてくれていると思います。
ただ中サイズを選択すると、実際のブログ表示で横幅が寸足らずに表示されるようです。やはり長尺640ピクセルに編集して、ファイルサイズは「大サイズ」、拡大が必要ない時はリンク先を「なし」にするのが良い方法のような気がします。
もし写真ブログなどで画像をきれいに見て欲しい時は画像サイズは1,600ピクセル以上のままで、ファイルサイズは「大or中サイズ」、リンク先を「メディアファイル」に設定すれば、ブログの表示では小さく軽くですが、クリックすれば拡大して表示されるようになるはずです。
また余談ですがメディアの画像編集画面で、簡単な画像切り抜きができることも今回初めて知りました。いわゆるトリミングですが、コレも画像のファイルサイズを下げるのに有効です。
まだまだ知らないことばかりです(；´∀｀)。
