高圧縮でWeb画像をキレイに軽くするための厳選ツール

Webで利用する画像を美しいまま適切な圧縮で軽量化するためのオンラインのWeb画像最適化サービスを紹介します。

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

画像の最適化とは?

Webサイトに欠かせない要素のひとつがイメージ(画像)ファイル。サイトのクオリティを上げるためにもユーザビリティを上げるにも、画像は美しく、かつ適切な圧縮で軽量化しておく必要があります。iPhoneなどで撮影した写真ファイルはそのままでは10MB以上もあり、未加工でWebに掲載してしまうとWebページの読み込みにとても時間がかかって閲覧者のストレスになるだけでなく、Googleの評価減にもつながるので注意が必要です。

ブログやInstagram、Twitterなどの投稿型のSNSツールでは、画像をアップロードするときにそれぞれの内蔵された画像最適化ツールを使って画像を小さくしています。しかし、Webページの作成では自分で画像を調整しなければなりません。

そこで利用したいのが最適なWeb画像にしてくれる「画像最適化ツール」(または画像圧縮ツールとも言われます)です。これを使うと、画像ファイルをWebに適した解像度や色数、圧縮比率に調整し、人間の見た目では閲覧に問題ない品質でファイル容量をなるべく小さくしてくれます。結果、ファイルのダウンロード時間が減るので、ページの読み込み時間を抑えることができます。

Photoshopなどの高機能画像編集アプリでは、Web最適化して画像を書き出す機能もありますが、以下に紹介するツールはウェブブラウザに画像を読み込んで処理できるので、アプリのインストールも必要がありません。

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

1.無料で使えて人気の「Optimizilla」

http://optimizilla.com/ja/

人気のある無料のオンラインの画像最適化ツールです。日本語にも対応しているので、初めて使う場合でもわかりやすく、誰にでもおすすめできます。ブラウザに一度に20個までのファイルをアップロードし、画像の圧縮設定を行って書き出しできます。ファイルをアップロードしたあとに、サムネールをクリックして画像の処理前、処理後を見ながら調整ができ、使い勝手にも優れています。

読み込みファイルの容量制限については特に指定されておらず、1枚で10MBを超える画像もアップロード&圧縮が可能です。%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-05-23-13-27-39

読み込み対応形式 JPEG/PNG
書き出し対応形式  JPEG/PNG

2.使い方が簡単な「Tiny PNG」

https://tinypng.com/
ブラウザにドラッグ&ドロップして画像の圧縮を行えます(20ファイル、1ファイルは5MBまで)。フリー版で1ファイル5MBまでのの容量制限があり、有料のPro版に移行することで25MBまでのファイルが利用可能になります。PNGの透過を保ったままビット数を減らすことでファイルサイズを小さくできます。
インターフェースは可愛いですが、画像の詳細設定はできませんので、細部にこだわりたい人よりも楽に作業したい人向けですね!

ブラウザベースだけでなく、Wordpressのプラグインや、Photoshopのプラグインも配布されています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-05-23-13-36-35

読み込み対応形式 PNG、JPEG
書き出し対応形式 PNG、アニメーションPNG

また、書き出しフォーマットをJPEGにしたいときは、tinyjpgのサービスも併用できます。
https://tinyjpg.com/

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

3.ZIPファイルに対応!高度な機能を備えた「Kraken.io」

https://kraken.io/web-interface

ファイルをまとめてアップロードし、圧縮レベルを選択してまとめて最適化を行います。プロ版に登録するとさらに設定が増え、画像のリサイズやリソースの選択、アップロードファイルの容量制限の解除(無料版で1MBまで、プロ版で32MBまで)などが可能になります。
DropboxやGoogle Driveからファイルを取り込める、ZIPファイルでまとめてアップロードでき、ダウンロードできるなど高度な機能がありますが、1ファイルの容量が1MBまでとなると、本格的に使うにはプロ版(月額5ドルから)の契約が必要になりそうです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-05-23-13-41-58

読み込み対応形式 PNG、JPEG、GIF
書き出し対応形式 JPEG、PNG、GIF、Animated GIF and SVG

→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する

4.大量な画像の最適化に「ImageRecycle」

https://www.imagerecycle.com/

画像やPDFをドラッグ&ドロップして最適化を行うサービスです。指定したWebサイトの画像を最適化した際にどのくらいの容量軽減が可能かのレポートを発行し分析する機能がついているのが面白いです。また無料で試す場合も登録が必要で15日間のお試しになります。画像をビジュアル的に調整するというよりも、多数ある画像をまとめて最適化する作業に向いているでしょう。有料版は1万ファイル10ドルからになります。

ImageRecycleのトップ

また、こちらが、PDFでメールにて送られてくるWebサイトの画像の分析レポートの一部です。私のサイトはBiNDで作成したので、ほとんど画像の圧縮にムダがありませんでした(現状が2.21MBで調整後の推測でも2.12MBで0.09MBという小さな違いでした)。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2018-05-23-13-45-45

読み込み対応形式 PNG、JPEG、GIF、PDF
書き出し対応形式 JPEG、PNG、GIF、PDF

いかがでしたか? Webサイトに使うイメージを最適化・圧縮する際の主要なサービスを紹介しました。

BiNDupでWeb制作をする場合は、画像の最適化をある程度、自動的に行っています。しかし、ページの容量が検索順位に響くなど影響がシビアになっている昨今、ぜひ気を使ってみてくださいね。
また、新SiGNでは、Webサイト制作に必要な画像加工がよりスムーズに幅広く行えるようになりました。ぜひ、お試しください!

無料でBiNDupを試してみる

[デザイナー厳選] 覚えておきたい おすすめWebフォント30選

見た目や可読性に大きく影響するホントに使える30のWebフォントを、本文から見出し、日本語から欧文まで用途ごとにデザイナーが厳選しました。

今すぐ資料をダウンロード
  • POINT

  • Webサイトで使用する画像は画質を保ったまま容量を減らす「最適化」が必須
  • オンラインの画像最適化ツールを使うと、画像制作の知識が少なくても自動的に画像の最適化ができる!
  • オンラインのサービスは、対応フォーマットやアップロード制限があるので目的に合わせて選ぼう

あわせて読みたい