ブログやWebサイトにアップする写真や画像の容量は軽いに越したことはありません。容量が小さいと、サイトの表示速度も上がり、ユーザーの負担も小さいからです。
5Gの時代に神経質になる必要まではないですが、「これはさすがに・・・」というケースもあります。
例えば、スマホで撮影した写真をそのままアップしたりです。スマホで撮った写真は数MBほどあるため、1ページに10枚使うだけで閲覧者への負担はデカイですね。
というわけで、本稿では画像圧縮を簡単に実現するオンラインツールをご紹介したいと思います。
画像圧縮ツール7選
今回は300×250px(jpeg)の広告バナーを圧縮ツールにかけてみました。圧縮後・前の比較画像を原寸サイズで載せていますので、見比べてみてください。
I♥IMG 画像の圧縮
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
12KB(27%) | 33KB(100%) |
JPEG,GIF,PNGに対応。JPEGで63%の圧縮に成功しました。
粗さが目立つかどうか、ギリギリの線。
COMPRESS JPEG
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
18KB(55%) | 33KB(100%) |
JPEGのみ対応。JPEGで45%の圧縮に成功しました。
特に大きな粗さは目立ちません。
Squoosh
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
11KB(33%) | 33KB(100%) |
Squooshは、Googleが提供する無料の画像圧縮サービス。ビフォーアフターの確認と微調整ができるので便利です。
圧縮後との比較では、もっとも綺麗かもしれません。
WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。 当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介して...
ラッコツールズ
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
6KB(22%) | 33KB(100%) |
JPEG、PNGに対応。JPEGで78%の圧縮に成功しました。
ここは圧縮具合を「低(0.05)」「中(0.3)」「高(0.7)」と決められます。元画像がすでに圧縮をかけた状態だったため、「中」でいくと粗さが目立ちます。
Optimizilla
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
11KB(32%) | 33KB(100%) |
JPEG、PNGに対応。JPEGで68%の圧縮に成功しました。
圧縮後さらに調整が可能。今回は再調整で70を選択しました。粗さが目立つかどうか、ギリギリの線。
Online Image Tool
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
11KB(34%) | 33KB(100%) |
JPEG,GIF,PNGに対応。JPEGで66%の圧縮に成功しました。
粗さが目立つかどうか、ギリギリの線。
BULK RESIZE
- 圧縮後
- 圧縮前
圧縮後 | 圧縮前 |
16.2KB(50%) | 33KB(100%) |
画質「80%」で圧縮。50%の削減に成功しましたが、これがギリギリでしょう。
まとめ:上手な使い方
容量を軽くして画質が荒くなってしまえば元も子もありません。画質と容量はトレードオフの関係にあるため、「容量は軽いけど綺麗」という状態が理想です。
今回ご紹介したジェネレータを使うにあたって、どのレベルで圧縮するかは、元画像の解像度・圧縮率によります。ざっくりとした指標ですが、以下のような感じです。
- 解像度「高」の画像 → だいぶ圧縮してOK
- 解像度「中」の画像 → 少し圧縮する
- すでに圧縮済みの画像 → あまり圧縮しない方がいい
事例で出した広告バナーはPhotoshopで解像度をギリギリまで調整した画像になるため、少し圧縮するだけでも粗さが出ました。ただ、解像度の高い写真なら、Web画像用として40-60%程度圧縮しても問題なく綺麗に見える場合が多いです。
バランスを調整しながら使ってみてください。
また、WordPressサイトの画像をWebPに変換して、容量を劇的に軽くする方法もございます。詳しくは下記をご覧ください。
コメント