画像圧縮やリサイズをオンラインで行える便利なwebツールを解説

画像圧縮できる便利なWebツール

Webサイトの高速表示はSEOで重要性を増しています。特に中小企業のWebサイトや個人のブログサイトでは、データ容量が大きいままWebサイトにアップされて、低速表示の原因になっていることもあります。

画像圧縮は専門的な画像処理ソフトを使用しなくてもWebアプリで解決することが可能です。

本記事では、Web上で完結する画像圧縮Webツールを厳選して紹介します。

この記事の内容
  1. Web上で利用できるWebツールの紹介
  2. 適切な画像データの大きさやデータ量
  3. 当ブログで設定しているアイキャッチなどの画像の大きさと容量

画像の圧縮とリサイズ

Webサイトを閲覧したときに、以上に表示が遅いWebサイトを見かけたことはないでしょうか?

Webサイトの表示が遅い原因は様々ありますが、原因のひとつとして画像データの圧縮がされていないことがあります。

画像の圧縮は、専門的な画像処理ソフトを使うことで可能ですが、購入費用が掛かったり、使い方が難しいなどの課題があります。

当ブログでも画像処理ソフトを使用してアイキャッチや各見出しの下に画像を作成しますが、圧縮やリサイズはWebツールで全て行っています。

あっという間にWebサイトに適した画像の圧縮とリサイズができるので、是非使ってみてください。

画像圧縮Webアプリ

それでは、画像圧縮Webアプリを紹介します。

Squoosh

Squooshは、Google発の画像圧縮ツールです。専門的な知識を必要としないで、圧縮率を変更するバーを動かして画像の品質を確認できます。

圧縮率が決まったら、画像の大きさを変更する必要があれば変更をしてから、ワンクリックで圧縮済みの画像がダウンロードされます。

Squooshの詳細は、下記の記事で解説していますので、こちらが参考になれば幸いです。

Webで使用する画像データを最適化する

筆者の場合は、ブログ記事のアイキャッチ(ブログ記事の一番上に表示される画像)に使用する画像を圧縮する時や、見出しの下に配置する画像の容量をなるべく小さく詰めていきたいときに使用しています。

Squooshは、画像1枚を細かく丁寧に圧縮できるので重宝しています。

TinyPNG

一気に複数の画像を圧縮したいときには、TinyPNGを使用しています。

無料版でもかなり使える画像圧縮Webツールです。

画像データをブラウザ内に持っていくだけで画像の圧縮が始まるので、使い方はとても簡単です。

TinyPNG

Bulk Resize Photos

Bulk Resize Photosは、圧縮と同時にリサイズもできるWebツールです。

ブログなどで、画像の横幅を統一しつつ、画像の圧縮を行いたいときに便利なWebツールです。

こちらも、ブラウザ内に画像データを持っていくだけで圧縮が始まるので、とても簡単に圧縮が行えます。

複数の画像を全て同じ幅にして圧縮したい場合は、圧縮設定で「最長の辺」でピクセル数を指定すると統一した横幅で画像の圧縮とリサイズがされて、画像がダウンロードされます。

Bulk Resize Photos

適切な画像の大きさとデータ量はどれくらいなのか

最適な画像の大きさやデータの大きさは、用途によって様々あるので違いがありますが、例えばブログでしたらなるべく小さな画像データのほうがいいですよね。

画像の大きさ

当ブログの場合は、アイキャッチを始めとして、見出し下、記事内で使用する画像は現在、全て1200pxにしています。

その理由は、AMP対応に関するGoogleのデベロッパー向けサイトで表記されているサイズに合わせているからです。

Google検索デベロッパーガイド

当ブログは最初からAMP対応にしてみようと考えていたのですがまだできていません…

ただ、上記のサイトで画像は1,200ピクセル以上と記載があり、また、画像の縦横比率についても記載で16:9、4:3、1:1と記載があるので、アイキャッチは横1,200ピクセル縦675ピクセルの16:9にしています。

画像のデータ量

画像のデータ容量は、あまり小さくしすぎても画像にノイズやバンディングが発生してしまいます。

画像の品質があまりに落ちてしまうと見映えが悪くなってしまいますね。

画像データは、画像内で使用されている色の多さや、中身のタイプ(写真なのかイラストなのか)によって圧縮率や結果が大きく変わります。

当ブログでは、写真データの場合は50KBから大きくても70KB、イラスト系の画像データの場合は20KBから30KBくらいにしています。

横幅も縦幅も1,200ピクセルくらいの1:1の画像だと、100KB以下にすると画像によっては劣化が激しくなるので要注意です。

おすすめの画像素材サイト

当ブログの理想は、全て完全オリジナルのイラスト画像だけでやっていきたいのですが、まだまだそうなっていません。

いくつかの画像素材サイトから、ブログに使用できる画像を選んでいます。

ブログで使える画像素材サイトの紹介

まとめ|Webサイトを見直して大きな容量の画像を修正する

長い間、Webサイトやブログサイトを運営してくると、圧縮するのを忘れて大きな画像データのままWebにアップされてしまっているデータがあるかもしれません。

WordPressを使用している場合には、プラグインなどで後から一括圧縮することができるプラグインなどもあります。

ブログのおすすめプラグイン10選!各プラグイン機能を徹底解説 : 画像圧縮プラグイン

筆者の場合は、あまりプラグインを増やしたくないのと、自分で画像の品質をコントロールしたい方なので、プラグインではなく今回紹介したWebツールを使用しています。

便利な無料ツールに感謝しつつ、画像圧縮もサクサクとやっていきましょう。

副業でオススメのビジネスを分かりやすく解説

ABOUT US

小林 玲王奈Unicorn Consulting Inc. 代表取締役

起業する人やスタートアップ企業に出資や資金調達を含めてサポートしながら、ブログの運営やWebアプリの開発、LINEスタンプ制作をして、ひたすらキャラクターデザインをやっています。

最近は、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。

2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

現在、ユニコブログ®以外にも、20サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々も兼ねています。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

SMPTE Professional Engineer Member

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜日 コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当

プロフィールの詳細はこちら