商品の写真や、ブログで使用する写真や画像のサイズを変更する時に便利なモノないかなぁ思った事ありませんか？
プロが使うPhotoshop（フォトショップ）とかは難しいし、フリーで画像加工できるものもあるけどツールとかイマイチわかりにくい。
ただ画像のサイズを変更するだけのために何かをインストールしてっていうのも面倒。
そんなあなたにインストール不要でブラウザ上で画像のサイズが変更できる「BULK RESIZE PHOTOS」をご紹介します。
もちろん無料です！
目次
画像のサイズ変更について
一般的には「画像のサイズ変更」といえば、画像その物の大きさの変更を意味すると思います。
ですが、画像のサイズ変更には「大きさ」の変更と「容量（画質）」の変更の2通りがあります。
画像大きさの変更
cmやmmなどで表せる大きさです。
ですが、ホームページでは長さの単位ではなく画素数（ピクセルという単位）で表現します。
px（ピクセル）
640ピクセルとか1024ピクセルとかいった表現を聞いた事はないですか？
デジカメで写真を撮った時もピクセルでサイズが表示されていると思います。
先ほどもいいましたがこれは長さの単位ではなく画素ですので、横幅が640ピクセルの写真を見た場合、モニタの大きさによって見える大きさは違ってきます。
今回ご紹介する「BULK RESIZE PHOTOS」ではこのピクセルを変更する事が出来ます。
画像の容量の変更
画像の容量の変更をする際にも画像のサイズを変更するといった表現を使用します。
この場合、ピクセルは変更しないで画質を上げたり落としたりして画像の容量を変更します。
もちろん、単純にピクセルを小さくすれば容量も軽くなります。
ホームページなどで画像を使用する場合は、アップロードできるデータの容量が決まっていたり、読み込み速度を考えて画像の容量を調整する事があります。
そもそもなぜ画像のサイズ変更が必要なのか？
ホームページで商品登録やブログで画像をアップする際に、大きなサイズの写真をアップしてもちゃんと決まった枠のサイズに縮小されて表示されたりします。
ですので、わざわざ画像のサイズを変更する必要がないんじゃないか？と思うかも知れません。
ですが、下記のような事がよくみられます。
- 必要以上のサイズのものを見た目のサイズだけを変更して表示しているので表示速度に影響が出る。
- 横幅だけが揃っていて、縦の長さがバラバラ
- サーバーの容量が一杯になる
表示速度に影響が出る
1280ピクセルの画像をアップしても、公開されているページをブラウザで見ると、横幅300ピクセルになって綺麗に見えています。
ですが、1280ピクセルの画像を見た目だけ300ピクセルに変更した画像の容量（データの重さ）は元のままです。
そういった画像を1ページ時に何枚も使用しているとページ自体の容量が大きくなり表示速度に影響が出てきます。
そして、表示速度はSEOにも影響していきます。
画像アップロードのプログラムによっては、アップロードした時に自動で画像サイズを変更してくれるものもあります。
また、表示サイズよりも大きい画像をしようしているからといって必ずしも悪いというわけではありませんが、必要ないのであればなるべく画像サイズを変更してアップロードしましょう。
見た目がチグハグになる
画像サイズを変更する場合、大抵は横幅と高さの比率を保ったままサイズが変更されます。
たとえば横幅640px、高さ480pxの画像があったとします。
横幅を300pxに変更した場合は、高さも自動的に変更され高さ225pxになります。
ですので横長や縦長の画像がいくつもあって、横幅だけを揃えても高さが揃わない場合があります。
ショッピングサイトなどの画像がたくさん表示されている場合、横幅は揃っているけど、高さが揃っていないとチグハグな感じがして見にくいです。
最近はわざとそういった見せ方をする場合もありますが、それとは違うチグハグ感がどうしても出てしまいます。
見た目も大切なので画像サイズの調整は必要です。
サーバーの容量が一杯になる
CMSやショッピングサイトで画像をどんどん追加していると、いつの間にかサーバーの容量が一杯になってしまう事があります。
これもブラウザの見た目では、縮小されたサイズで見れているので、そんなに大きな画像をアップしている意識がなくなってしまいます。
さらに、最近ではとっても便利になってスマートフォンで撮影した写真をそのままアップ出来てしまいます。
自分のスマートフォンでとった写真がどんなサイズで撮れているか知らない人も多いんではないでしょうか？
画質はいいまま残しておきたいので、大きいサイズで撮影し、画像のサイズ変更などをしてアップするという習慣をつけましょう。
BULK RESIZE PHOTOSの使い方
まずはBULK RESIZE PHOTOSにアクセスします。
英語ですが、使いか方は簡単なので気楽にいきましょう。
1.画像をアップロードする
まずはサイズ変更する画像をアップロードします。
赤枠で囲んだ点線の中に画像をドラッグするか、「Choose Images」と書かれた緑のボタンを押して画像を選択します。
画像のアップロードが完了するとこのような画面になります。
赤枠で囲んだ部分がメニューです。
- Scale
- Longest Side
- Width
- Height
- Exact Size
- Add Watermark
画像をアップロードした時は「Scale」が選択されています。
英語が並んでいますが、「Add Watermark」以外はすべてサイズを変更する方法が違うだけなので何も難しい事はありません。
おそらく良く使うのは「Width」ではないかと思います。
それではそれぞれメニューを見て行きましょう。
2.画像のサイズを変更する
Scale：パーセンテージで画像サイズ変更
これは%（パーセンテージ）で指定して画像のサイズを変更するメニューです。
いろいろなサイズの画像があって、それらを一覧などで並べていた場合の画像サイズ変更などに使用するといいかもしれません。
赤枠で囲んだ部分に数字を記入し、下の「Start Resizing」という緑のボタンを押すとファイルを保存するか確認されますので保存を選択してください。
たとえば横幅570pxの画像と320pxの画像が並んでいたとします。
その右側にスペースを確保して文章を入れるときに画像サイズを変更する必要があります。
何ピクセル縮小するか計算していては面倒なので、だいたい3分の1くらいスペースがほしいとか、半分くらいスペースが欲しいという時に、画像のサイズをそれぞれ66%とか50%とかに縮小すればいいはずです。
また、サイズ変更しようとしている画像のサイズが分からに時にもいいかもしれませんね。
おまけ：画像のサイズを知る方法
Firefoxを使う
Firefoxというブラウザを使うと、赤枠の画像のサイズを見る事が出来ます。
ただし、画像が背景として使用されていた場合はこの方法では見られません。
サイズを確認したい画像にマウスを当てて、右クリックします。
そうするとメニューが表示されるので「画像の情報を表示」をクリックします。
「画像の情報を表示」をクリックすると別ウインドウが開き、そこに画像のサイズが記載されています。
サンプルでは「寸法： 336px × 220px」となっています。
画像のプロパティを見る
フォルダの中にある画像をクリックすると、フォルダの下の方（画像の赤枠で囲んだ部分）にサイズが表示されます。
画像をクリックしても表示されない場合は、画像のプロパティを見るとサイズがわかります。
- 画像を右クリックして「プロパティ」をクリックする
- 「詳細」タブをクリックする
プロパティの詳細タブの中に画像の大きさ、幅、高さが記載されています。
Longest Side：縦横長いほうのサイズを基準に変更
長方形の画像の場合、横か縦のどちらかが長いはずです。
その長いほうのサイズを何ピクセルにするのかを指定してサイズ変更ができます。
赤枠の中に希望のサイズを数字で記入し、下の「Start Resizing」という緑のボタンを押すとファイルを保存するか確認されますので保存を選択してください。
たとえば1920 × 1024の画像を800pxと入力して変更すると、800 × 427の画像に変換されます。
これが、1024 × 1920の画像を800pxと入力して変更すると427 × 800の画像に変換されます。
縦か横の長い方のサイズを指定してやると、比率を保ったまま縦も横サイズが変更されます。
Width：横を基準にサイズを変更
横幅を何ピクセルにするかを赤枠で囲まれた所に記入し、下の「Start Resizing」という緑のボタンを押すとファイルを保存するか確認されますので保存を選択してください。
ホームページで使用する場合、この横幅を基準に画像サイズを変更する機会がとても多い気がしています。
ホームページの場合、ほとんど横幅は決まっていますが、縦であればどんどん下に行けます。
ですので、横と縦のどちらに制限をかけるかというと、どうしても横になる場合が多いです。
おそらくみなさんもこの横幅を基準に画像のサイズを変更する機会が多いと思います。
Height：縦を基準にサイズを変更
縦幅を何ピクセルにするかを赤枠で囲まれた所に記入し、下の「Start Resizing」という緑のボタンを押すとファイルを保存するか確認されますので保存を選択してください。
先ほどホームページでは横幅を基準に画像サイズを変更することが多いと言いましたが、縦幅で揃えることもありますので、そういった場合に使用します。
Exact Size：横と縦の両方を設定更
左の赤枠に横幅、右の赤枠に縦幅を記入し、下の「Start Resizing」という緑のボタンを押すとファイルを保存するか確認されますので保存を選択してください。
これは注意が必要です。
縦横の比率は変更されないので、足りない部分は背景が白色になってしまいます。
左右が白色の背景で表示されます。
Add Watermark
これは画像サイズを変更するのではなく、アップロードした画像に、もう一枚画像を透過して重ねる事ができます。
赤枠の中の「Pick Watermark Image」というボタンをクリックすると、自分のパソコンの中にある画像を選択する事ができます。
ここで選択した画像を、最初にアップロードした画像に重ねる事ができます。
画像を選択するとこの画面に切り替わります。
ここでは背景になる画像（最初にアップした画像）の濃さをメーターで設定できます。
右に動かす（数字が大きくなる）と背景が濃くなり、左に動かす（数字が小さくなる）と背景が薄くなります。
サンプルで、背景が青色のi-Styleロゴ画像の上に、斜めのロゴを重ねてみます。
こんな感じになりました。
サイズ変更などをやりなおす場合
すべてのメニューで下の「Start Resizing」という緑のボタンを押すとサイズが変更されたり、加工されたりした画像をダウンロードする事が出来ます。
ダウンロードした画像を見て、「あ、失敗した」とか「もう少しサイズ変更したい」と思った時に、最初からやらなくてもすぐにやりなおせるんです。
画像ダウンロード後に表示される画面です。
ここの右上にある「Revise Resize Settings」というボタンを押すと、サイズ変更の仕方から変更ができるので、いろいろと試す事ができます。
とっても便利ですよね。
何枚もの画像をまとめて変更する場合
もうひとつとっても便利な機能があります。
複数の画像をまとめてサイズ変更できるんです！
ドラッグで画像を追加する方法と、フォルダから画像を選択する方法がありますが、最初から複数の画像のサイズを変更するのであればフォルダから選択した方が楽です。
フォルダから複数の画像を選択する場合
まずは、一つのフォルダに加工する画像をまとめておきます。
「Choose Images」を押して画像をまとめておいたフォルダを選択します。
フォルダの中の画像をマウスで選択（マウスで全部を囲むようにクリックしながら選択していく）します。
次に開くをクリックすると複数の画像がアップロードできます。
画像がちゃんとアップロードできたか確認するには、ページ上部の「View Files（）」の（）の中の数字を確認してください。
その数字がアップロードされたファイルの数です。
1枚づつ追加する場合
最初に画像をアップロードしてから画像を追加する場合は、ページの上にある「＋Select More」というボタンを押します。
そうすると画像を選択する最初のページが表示され、そこで画像を追加する事が出来ます。
まとめ
画像のサイズ変更はいかがでしたか？
英語のサイトですがとってもカンタンですよね。
ホームページの印象は写真でとってもかわります。
画質もそうですが、サイズによって見え方も変わってきます。
画像を多く使用するショッピングサイトのようなサイトだと、ページの表示スピードにも影響してきます。
少々面倒かもしれませんが、少し手間をかけるだけで最適なサイズの画像を表示する事が出来ます。
こういった細かい部分で他のホームページと差をつけてみませんか？
masakun
最新記事 by masakun (全て見る)
- Googleマイビジネスは効果が出るのも早い！カンタン活用方法 - 2020年9月14日
- 【初心者向け】話題のオンラインストアShopify（ショッピファイ）とは？ - 2020年8月31日
- 【2020】ショッピングサイトの傾向と改善する際の注意点まとめ - 2020年8月12日
