こんにちは。マグネッツブログのSR（スーパーレア）かわさきです。ちなみにUR（ウルトラレア）は社長です。もうちょっとカードの排出率を上げられるよう頑張りたいと思います(´・ω・｀)
さて、ブログやECサイトをご自身で更新いただいているお客様からたまに「自分で画像を好きなサイズに変更する方法はないか？」というご質問をいただきます。私たち、プロのデザイナーはPhotoshopなど画像編集ソフトを使って行っていますが、画像をリサイズするためだけにソフトを揃えるのも難しいですよね。
そこで今回は、簡易的にWebブラウザやスマートフォンアプリでリサイズする方法をご紹介します。プロが使うソフトのように細かい設定はできませんが、直感的な操作で簡単に画像サイズを変えることができちゃいます。
目次
画像編集ソフトを使わずにリサイズする方法
「簡単に画像サイズの変更ができるツール」でチョイスしてみました、WebサービスとiPhoneアプリをそれぞれ1つずつご紹介します。
Webサービス「画像サイズ変換ツール」
Webブラウザでリサイズ、サイズ変更、簡単な明るさ補正が行えるサービスです。数値を見ながら編集できるので、任意のサイズにささっと変更できてとっても便利。
まずは画像を読み込みます。
右側の「画像のトリミング」を選択して、切り抜きたいエリアをドラッグで選択→「OK」をクリックで、任意の箇所を切り抜けます。
「画像のサイズ変更」を選ぶと、W（横）、H（縦）に任意の数字を入れ、好きなサイズに縮小できます。「縦横比固定」にチェックを入れれば、画像の比率を崩すことなく変更可能です。
最後に「画像を保存」を選択で、パソコンに保存して完了です。JPEGの画質も変更することができます。キャプチャでは紹介していませんが、「明度・コントラスト」から簡単な明るさ補正も可能です。
保存された画像を確認すると、リサイズ・トリミングされているのが分かります。（横が1px、指定した値より小さいですが…）
iPhoneアプリ「EverClipper」
iPhone上で画像のリサイズ、トリミング、回転ができるアプリです。
まずは、アプリを開いて、リサイズしたい画像を選択。
下のメニュー、「リサイズ」「切り抜き」「回転」から使いたいメニューを選択します。「リサイズ」は予め用意されているサイズから選ぶか、任意のピクセル数を設定してリサイズすることも可能です。
「切り抜き」も用意されているサイズからの選択か、任意のサイズ（数値入力、または範囲を選択）を指定して行います。切り抜く範囲が決まったら画像をダブルタップします。加工が終わったら右下のアイコンから画像を保存したり、メールで送りことができます。
おまけ
ツールの紹介だけではものたりないので、以下、おまけが本番モード発動です。
Webサイト用に画像を準備する際の注意点や、サイトに使用されている画像のサイズの調べ方をご紹介します。
画像は基本、高解像度（大きいサイズ）で準備を
大原則として「小さい画像を大きくすることはできないため」です。逆に大きい画像はいくらでも小さくすることができます。大は小を兼ねる、ですね！
基本的に写真などの「ビットマップ形式」の画像データは、小さい画像を無理やり拡大すると画像が粗くなります。
（「デザイン時に使いやすい写真を撮るために気をつけたい４つのポイント」より写真を拝借。）
使用したい被写体が写真の中で小さく写っている場合、周りの要らないところをトリミングした結果、画像のサイズが小さくなってしまった…なんてということも。
近年、ワイドサイズのモニターの普及率が上がり、スマートフォンやタブレットの画面も高解像度化が進んでいます。画面全体に美しい写真を展開する…など、リッチな表現を考えても、なるべくサイズ大きくきれいな画像を用意したいですね。
基本的に最近のデジカメやスマートフォンのカメラは性能がいいので、一から撮影する場合はあまり解像度のことは気にしなくても大丈夫です。イラストやロゴなどを準備するときに気をつけましょう。
Webサイトに掲載するときに、リサイズが必要な理由
「それなら、ぜーんぶ大きいサイズで撮影してそのままアップ、Webサイトに使用したらばっちりじゃない！？」
…となりそうですが、そうはいきません。
できないことは無いのですが、Webサイトのデータを保存しておくサーバー容量や、Webサイトを表示するために使用する通信回線の容量は有限なので、大きいサイズのまま使用すると容量を圧迫してしまいます。
特に通信回線は、昔に比べて大容量のデータを高速でやり取りできるようになったとはいえ、重たい画像を使用するとWebサイトの読み込みが遅くなり、閲覧に支障をきたすことも…。また、近年はスマートフォンなどを使用してモバイルデータ通信で接続する人も多く、そういった場合特に重たいサイトは嫌われます。
2000ピクセルの描画能力しか無いモニタに5000ピクセルの画像を無理やり縮めて載せても、よりきれいになるわけではないので、使用するサイズに合わせて適当なサイズにリサイズするのがベストです。
…とはいえ、ブログなどのCMSでは画像をアップロードした時に最適なサイズにリサイズしてくれる機能があらかじめ設けられていることが多いので、あまり厳密に気にしなくても大丈夫です。（しかし、アップロードするときも通信回線を使用しますので、程々のサイズで…）
Webサイトで使用されている画像のサイズを確認する方法
「このサイトの、ここに入れる写真を準備したいんだけど、どのくらいのサイズが必要なのかな？」というとき、Webブラウザから簡単に確認できます。
IE（Internet Explorer）の場合
サイズを確認したい画像の上で右クリック → プロパティを選択
画像サイズが表示されます。
Google Chromeの場合
サイズを確認したい画像の上で右クリック → 検証を選択
画像が選択され、上にサイズが表示されます。
※この表示、しばらくすると、もしくはカーソルが外れると消えてしまうので、その際は再度、右クリック→検証 で表示できます。
ちなみに、一緒に表示される検証エリア（画像では右、場合によっては下）は、右上のバツを押すと閉じることができます。
以前「ざっくりホームページ制作関連 用語辞典 その2：Webブラウザ編+おまけ」という記事でもご紹介した、「MeasureIt!」というエクステンションを使用して測る方法もあります。 
パソコンに保存している画像のサイズを確認する方法
前項とは逆に「パソコンに保存しているこの画像は、ここに使用してもサイズが足りるかな？」というとき、下記の方法で確認可能です！
以前「Webサイト制作依頼時に大量の写真をメールで送る方法（パソコン編）」という記事のなかでご紹介しものを再掲します。
Windowsの場合
ファイル/フォルダにカーソルを合わせる、または、右クリックで「プロパティ」を表示する。
Macの場合
副クリック（またはcontrol+クリック） で「情報」を表示する。
終わりに
ご紹介したツールは、リサイズメインのものでしたが、もっと凝った加工…画像補正や文字入れなどができるツールもあるので、気になった方は探してみてください。特にスマートフォンアプリの進化はスゴイですね！ 自撮り補正アプリ使ったら、全く別人になっちゃったりとか…。
それでは。
