WEBで使用する画像は、きれいで、大きくて、軽いことが重要だと言われます。
とくに画像をたくさん使うサイトであれば、その一つ一つが容量の大きい画像だとサイト自体が重くなりユーザビリティの低下につながり、SEO的にもよくないです。
そこで今回は、JPGやPNGなどの画像の容量を、画質をきれいに保ったまま軽くする方法と、画像圧縮やリサイズができるおすすめのサイトについてお伝えします。
画像をきれいに保ったまま容量を軽くするには？
画質を極力落とさずに画像を圧縮するためには、
- 画像形式
- 画像サイズ
の二点が重要となります。
画質を落とさずに画像の容量を軽くするための画像形式
WEBで使われる画像の多くはJPGかPNGのどちらかで使われることが多いかと思います。
以前の記事で、このJPGやPNGなどの画像形式ごとの違いや特徴、どれを使うべきか、についてお伝えしました。画像をきれいなまま容量を軽くするのには、この画像形式を適切に選択することが必須になります。
例えばJPGは、人や風景などの自然物が得意です。
JPGは1677万色を扱うことができるため、自然物などのたくさんの色が複雑に並んだようなものやグラデーションをきれいに表現できます。また圧縮率も高いため、写真のような色数の多い画像であれば、PNGで書き出すよりJPGで書き出す方がきれいで容量の軽い画像を使うことができます。
逆にPNGでは、図形や輪郭がはっきりとしたイラスト、アイコンなどが得意です。
色数が少ないものや、単色の線や塗りつぶしであれば、同じ色が連続するときの圧縮率が強いPNGの方がきれいに要領を軽くすることができます。
ただし、必ずこの通りになるわけではないので気になる場合はJPG、PNGどっちも書き出して見た目や容量を比べてみて使用する画像を形式を決めるとよいと思います。
画質を落とさずに画像の容量を軽くするには画像サイズが重要
画像形式以外にも、画像サイズも容量を軽くするのに確認が必要です。
IllustratorやPhotoshopで自分でサイズを指定して書き出している場合はあまり問題ないと思いますが、ダウンロードしてきた写真素材を使う場合などは要注意です。
横幅が6000pxあるものなど、ダウンロードしてきた画像の中にはもともとかなり大きなサイズのものがあります。
その場合はそのまま画像を圧縮してももともとのサイズが大きいために容量を軽くするのには限界がありますし、頑張ってたくさん圧縮しても画質がどんどん劣化してしまいます。
そのため、使用するサイズ、もしくは*Retinaディスプレイを考慮し使用するサイズの二倍のサイズにし、適切な大きさまで画像のサイズを落とします。
Retinaディスプレイでは、通常の液晶画面の２倍のピクセル数を通常の画面サイズのまま表現することができます。
そのため、画像の解像度が高く綺麗に見えます。
画像のサイズや形式を適切なものにし、そこからさらに画像を軽くするには、画像を圧縮するソフトやサイトを使って容量を落としていきます。
画像の圧縮・リサイズがブラウザで簡単にできるおすすめサイト
では、実際に画像を圧縮したり、リサイズする際のツールはどんなものがあるのでしょうか？
オフラインで利用できるソフトやブラウザで手軽にできるものがありますが、今回はソフトをインストールしなくても、誰でも簡単に無料で利用することができるサイトをご紹介します。
画像圧縮ができるサイト
TinyPNG
https://tinypng.com/
一度に20枚、5MBまでの画像が圧縮できます。
Optimizilla
https://imagecompressor.com/
画像の圧縮率を、左右で画像を比較しながら調整できます。
そのため、自分で画像の劣化具合を調整しながら容量を下げることができます。
画像のリサイズができるサイト
https://www.iloveimg.com/ja/resize-image/resize-jpg
https://www.iloveimg.com/ja/resize-image/resize-png
JPGもPNGも対応しています。
複数枚を一括でサイズ変更可能です。
おわりに
今回はJPGやPNGなどの画質をきれいなまま容量を軽くする方法についてお伝えしました。
適切な画像形式を使う、画像を手せつなサイズにする、そのうえでツールを使い画像を圧縮することで、画質をきれいに保ったまま容量を軽くすることができます。
また、無料で簡単に画像圧縮やリサイズができるサイトもご紹介しました。
ぜひWEB制作やWEBデザインを行う際、参考にしてもらえると嬉しいです。
投稿者プロフィール
