画像の減色
写真などの画像ファイルを「高品質に減色」できる無料のWebアプリケーションです。
減色した画像は「GIF/PNG/BMP」ファイルで保存可能です。パソコンやスマートフォンのスクリーンショットやアニメ、アイコンなどの画像であればブログにアップロードするファイルサイズを小さくする事ができます。
このWebアプリケーションは「HTML5」「JavaScript」のみで動作しますので最新のブラウザがあればどなたでもご利用可能です。
画像の各種変換は「あなたのブラウザ」で実行します。ですのでサーバーにファイルをアップロードする事はありませんのでご安心して下さい。
※Android版のお主の画像減色も公開。
※GitHubでGIF.js、PNG.js、BMP.js、MedianCut.jsをオープンソースで公開。
目次
1. 使い方
2. 機能
3. 推奨ブラウザ
4. 動作確認
5. バージョン
6. FAQ
7. その他のWebアプリケーション
8. 運営者のブログ
1. 使い方
データを残したい場合は必ず画像を出力してください。
※左上にある「画像の減色」のバナーをクリックでも可能です。
1.1 画像ファイルを読み込む
ファイルを読み込むには画面左上にある「画像の読み込み」のボタンから読み込みます。
※画面上にファイルをドロップすることで読み込むことも可能です。
1.2 基本操作
種類
減色の種類には次の3種類があります。
| 減色の種類 | 効果 |
|---|---|
| お手軽 | 3種類の中で最速で減色します。稀に品質が良い場合があります。 |
| 全体を中心 | 画像の全体を中心に減色します。3種類の中で安定した品質となります。 |
| 細部を中心 | 画像の細部を中心に減色します。細部にこだわりたい時に最適です。 |
バランス
減色する際に「速度重視」「品質重視」のバランスを指定することができます。最初に設定されている値はプログラムが自動的に判別している「やや速度重視」の値となります。
最も高品質にする場合はスライダーを一番右にします。
色数 (いろかず)
画像で使用される色の数を指定された数まで減らすことが可能です。
「お手軽に減色」は「2色、16色、256色」から選択可能です。「全体を中心に減色」「細部を中心に減色」では2色から256色まで自由に指定できます。
基本的に色数を指定するとその色数以下の色数に減色されます。
減色の実行
実行ボタンを押すと指定された設定で減色を実行します。減色の実行は元の画像に対して行いますので連続して減色をテストする事が可能です。
ファイルの出力
減色後の画像の上に「BMPで出力」「GIFで出力」「PNGで出力」のボタンが表示されますので、そちらから任意の画像形式で出力します。
出力されたファイルの保存方法は「画像ファイルの保存方法」をご確認ください。
2. 機能
・ 画像ファイルを2色から256色までに減色
・ 3種類の減色パターン(お手軽減色、全体中心に減色、細部中心に減色)
・ 速度重視/品質重視のバランス選択
・ 連続して減色をテストする事が可能
・ GIF/PNG/JPEG/TIFF/BMP/ICOファイルの読み込み ※1
・ GIF/PNG/BMPファイルへの書き込み
画像ファイルの書き込みは画像形式毎に色数を自動判別して出力されます。例えば8色に減色してGIF形式で出力すると自動的に8色のGIFフォーマットで出力されます。8色をPNG形式で出力するとPNGの仕様には8色はありませんので16色のPNGフォーマットとなります。
ファイルサイズは一般に色数が少ないほど、小さくなります。
| 画像形式 | 対応色数 |
|---|---|
| GIF | 2色、4色、8色、16色、32色、64色、128色、256色 |
| PNG | 2色、4色、16色、256色 |
| BMP | 2色、16色、256色 |
※1 BMP/ICOファイルはWindowsでのみ確認しております。その他のOSでは読み込めない場合があります。TIFFファイルはIEまたはEdgeでのみ読み込み可能です。また、ファイルの読み込みはブラウザの標準機能を使用していますので、ブラウザによってはその他の画像ファイルも読み込める場合があります。
3. 推奨ブラウザ
Chrome / FireFoxの最新版
各ブラウザの減色速度は次のようになります。
| ブラウザ | 減色速度 | 備考 |
|---|---|---|
| Chrome | 高速 | ファイルの保存が手軽です。 |
| FireFox | 普通 | |
| Internet Explorer | 低速 | |
| Microsoft Edge | 低速 |
※2016年3月の結果です。FireFox/Edgeはアップデートで早くなる可能性があります。
4. 動作確認
・ Internet Explorer 11(32bit/64bit)
・ Microsoft Edge(32bit)
・ Chrome / FireFoxの最新版
※タブレット、スマートフォンは未対応です。
※HTML5に対応していればその他のブラウザも動作すると思います。
5. バージョン
v1.00(2016年3月18日版)
6. FAQ
Q1 画像のローディングが長いです。
4000x3000などの大きい画像は読み込むだけでも時間がかかります。
また、ローディングでは全てのファイルで「画像の色数のカウント」をしています。GIF/PNGファイルはそれに加えて「透明、不透明の色を白色へ変換」をしていますので若干、長く感じるかも知れません。
Q2 減色のアルゴリズムは何を使用していますか？
お手軽に減色は「均等量子化」です。
全体を中心に減色はRGB色空間の「中央値分割法」(メディアンカット)で色の使用面積が多いキューブ(立方体)の中央値を分割しています。また、分割対象のキューブの1辺が長い色を軸にしています。RとGは1.2の係数を付加しています。
細部を中心に減色はRGB色空間の「中央値分割法」で分散が小さいキューブの中央値を分割しています。また、分割対象のキューブの分散が大きい色を軸にしています。RとGは1.2の係数を付加しています。
k平均法(Kmeans)も減色パターンに入れるはずだったのですが、Javascriptでは重過ぎるので実用的ではありませんでした。また、ハーフトーン(誤差拡散)が選択肢に存在しないのは単に私が好みではないからです :-)
※詳細は減色アルゴリズム[量子化/メディアンカット/k平均法]をご覧ください。
7. その他のWebアプリケーション
プチラボ
https://www.petitmonte.com/labo/
50種類以上の便利なツールを無料で公開しています。(フリーソフト)
8. 運営者のブログ
プチモンテ
https://www.petitmonte.com/
スポンサーリンク
