読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

imagemagickを使ってサーバーサイドで画像を変換する

画像を使用するWebサービスを作りたいと思っている時、単純に、ユーザーから投稿された画像をそのまま使うのは得策ではありません。

必要以上に重い画像データはロード時間と転送量の増大といった問題を引き起こします。

それはユーザーには無駄なロードの待ち時間を体験させ、ユーザビリティの低下となる一方で、

クラウドサービスを利用している場合は、転送量に比例して料金がかかることがあり、

余分なコストがかかることになります。

このような場合はサーバーサイドで画像の圧縮処理を実行すべきでしょう。

この場合、役に立つのがimagemagickです。オープンソースの画像処理ツールで、非常に軽量・高速に動作するのが特長です。

導入法はこちら

pngファイルをjpgに変換する

PNGファイルはJPGに比較すると容量が多くなる傾向があります。

このため、特に理由がなければjpgに変換しておくのが得策でしょう。

単純に拡張子を変換すれば大丈夫です。

今回テストにつかうのはこの画像!

f:id:mochizuki_p:20161228163005j:plain

2400 × 2346の大きな画像です。

565KBあった画像が・・・

convert test.png test.jpg

333KBに!

サイズを変更する

サイズを変更することもできます。

-resizeを指定して寸法を指定します。

比率を固定したまま横幅を640pxにリサイズする場合は

convert test.png -resize 640x test.jpg

jpgへの変換を同時に行うこともできます。

convert test.png -resize 640x test.jpg

565KBあった画像が56 KBまで削減できました

画像の一部だけを切り出す

オプションcropを使用する

構文は-cropの後に

{横幅x縦の長さ}+{x方向のオフセット}+{y方向のオフセット}

と指定します。

f:id:mochizuki_p:20161228162410j:plain

 convert lena.jpg -crop 300x300+106+106 rwa.jpg 

結果は

f:id:mochizuki_p:20161228162405j:plain