> 記事 > ウェブ制作 プログラミング 画像 > 画像のリサイズをネット上で簡単に。

画像のリサイズをネット上で簡単に。

2016.11.15.(Tue)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

今日のテーマは写真についてです。最近はデジカメの写真も非常に高解像度になり、スマートフォンで撮った写真も大変キレイに残すことが出来るようになりました。とてもきれいになったのは確かによいことなのですが、その分ファイルの容量が増え、メールで送れない、Webにアップロードできない、というようなことが起きるようになってきました。そんな時、画像ファイルを簡単にリサイズしたい。メールなどで送るために小さくしたいということ、あるんじゃないかと思います。

画像のリサイズのやり方はソフトやアプリを使う方法、いくらでもあるのですが、イマイチやり方がわかりづらい。いちいち覚えていられない、ということもあるかと思います。そこで、Webを利用して、画像ファイルを単純にリサイズできるようなものを作成してみました。

方法は簡単このWebサイト上でできます!

まず、画像の大きさをどのくらいに変えたいか、という数値を(1)のところに入力します。幅と高さが指定できますが、元画像をその枠の大きさに合わせてピッタリ合う方に自動的に合わせます。
例えば、1200×800の画像を500×500に合わせると、500×333になります。

画像を(2)ここにファイルをドラッグしてくださいというところに、ドラッグ&ドロップします。

大きさが確認できたら、(3)ダウンロードボタンを押します。ファイル名はランダムな文字列で、アップロードしたそのままではありません。元ファイルと同じ名前で保存してしまわないようにご注意ください。



試しに、2.6MBのピッククッションの画像(3024×4032)を小さくしてみたところ・・375×500(約元画像の12%のサイズ)に変換され、pngの場合はサイズは581KB(22%)、jpgの場合サイズは135KB(5%)になりました!

圧縮率の指定とか、難しいことはよくわからないが、とにかく小さくしたいんだ、という場合に使って頂ければ、と思います。

サーバーにはファイルを保存しておりませんので、万が一、小さい画像で元画像を上書きしてしまっても取り戻せないのでご注意ください。

参考:
ドラッグ&ドロップで画像ファイルのサムネイルを表示する | アットステージブログ
メインはここです。

[jQuery]でcssプロパティを動的に追加、変更、削除する – Qiita
画像を変更するサイズを動的に変えられるようにするために参考にしました。

JavaScript-Load-Image/load-image-orientation.js at master · blueimp/JavaScript-Load-Image · GitHub
iPhone画像を置くと、あらぬ方向になってしまう問題の修正に参考にしました。

javascript – Save canvas as jpg to desktop – Stack Overflow
pngだけでなく、jpgでダウンロードできるようにしました。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
  • facebook
  • twitter