裏紙に書く程度の内容

画像を圧縮するWEBツール

ブログの執筆作業の簡略化のため、画像を圧縮するwebツールを作りました。

ImageResizer

できること

まずは機能と特徴から。

機能としては今のところ

  • 画像を縮小(リサイズ)、圧縮する
  • キャプションを入れる
  • ファイルタイプを変更できる

の3つだけ。

特徴としては、縮小・圧縮処理自体をブラウザ内で行います。
サーバ処理ではないので、プライベートな写真でも安全、かつ無駄な通信も発生せず、高速に処理できます。

使い方

説明するほどでもないんですが、一応使い方を。

簡単に言うと

  1. ファイルを選択して
  2. 必要であればキャプションの設定をして
  3. ダウンロードボタンクリック

という感じです。

対象ファイルを選択

まずはファイルの選択。
といっても画面を見ていただければわかるとおり、[ファイル選択]ボタンから目的の画像を選択します。

また、ドラッグ&ドロップも対応しています。

画像ファイルを画面上にドロップすれば即座に圧縮されます。

ファイルサイズ・タイプの選択

[Width]で縮小後のファイルサイズを指定します。

縦横の比率は保ったまま、縮小します。

また、[File Type]で出力するファイルタイプを変更できます。

キャプションの設定

続いて(必要であれば)キャプションの設定を行います。

“Caption”にテキストを入力するとしたの画像部分に反映されます。

そのほか、設定できるのは

  • “Font Size” でテキストの大きさ、
  • “Position” でテキストの表示位置、
  • “Font” フォントの種類を選択、
  • “Caption background” をONにするとキャプションテキストに背景を設定

できます。

また、キャプションのテキストと背景の色もそれぞれ変更できます。


使い方はここまで。

画像を確認してOKなら[Download]ボタンで画像を保存できます。

便利な使い方

画像を読み込みなおしたときも各種設定はそのまま生きています。

そのため、「複数の画像にコピーライトを入れたい!」という場合、1枚目で設定が出来たらあとは次々画像をドロップ・ダウンロードするだけでOKです。

今後の機能追加について

現状はキャプション入れて画像をリサイズするだけですが、

今後出来たら良いなと思うのは「トリミング」ですかね。

それからキャプションに背景色を入れると余白部分がイマイチ。これは今後の修正で何とかする予定です。

Index