みちのえきまにあ

SC59 CBR1000RRで道の駅巡りをしているまったりツーリングライダーのブログ

Twitter
Instagram
Youtube
Qiita
Github
About

ブログに貼り付ける画像は圧縮したほうがいい?

はいどうも、よっしーです。
今回は、ブログにアップしている写真について。といっても撮影方法とか構図とかの話ではなく、アップロードする画像・写真のサイズ、容量についての話です。

大きいサイズ、高画質な画像を表示するとギガが減る

「ギガが減る」…最近の若者言葉はよくわかりませんね。
どういうことかというと、高解像度、高画質な画像を表示すると、通信量(料)がけっこうかかるよということです。
最近のインターネット契約事情は「1ヶ月に◯GBまでは高速通信できます。それを超えると通信速度が低速になります。」という形態での契約が主になってます。SNSや動画閲覧などでこの「◯GB」を消費していくことを、最近の若者は「ギガが減る」と言うようです。
昔は通信した分(パケット)をどんどんカウントアップしていって、それに対して料金を支払っていました。その後、パケ・ホーダイというものが誕生しましたが、そのときでも、通信した分についてカウントアップ(実際にカウントするのは通信事業者ですが)していき「今月◯パケット使ったわ。ま、定額やけど」みたいな、やり取りをした人もいたのではないでしょうか。
そんな「カウントアップ」するものだった通信量も、最近では「カウントダウン」するようになっています。
だから何だということは全くなく、ふと思った次第です。

いきなり話が逸れましたが、SEOやら検索順位やら離脱率やらうるさく言われる昨今、ページの表示速度というのは非常に重要です。
ページの表示速度は、ページのデザイン、コンテンツの豊かさとは反比例するもので、その両立は難しいです。jsで動きをつけまくったページは見ていて楽しいですが、あまりに凝りすぎたページだとカクカクします。 動画や綺麗な写真が貼ってあるページは、文字を読む必要がないくらい情報を的確に得られますが、そもそも表示するのに時間がかかったりします。

今回は、この ページの表示速度とコンテンツの豊かさのバランスをどう取るか というテーマになります。(大げさに言ってます)

ブログ記事に高画質な写真は必要?

大きなテーマを掲げましたが、主にツーリングやカスタム内容を書くブログに貼り付ける写真について書いていきます。

映画のレビューや読んだ本の感想などを書くブログであれば、ブログ記事内に画像や写真はそれほど必要ないかもしれませんが、当ブログのようにツーリングに行った話やカスタムの話を書くブログでは、写真が無い文字だけの記事では言いたいことが伝わりきらなかったり、読んでる人も途中で嫌になっていると思います。

じゃあ、ツーリング先での様子を鮮明に伝えるために、めちゃくちゃ綺麗で高解像度な写真を何枚も貼ればいいのか。
答えはNoで、理由はギガが減るからです。

だからといって小さすぎると逆にストレスを与えることになるので、必要最低限の大きさ(解像度)は必要です。

ページを見ている人は、どんなデバイスで見ている?

では、その 必要最低限の大きさ とはどれくらいなのか。それを知るためには、ページを見ている人がどんなデバイスで見ているかを確認してみましょう。

アクセス解析ツールとしてGoogle Analyticsを導入している方は多いと思いますが、Google Analyticsを使えばアクセスしてきたユーザの環境(デバイス、OS、画面解像度など)が簡単にわかります。もしGoogle Analytics使ってないよという方は、ぜひ導入してみてください。便利です。無料です。

で、当ブログの場合は、スマホでの閲覧がおよそ70%、閲覧時の画面解像度(横幅)は1280px以下で95%くらい占めてます。

PCでの表示では、記事部分の横幅が670px固定となっているため、記事内の写真はそれ以下の横幅での表示となります。(これは使用しているデザインにもよりますが)

貼ってある写真をわざわざ拡大しないのでは?

ユーザがどんな環境で見ているかがわかったとことで、次は写真の画質の話です。

ツーリング記事の場合、貼り付ける写真としては、食べ物や景色が中心ですが、それらの写真って実は細かい部分はあまり重要ではなくて、パット見の雰囲気のほうが重要だったりします。
カスタム記事の場合、見せたい物がはっきりしているので、その部分にフォーカスした写真を貼ることになるでしょう。

となると、ユーザがわざわざ写真を拡大して詳細部分を見るということは、ほとんど無いのではないか、となります。

まあ、見せたいもの見たいもの が必ずしも一致するわけではないので一概には言えませんが。



このことから、貼り付ける写真のサイズとしては 横幅800px くらいで、高画質である必要は無い 気がしてきますね。

写真をアップロードする前にやっていること

サイズを小さくする

はてなフォトライフではアップロード時に横幅を800pxに補正してくれるみたいなのですが、アップロード前にこちらで800pxにしておけば、アップロード時にかかる通信量も削減できるため、こちらのギガを減らさずに済みます。

使っているソフトは、ImageTools です。(macOS用ソフト)
AppStoreから入手できる無料のソフトです。

複数の画像ファイルを一括でリネーム、リサイズすることができます。

操作方法はいたって簡単で、編集したいファイルをドロップエリアにドロップして、右側のメニューから実行したい編集項目をセットして実行するだけです。

容量を圧縮する

サイズを小さくするだけでもファイル容量は削減できますが、更に削減(圧縮)することができます。
使用しているソフトは、JPEGmini Lite です。(macOS用) AppStoreから入手できるソフトで、無料版と有料版がありますが、無料版でも十分こと足りてます。

こちらも使用方法は簡単で、ソフトのウィンドウ内に画像ファイルをドロップするだけです。が、注意点としては、アプリの名前の通りJPEG形式の画像ファイルのみ圧縮可能という点です。

この手の画像サイズ圧縮ソフトはいっぱいありますが、このJPEGminiが一番使い勝手がよく、圧縮率にも満足しています。

効果は…

こればっかりはユーザの感じ方次第なのではっきりと「効果が出た!」とは言えないのが実際のところです。ただし、実際の数値としては読み込みの容量が減っているので、ギガを減らさない ことについては貢献しているかと思います。
ちなみに、自分のブログ、サイトがユーザフレンドリーかどうかは、GoogleのPageSpeed Insightsというツールで数値化できますので、ぜひ一度チェックしてみてください。

ギガが減る…今後一切使うことはない(使いたくない)フレーズですね。。。