Tweet
- 橋口 文子
- 合資会社AJ Webプロデューサー
- 東京都
- Webプロデューサー
注目の専門家コラムランキング
対象：ホームページ・Web制作
- 原島 洋
- （Webプロデューサー）
- 井上 みやび子
- （Webエンジニア）
お客様側にてブログなどをアップしていただいているのですが、写真などの画像をアップした際に、自動でサムネイルという小さな画像がページに表示されます。この写真画像を大きくして見たいときは、クリックします。その時に、モニターに納まらない大きさの写真となってしまうことがありお困りでした。
画像の圧縮は割とご存知なのですが、以外と画像の大きさには無頓着という場合も少なくないようです。圧縮と大きさ(ピクセル)設定このふたつに気をつければだいじょうぶです。
私はFireWorksを利用して、パーセンテージと圧縮率を決めいっぺんに理想の圧縮と大きさに変更しています。Photoshopも同じく。ですが、ここではフリーソフトということで、リオットをご紹介します。
Riot ： http://luci.criosweb.ro/riot/
のDownload ページを開きます。
Standalone application [installer | portable (zip archive)]
から、パソコンにインストールして使用する場合は、installer を インストールせずに使用する場合は、portable を選びます。
次に表示されるページ上部のDownload Radical Image Optimization Tool または、Download Radical Image Optimization Tool をダウンロードし、インストールまたは、Riot.exeから「Riot」を起動します。
Openをクリックして写真などの画像を指定します。
その際に、Resample というポップアップウィンドウが開きますので、Witdh とHeight をピクセルまたは、パーセンテージで指定します。Keep aspect radio にチェックをしておくと、縦ｘ横を自動計算してくれます。（縦を入力すると横の数字が自動で表示）
ここでの設定が、表示される「写真の大きさ」となります。
開いた写真が表示されますが、左側がオリジナル、右側に最適化された写真が表示されます。
9MB近くあった写真が、0.2MBまで圧縮されましたがほとんど画像の劣化などはみられませんでした。
最後に、保存（Save）するときに、気をつけたいのが元の画像に上書きし無いようにすることです。
保存場所を必ず変えるか、ファイル名を変えるようにしてください。
Riot
http://luci.criosweb.ro/riot/
先週末は大雨でBBQは延期になりました。リリース間近の仕事がありどうやら今週末は休みはないようです。
みなさまよい週末をお過ごしください。
