Webサイトの高速表示は、自分が運営するWebサイトやブログ記事ページを訪問してくるユーザーの利便性において重要性を増しています。
特に中小企業のWebサイトや個人のブログサイトでは、データ容量が大きいままWebサイトにアップされて、低速表示の原因になっていることがいまだにあります。
画像圧縮は専門的な画像処理ソフトを使用しなくてもWebアプリで解決することが可能です。
本記事では、Web上で完結する画像圧縮Webツールを厳選して紹介します。
- Web上で利用できるWebツールの紹介
- 適切な画像データの大きさやデータ量
- 当ブログで設定しているアイキャッチなどの画像の大きさと容量
画像の圧縮とリサイズ
Webサイトを閲覧したときに、以上に表示が遅いWebサイトを見かけたことはないでしょうか？
Webサイトの表示が遅い原因は様々ありますが、原因のひとつとして画像データの圧縮がされていないことがあります。
画像の圧縮は、専門的な画像処理ソフトを使うことで可能ですが、購入費用が掛かったり、使い方が難しいなどの課題があります。
当ブログでも画像処理ソフトを使用してアイキャッチや各見出しの下に画像を作成しますが、圧縮やリサイズはWebツールで全て行っています。
あっという間にWebサイトに適した画像の圧縮とリサイズができるので、是非使ってみてください。
画像圧縮Webアプリ
それでは、画像圧縮Webアプリを紹介します。
Squoosh
Squooshは、Google発の画像圧縮ツールです。専門的な知識を必要としないで、圧縮率を変更するバーを動かして画像の品質を確認できます。
圧縮率が決まったら、画像の大きさを変更する必要があれば変更をしてから、ワンクリックで圧縮済みの画像がダウンロードされます。
Squooshの詳細は、下記の記事で解説していますので、こちらが参考になれば幸いです。
関連記事：画像圧縮Webアプリ「Squoosh」で画像を最適化する方法
筆者の場合は、ブログ記事のアイキャッチ（ブログ記事の一番上に表示される画像）に使用する画像を圧縮する時や、見出しの下に配置する画像の容量をなるべく小さく詰めていきたいときに使用しています。
Squooshは、画像1枚を細かく丁寧に圧縮できるので重宝しています。
TinyPNG
一気に複数の画像を圧縮したいときには、TinyPNGを使用しています。
無料版でもかなり使える画像圧縮Webツールです。
画像データをブラウザ内に持っていくだけで画像の圧縮が始まるので、使い方はとても簡単です。
Bulk Resize Photos
Bulk Resize Photosは、圧縮と同時にリサイズもできるWebツールです。
ブログなどで、画像の横幅を統一しつつ、画像の圧縮を行いたいときに便利なWebツールです。
こちらも、ブラウザ内に画像データを持っていくだけで圧縮が始まるので、とても簡単に圧縮が行えます。
複数の画像を全て同じ幅にして圧縮したい場合は、圧縮設定で「最長の辺」でピクセル数を指定すると統一した横幅で画像の圧縮とリサイズがされて、画像がダウンロードされます。
適切な画像の大きさとデータ量はどれくらいなのか
最適な画像の大きさやデータの大きさは、用途によって様々あるので違いがありますが、例えばブログでしたらなるべく小さな画像データのほうがいいですよね。
画像の大きさ
当ブログの場合は、アイキャッチを始めとして、見出し下、記事内で使用する画像は現在、全て1200pxにしています。
その理由は、AMP対応に関するGoogleのデベロッパー向けサイトで表記されているサイズに合わせているからです。
当ブログは最初からAMP対応にしてみようと考えていたのですがまだできていません…
ただ、上記のサイトで画像は1,200ピクセル以上と記載があり、また、画像の縦横比率についても記載で16:9、4:3、1:1と記載があるので、アイキャッチは横1,200ピクセル縦675ピクセルの16:9にしています。
画像のデータ量
画像のデータ容量は、あまり小さくしすぎても画像にノイズやバンディングが発生してしまいます。
画像の品質があまりに落ちてしまうと見映えが悪くなってしまいますね。
画像データは、画像内で使用されている色の多さや、中身のタイプ（写真なのかイラストなのか）によって圧縮率や結果が大きく変わります。
当ブログでは、写真データの場合は50KBから大きくても70KB、イラスト系の画像データの場合は20KBから30KBくらいにしています。
横幅も縦幅も1,200ピクセルくらいの1:1の画像だと、100KB以下にすると画像によっては劣化が激しくなるので要注意です。
おすすめの画像素材サイト
当ブログの理想は、全て完全オリジナルのイラスト画像だけでやっていきたいのですが、まだまだそうなっていません。
いくつかの画像素材サイトから、ブログに使用できる画像を選んでいます。
関連記事：画像素材サイト10選！各サービスの料金と特徴を徹底比較
まとめ｜Webサイトを見直して大きな容量の画像を修正する
長い間、Webサイトやブログサイトを運営してくると、圧縮するのを忘れて大きな画像データのままWebにアップされてしまっているデータがあるかもしれません。
WordPressを使用している場合には、プラグインなどで後から一括圧縮することができるプラグインなどもあります。
ブログのおすすめプラグイン10選！各プラグイン機能を徹底解説 : 画像圧縮プラグイン
筆者の場合は、あまりプラグインを増やしたくないのと、自分で画像の品質をコントロールしたい方なので、プラグインではなく今回紹介したWebツールを使用しています。
便利な無料ツールに感謝しつつ、画像圧縮もサクサクとやっていきましょう。
