ブログ画像の圧縮とリサイズについてポイントまとめ
この記事では、画像の圧縮とリサイズについて解説しています。
画像の圧縮とは？
画像の中の余計なデータを削除する作業のことです。
同じ画像でも圧縮することでデータサイズを大きく減らすことができます。
画像のリサイズとは？
画像の大きさを小さくする作業のことです。
オリジナルの高画質な画像は、ほとんどが大きいサイズになっています。大きすぎるサイズをブログに適したサイズに変えることで、余分なデータサイズを除くことができます。
圧縮とリサイズはなぜ必要？
画像のデータサイズは、WEBページの表示速度に関わってきます。
画像が大きすぎると遅く、適したサイズに調整すると速く読み込むことができるようになります。
そのため、画像のリサイズと圧縮でデータサイズを軽くしておく必要があるのです。
高画質な画像を使う
画像の圧縮とリサイズは重要ですが、前提としてユーザーに出来るだけ高画質な画像を提供するというところを意識する必要があります。
画像はユーザーの理解をサポートするという位置付けになります。そのため画質が低いと不明瞭になり、画像からの情報がうまく伝わらないということも起こってきます。
そしてやはり、綺麗な画像を使う方がユーザーも居心地良く過ごすことができるはずです。
圧縮とリサイズのポイント
画像の表示幅を知っておこう
WordPressやはてなブログなどは、記事の幅が決まっています。
そして画像の最大表示幅もそこまでになるので、今の画像の表示幅を知っておくことはとても重要になります。
画像の表示幅の確認について、最も簡単なのはデベロッパーツールを使う方法です。
記事の画像の上で右クリックもしくは、control＋クリックをします。その中から［検証］を選択します。
そうすると画面右側にコードがずらっと出てくるかと思います。
img src〜という部分が薄青で選択されている状態であれば、右下のボックスでその画像の表示サイズが確認できます。
この例だと、表示幅は820pxなのに対して幅1100pxの画像をアップロードしているとわかりますね。
表示幅ぴったりにするべき？
とはいえ、表示幅ぴったりにリサイズするのが良いかというとそうでもありません。
画像の性質上、リサイズしただけでも画質が低くなり、表示幅ぴったりにしてしまうと大抵見辛くなってしまうのです。
少し分かりづらいかもしれませんが、画質の低い画像でも、縮小すると綺麗に見えるようになります。
そのため表示幅よりも大きめのものに限定しながら、表示幅に縮小した際に綺麗に表示できるサイズを探っていくのが良いでしょう。
圧縮すると画質が悪くなる
リサイズで良いサイズが見つかっても、そこから圧縮をすると画質が悪くなってしまいます。
ブログで使う画像の調整はここが一番ポイントになるかと思います。少しでも軽くするために、リサイズと圧縮をいろいろ試しながら、自身のサイトにとってベストな画像を作成していく必要があるでしょう。
レイアウトと画像の大きさ
「どのように画像を配置するか」という部分も、画像の大きさの決定に大きく関わってきます。
3つのレイアウトを例に上げましたが、横幅いっぱいでは大きな画像が必要になるのに対して、〇〇並べでは画像の大きさは小さくすることもできます。
横幅いっぱいならインパクトが強く、対して縦・横並べではスマートで整った印象になります。
データサイズも考慮しながら、画像のレイアウトを決めていくのはユーザー体験において重要なのですね。
圧縮率の違い
画像の圧縮は「圧縮ソフト」を使って行うのが一般的ですが、これらはそれぞれ圧縮具合が異なります。
例えば、ImageOptimというアプリを使って画像を圧縮してみると、45KBまで減らせました。
このように、使うアプリやサービスによって削除できるデータの量が変わってくるのです。
また圧縮率が高いものは、低いものと比べて画質が悪くなりやすいです。
まとめ
画像の圧縮とリサイズはとても重要な作業ですが、少しでも軽くするには色々と試行錯誤が必要なのですね。
良いWEBページに繋がるよう、より良い画像調整を行っていきたいところです。
