こんにちは。たひろ夫です。
つい先日、外出先からなんとなーく自分のブログをスマホから覗いてみたのですが・・・ページが開くのがすごく遅く重たく見るのやめました。なんでこんなに重たいんだろうとと思って色々調べていたら使用している画像(写真)が1枚あたりだいたい1MBくらいとかなり大きいことに気づきました。多分これが原因だろうなということで今回は画像サイズ(容量)の圧縮について無料で簡単にできる方法をいくつかご紹介したいと思います。
1. ブログの画像サイズ(容量)は極力小さくしておいた方が良い理由
ブログを運営するにあたり画像サイズ(容量)は極力小さくしておいた方が良いです。
その理由としては画像サイズ(容量)が大きいとサイトのユーザービリティーが低下することが挙げられます。
画像サイズが(容量)が大きいとWebページの情報量が多くなってしまうためWebページの表示が遅くなってしまいユーザーにとっては不快なWebページとなります。
せっかく検索結果に自分のサイトが表示されユーザーが興味をもちサイトをクリックしてくれたとしてもWebページがなかなか開かなければページが開いてしまう前にサイトから離脱して他のサイトを見に行ってしまうといったことが起きてしまいます。
これって不幸ですよね。
また、グーグルのクローラはサイト巡回時にサイトの読み込み速度の評価もしておりサイトの上位表示させるかどうかの指標の一つになっているようです。
また、ブログに使用する画像のサイズ(幅×高さ)はメインカラムの幅よりも大きくする必要はありません。当然画像のサイズ(幅×高さ)が大きい画像は容量も大きいのでメインカラムの幅よりも幅の大きい画像を使うということは無駄にWebサイトのユーザービリティーを低下させていると思っていいです。
2. 無料で簡単に画像サイズ(容量)を圧縮する方法
今回はプラグインを使わずに無料で簡単に画像サイズを圧縮する方法を説明します。
※プラグインでそういった類のものがあるようですがプラグインを多用すると今回の画像サイズの話と同じくワードプレスの動きが鈍くなったりサイトのユーザビリティーの低下に繋がりますので私は極力プラグインは使わないことにしています。
無料で簡単に画像サイズ(容量)を圧縮する方法としては下記の3つ方法があります。これらについて画像サイズ(容量)を圧縮する手順を説明します。
- ペイント(Windowsデフォルトアプリ)でカラム幅に合わせて画像をリサイズ
- ペイント3D(Windows10デフォルトアプリ)でカラム幅に合わせて画像をリサイズ
- TinyPNG(Webサイト)で画像サイズ(容量)を圧縮
2.1. ペイントでカラム幅に合わせて画像をリサイズする手順
①画像ファイルを右クリックして編集をクリックします。
②ホームタブのイメージのところにあるサイズ変更をクリックします。単位のピクセルにチェックして水平方向の欄に変更したい横幅を入力すると画像サイズが変更されます。※今回はTahiro Blogのカラム幅700ピクセルに合わせて画像の幅も700ピクセルに変更します。
③ファイルタブを開き、名前をつけて保存、JPEG画像をクリックしてファイルを保存します。
2.2. ペイント3Dでカラム幅に合わせて画像をリサイズする手順
①画像ファイルを右クリックしてペイント3Dで編集するをクリックします。
②画面上にあるキャンパスをクリックすると画面右側にキャンパスのサイズ変更が現れるのでの幅の欄に変更したい横幅を入力すると画像サイズが変更されます。※今回はTahiro Blogのカラム幅700ピクセルに合わせて画像の幅も700ピクセルに変更します。
③画面左上のメニューをクリックします。
④名前を付けて保存をクリックしてファイル形式の選択で画像を選択してファイルを保存します。
2.3. TinyPNG(Webサイト)で画像サイズ(容量)を圧縮する手順
①TinyPNGのサイト(TinyPNG ：https://tinypng.com/)に行きます。
圧縮したい画像を”Drop your png or jpeg files here! ” のところにドラッグ&ドロップすると、自動的に画像の圧縮が始まります。
②圧縮完了後、Downloadの文字をクリックすると圧縮した画像をダウンロードすることができます。複数画像を圧縮した場合はDownload allをクリックすることで圧縮した画像を一括ダウンロードすることができます。
3. 圧縮後の画像のサイズ(容量)や画質劣化について
上で紹介した方法で画像サイズ(容量)を圧縮したときに実際にどの程度圧縮されるのか、ブログでの画像の見え方は画質に劣化等ないのか等実際に確認してみたいと思います。
①iPhoneで撮影した画像(無加工)をそのままブログに載せた場合
②ペイントで画像サイズ(幅×高さ)をリサイズした場合
③ペイント3Dで画像サイズ(幅×高さ)をリサイズした場合
④ペイントでリサイズ後、TinyPNGで圧縮した場合
⑤ペイント3Dでリサイズ後、TinyPNGで圧縮した場合
| 幅×高さ(ピクセル) | サイズ(キロバイト) | 圧縮率 | |
| ①iPhone撮影画像(無加工) | 2560×1920 | 437 | – |
| ②リサイズのみ(ペイント) | 700×525 | 131 | 30% |
| ③リサイズのみ(ペイント3D) | 700×525 | 87 | 20% |
| ④リサイズ(ペイント)後TinyPNGで圧縮 | 700×525 | 62 | 14% |
| ⑤リサイズ(ペイント3D)後TinyPNGで圧縮 | 700×525 | 50 | 11% |
Windowsアプリのペイントで画像サイズ幅をブログのカラム幅に合わせて適正化するだけで画像サイズ(容量)を圧縮前の30％とかなり小さくすることができました。
そして、Widows10から使用できるようになったペイント3Dというアプリで画像サイズ幅をリサイズすると何故かはよくわかりませんが普通のペイントでリサイズするよりもさらに画像サイズ(容量)が小さくすることができました。(若干色が暗くなっているかもです。)
さらにTinyPNGというWebサイトでさらに画像サイズを圧縮することができました。
いずれの画像も圧縮前と見比べても画質が劣化しているなんてほとんどわからないレベルだと思います。(私にはわかりません。)
4. ブログの画像サイズ(容量)圧縮のまとめ
いかがだったでしょうか？私的には色々試した結果画像1枚につき150kB以下だったらいいかなーと思っているので最近のブログに使っている写真はペイントでリサイズのみやっています。過去の記事の写真もリサイズしなけらばいけないなと思うのですがプラグインは使わないといった手前、ぼちぼちリサイズしていこうと思っております。最後に本日のまとめです。
本日のまとめ
・画像サイズ(容量)を小さくすることはサイトのユーザービリティーが向上し、ユーザーの
離脱率抑制、グーグルからの良い評価にに繋がります。
・画像サイズ(容量)を小さくする方法は、リサイズ、圧縮の２つがあります。
・リサイズはWindows備え付けのアプリ(ペイント、ペイント3D)で簡単に可能です。
・圧縮はTinyPNGというサイトで無料で行うことができます。
コメント