ブログを更新していると画像を使う機会がありますが、スマホで撮った画像のサイズが大きくて、小さく縮小したいと思ったことは皆さんあると思います。
スマートフォンで撮影した写真は高画質ですが、その分サイズが大きくて、そのままブログやサイトに載せるとページが表示されるのが重たくなります。
ページの表示が遅ければ、せっかく見に来てくれた人が離脱する可能性が高まるのはもちろん、Google検索での評価が下がってしまいます。
2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
ウェブマスター向け公式ブログ ページの読み込み速度をモバイル検索のランキング要素に使用します
Googlウェブマネー向け公式ブログで、検索順位の要素としてページ速度が使われることが言及されています。
また評価はともかく、スマートフォンなどモバイルでブログやサイトを訪れるユーザーが多くなっている現在、過度に大きなサイズの画像は使わないほうが良いでしょう。
パソコンユーザーなら、通信費は月額の定額プランの場合が多いので通信量を気にすることは少ないですが、スマホユーザーの場合、通信量を気にする方は多いのではないでしょうか。
いわゆる「ギガが減る」ですね。
当サイトでも画像を使う機会が多いので、サイトが重くならないように画像サイズの縮小に心掛けています。
私がGIMPを使っている理由
私は画像の縮小にGIMPというツールを使っています。
数ある画像編集ソフトでなぜGIMPを使っているといえば、有料ソフト並みの機能がフリーソフトであるGIMPで利用できるといわれているからです。（ほとんどの機能を使いこなせていませんが……。）
GIMPの利用者も多いので、分からないことがあれば検索して解決できることもメリットと感じています。
ウエブサイト上でも変換できるサービスがありますが、画像編集ソフトを使えると以下のような画像の合成も行えます。
ビフォーアフターの比較を一枚の画像にできると、違いがわかりやすいです。画像の枚数も少なくできます。
GIMPの操作も、慣れればすぐにできるようになりますし、分からなくても検索すれば大抵のことは分かります。
是非、GIMPを導入してみてください。
ただ、少し時間がかかるので、とにかく画像の縮小だけをしたい方はウェブサイト上で出来るサービスがあるので紹介しておきます。
画像を縮小するhttps://resizer.myct.jp/
あとで実際に私がいつもしている画像の縮小方法も紹介しますが、先にダウンロード方法を紹介します。
GIMPのダウンロード＆インストールの紹介
GIMPの導入方法については、他に詳しいサイトがたくさんあるので、そちらを参考されたほうが良い結果になりそうなので紹介します。
分かりやすそうなサイトがあったのでリンクしておきます。
実際にGIMPで画像を縮小してみる
先に編集する画像を分かりやすいフォルダに置いておきます。
GIMPを開いて「ファイル」の開く／インポートをクリックして編集する画像を選択します。そして「開く」をクリックします。
このとき、なかなか画像を見つけられない場合、デスクトップに適当なフォルダを作って入れておけば分かりやすいと思います。
目的の編集する画像が画面に表示されたと思います。
上部の「画像」の画像の拡大・縮小をクリックします。
画像の拡大・縮小のダイアログが表示されます。
画像を縮小するにはキャンバスサイズを変更します。
キャンバスサイズ（画像サイズ）の値ですが、私は基本的に画像の通り、幅800 × 高さ450に統一しています。
ちなみにスマホで撮影しているので私の場合アスペクト比が16:9となっています。撮影機材によってアスペクト比が異なるので、横幅のサイズで議論されています。
今までは横幅を640や600にしている人が多かったですが、最近の主流はテーマに合わせて横幅700ぐらいにしているようです。
横幅750が主流になる可能性もありそうです。
まあ、画像サイズの値は人それぞれの好みなので、自分のブログやサイトのテーマの推奨するサイズを選べば無難かと思います。
ちなみに私が横幅800にしている理由は特にありません。少し大きめですがアイキャッチ画像はあまり使わない方針ですし、徐々に横幅サイズが大きくなる風潮があるので余裕を持たせています。
あと、品質の補間方法は一番高品質な「キュービック」をオススメします。
そして「拡大・縮小」ボタンを押します。
拡大・縮小ボタンを押すと、一気に画像が小さくなったように見えるのは、表示倍率が18％だからです。
「ファイル」から「名前を付けてエクスポート」を選択します。
上書きエクスポートでもいいですが、元画像が上書きされてしまうので元画像に変更を加えたくない場合は「名前を付けてエクスポート」を選びます。
「名前を付けてエクスポート」の場合、アップロード用のフォルダを作成して保存すればファイル名が重複することもないですし、分かりやすいと思います。
保存するフォルダを選択して「エクスポート」ボタンを押します。
するとこんな設定画面が出てきます。
色々チェックボックスがありますが、私の通りで大丈夫かと思います。
ただ、Save Exif dataはブログやサイトにアップロードする場合外しておいた方が良さそうです。
知らないとヤバい!? 写真のExifから個人情報を守る方法まとめ！
Twitterとかはてなブログなどでは、スマホで撮影したExif付き画像をアップロードしても自動的にExifデータが削除されるらしいですが、一応アップロード前に確認したほうがいいです。
品質の数値は以前色々試した結果、「80」がコストパフォーマンスが優れている気がします。
これより低くすれば、やはり画質が悪く見えますし、品質100のままだと場合ファイルサイズがそこまで小さくなりません。
私の場合、1枚あたり100KBより小さくするのも目安の一つにしています。（複雑な画像の場合は超えてしまいますが……。）
最後に「エクスポート」ボタンを押すと、縮小した画像が保存されるので出来上がりです。
出来上がった画像をブログにアップロードしたら完成です。
こちらが実際に縮小した画像を使った記事になります。
元画像が7.8MB(約7800KB)で、品質が100の場合460KB、 品質97の場合256KB、品質80の場合98KBで、元画像と比べると画像ファイルのサイズを約80分の１にすることができました。
単純計算だと、縮小した画像を約８０枚張ったのと、元画像１枚のファイルサイズが一緒になるわけです。
画像ファイルサイズを小さくした分だけ、さらに画像を使う余裕もできますし、サイト表示速度も速くなるので一石二鳥です。
GIMPの品質設定の違いを比べてみる
最後に初期設定の品質97、品質80、品質60、品質40の画像を作成してみたので参考にしてみてください。
元画像の画質によりますが、 品質60ぐらいでもアイキャッチ目的だと大丈夫な気がします。それでもじっくり見たら粗さが分かりそうです。
品質40にするとさすがに粗さが目立ちますし、画像ファイルサイズがそんなに小さくならないのでお得感がないと思います。
画像を使う目的に合わせて設定するのも良さそうです。
ただ、手間がかかるのと多少の粗さが見られるので、とりあえず品質80にしておけば無難かと思います。
以上が当サイトで使っている画像を縮小している作業になります。
慣れればあっという間に画像縮小できるのでオススメです。
