SEO

画質を落とさずに画像のサイズを減らして軽くする方法

画質を落とさずに画像サイズを減らす方法
ヨロコビーム

ブログにしろ動画にしろ、画像をたくさん使いますね。

以前に比べるとパソコンやスマホの性能も上がり、画像編集自体はだいぶ楽になりました。

ただ、そのままブログに貼ったりすると、データサイズが大きく、表示がもたつくことがあります。

特に今はモバイル中心の時代。いろんなものが高性能なったとは言え、データサイズはできるだけ小さくしておきたいものです。

今回は、ブラウザベースで使える、画像のデータサイズ縮小サービスをご紹介します。

スポンサーリンク

TinyPNG(タイニーピング)

私が一番よく使っているサービスです。

このブログの画像もTinyPNGでデータサイズを減らしています。

名前にPNG(ピング)とついていますが、JPEGデータにも対応しています。

使い方

データサイズを減らしたい画像を、画面上部の枠の中にドラッグ&ドロップするだけです。

すると、少し待つと画面中央にデータサイズを減らした結果が出ます。

この例だと、画面中央に「48%」と表示され、48%削減されたことが分かります。

右上の「download」をクリックすると、サイズを減らした画像がダウンロードされます。

ダウンロード先は、使っているブラウザの設定によりますが、まず「ダウンロード」フォルダを探してみて下さい。

なお、複数枚まとめてダウンロードする場合は、中央少し右にある「download All」をクリックすると、圧縮されたZIP形式でまとめてダウンロードされます(tinified.zipというファイル名です)。

注意点

一度に20枚まで同時に処理できます。また、一つのファイルサイズは最大5MBまでです。

また、短時間に繰り返し利用すると「短時間に大量に使用しすぎです」という表示が出て受け付けなくなります。

そういう場合はブラウザをリロードするか、別のブラウザからトライして下さい。

Photoshop用プラグイン

枚数制限や5MBのサイズ制限を受けずに利用したい人向けに、TinyPNGのPhotoshop用プラグインもあります。

有料で65ドル(約7,000円)と少し高めでしたが、私はMac版を買って入れてます(Windows版もあります)。

Macの場合、MacOSがアップデートされると、それに合わせて更新してくれてるようです。

プラグインの使い方

プラグインをインストールすると、以下のように「ファイル」→「書き出し」の中に「TinyPNG andTinyJPG…」というメニューが現れます。

これを選択すると、下のようなダイアログボックスが表示されます。

特に圧縮率を設定する項目などは無く、「もうデータサイズは減らしました」ということのようです。

気をつけないといけないのは、JpegをPNGにしたりすると、データサイズが増えていることがある点です。

このTinyPNGの機能を、Photoshopのアクションやドロップレットと連携させることで、大量の画像を一気に処理できるのが、プラグインを購入する最大のメリットでしょう。

Photoshopを持っていて、仕事で日常的に画像を扱うなら購入を検討されてもいいかもしれません(時間を買うという意味で)。

Squoosh(スクウォッシュ)

Squooshは、Google Chrome Labが開発した画像リサイズサービスです。

WebP(ウェッピー)などの新しい画像形式に対応するなど、とても細かい設定ができます。その一方で、インターフェースがとても使いやすく作られています。

データ処理をブラウザ上で行うため、オフライン(インターネットにつながっていない状態)でも使えます。

使い方

処理したいファイルを画面上にドラッグします。

TinyPNGと違い、枠はありません。画面上であれば、どこでもOKです。

「select an image」をクリックして選択することもできます。

画像を読み込むと、下のような感じになります。

分割された画面の下に、それぞれ画像を設定するメニューがあり、2種類の設定を比較できるようになっています。

最初に表示されたときは、左側はオリジナル画像に設定されています。

「Resize」にチェックを入れると、大きさを変えることもできます。

画像処理の専門家しか知らないような、かなり細かい設定までできますが、普段使いではあまり気にする必要はないでしょう。

一番下の「Compress」(圧縮形式)の形式とQualityの調整ぐらいでいいでしょう。

画質を維持したまま、かなりデータサイズを小さくしてくれるのが嬉しいですね。

注意点

TinyPNGと違い、複数の画像を同時処理することはできません。

compressor.io(コンプレッサーアイオー)

compressor.ioは、フリーのデータサイズ軽量サービスです。

開発しているのは、どうもオーストラリア在住の個人の方のようです。

使い方

画面下の「TRY IT !」をクリックします。

下のような画面になります。

ここに軽量化したい画像をドラッグするわけですが、compressor.ioは、通常の圧縮とロスレス圧縮を選べるようになっているので、ロスレス圧縮(Lossless(only for JPG and PNG)とある部分)を選択しましょう(初期設定では通常の圧縮(Lossy)になっています)。

Lossy(通常の圧縮)

画像データを圧縮すると、通常は一部のデータが削除され、元に戻せなくなります。

Lossy(ロッシ-)とは、ロスするということです。

日本語では「不可逆圧縮(ふかぎゃくあっしゅく)」と言います。

Lossless(only for JPG and PNG)(ロスレス圧縮)

ロスレスとは「ロスが無い」、つまりデータが削除されない圧縮形式ということです。日本語では「可逆圧縮(かぎゃくあっしゅく)」と言います。

画像の処理が終わると、下のようになります。

compressor.ioの面白いところは、データ量がどれだけ削除されたのか、アニメーションで見せてくれるところです。

開発者の書いたものを読むと、いずれバッチ処理(一定の手順をあらかじめ登録し、それを連続実行すること。Photoshopのアクションもバッチ処理の一つ)をできるようにするとのこと。

そうなると(恐らく一定の制限の元で)、複数の画像データを一括で処理(しかも無料で)してくれるようになるかもしれません。

その他のデータ軽量化ツール

今回、取り上げた3つのツールがお勧めです。

なので、他のは蛇足かもしれませんが、一応掲載しておきます。

Compress Image

JPEG Optimizer

Kraken.io

Optimizilla

mozjpeg

竹内たかし
竹内たかし
Webアナリスト
こんにちは!竹内たかしです。ご覧いただき、ありがとうございます。Googleアナリティクスを使った分析やLooker Studioでのレポート作成サービスを提供しています。お気軽にご連絡ください。
記事URLをコピーしました