画像サイズを縮小する方法

サイトの画像サイズにはこれといった決まりはなく、大手メディアを閲覧してもその大きさはバラバラです。

けれども、Googleの構造化データに関するページには、画像に関して以下のような記述があります。

適切な画像が選択されるようにするために、アスペクト比が 16x9、4x3、1x1 の高解像度画像(幅と高さをかけて 800,000 ピクセル以上の画像)を複数指定してください。
(※参照:記事  |  検索セントラル

そのため、画像サイズにはこれといった決まりはないものの、今後は構造化データが主流になっていくことを考えると「アスペクト比が 16x9、4x3、1x1 」の画像を使用することをおすすめします。

もしデジカメで撮影する場合、設定画面でアスペクト比を選択する箇所があるはずですので、撮影する時点で上記の比率になるように設定しておくと便利です。

例えば、こちらはiPhoneですが、カメラを起動して上部に表示される「∧」をタップすると以下のようなアスペクト比を選択する箇所があります。

この状態でスマホを横にして撮影すると選択したアスペクト比で撮影できます。

おおむね、どのカメラでもアスペクト比は選択できますので、「16x9、4x3、1x1」のいずれかで撮影しておき、あとはその比率を保ったまま好みの大きさに縮小して掲載すればよいでしょう。

サイト上で縮小して表示する場合、imgタグで「px」を設定するだけ縮小されます。
<img src=は画像を表示するhtmlタグ

例えば、「480 × 270」の画像を半分のサイズに縮小して掲載する場合、imgタグに2分の1の「width="240" height="135"」などと指定しておけば、縦横比を保ったまま画質が歪むことなく表示されます。

ただし、比率を変えてしまうと画像が歪んでしまうので注意しましょう。

CSSで縮小する場合

CSSで縮小する場合、あらかじめimgタグにclass属性を埋め込んでおき、CSSにwidthとheightを指定することでも縮小することができます。

例えば、上の画像の場合、imgタグにexampleなどのクラス属性を埋め込んでおきます。

<img src="/image/iphone-aspect.jpg" width="480" height="270" class="example">

また、cssには以下のように記述します。

.example {width:240px;height:135px;}

すると、このように半分に縮小して表示されます。

これを応用して、スマホで閲覧した時にだけ縮小させる場合、レスポンシブウェブデザインで以下のように指定すれば、PCでは「480 × 270」、モバイル端末では「240 × 135px」で小さく表示されます。

@media screen and (max-width:480px) {
.example {width:240px;height:135px;}
}

ただし、一般的にはmax-width:100%;を使って、モバイル端末に画像を最適化することをおすすめします。

上記の場合、元の画像自体は高解像度のままで編集せず、imgタグやCSSで「表示のみ」を変更しているため、画質がよくなるメリットがあります。一方、画像の容量については大きいままの状態のため、データ転送量が大きくなってしまうデメリットもあります。

ペイントで画像サイズを縮小する方法

画像容量を削減するため、実際の画像サイズを縮小したい場合、Windowsでは付属ツールの「ペイント」で縦横比を維持したまま縮小することができます。

サイズを縮小することで画像の容量も小さくなります。

あるいは、画像全体ではなく、特定の範囲を決まったサイズにトリミングして縮小したい場合、あらかじめ「ペイント」にて大雑把にトリミングして縮小しておきます。その状態でWindows付属の「ペイント3D」を使い、正確なサイズを指定して切り取ることができます。

例えば、以下のような「800 × 400」のホームページのキャプ画があったとして、赤丸で囲んだあたりを「320 × 200」の大きさに正確に切り取りたいとします。

この場合、あらかじめペイントの「選択」で切り取りたい箇所を大雑把にトリミングしたのち、widthを「322」などの少し大きめのサイズを指定して縮小しておきます。

ここで一旦保存したのち、次に画像を右クリックして「プログラムから開く」→「ペイント3D」→「トリミング」を選択します。

この状態で切り取りたい正確なサイズを直接入力してトリミングを実行すればよいでしょう。

実際にホームページに掲載する際は、これらの画像を圧縮したのち、容量を削減してから掲載することをおすすめします。

サイト掲載に最適な画像サイズを比較

画像サイズを「縦長」にした場合は縦に長くなってしまい、スクロールする手間が発生してくるため、できるだけアスペクト比が「16x9」や「4x3」の「横長」の画像がおすすめです。

また、以下の点も考慮にいれて自サイトに合った画像サイズを選択されるとよいでしょう。

  • サイトのコンテンツ幅の範囲内(※おおむね600px~800px以内)
  • OGP画像の最小サイズ以上(※Facebookは200 x 200ピクセル以上)
  • スマートフォンのデバイス幅以上(※320pxや375px、あるいは414px以上)
  • 「記事」構造化データの推奨サイズ以上(※1200px以上)

当サイトではサイズがバラバラですが、主に「480 × 270」や「640 × 360」あたりを使用することが多いです。

アスペクト比「16x9」の候補

以下は単純にアスペクト比「16:9」で端数のでない数字を拾ったものです。

また、heightが奇数の場合も2分の1に縮小する際に割り切れないため、以下の数字が候補になるかと思います。

width:320px、height:180px
width:480px、height:270px
width:640px、height:360px
width:800px、height:450px
width:960px、height:540px
width:1120px、height:630px
width:1280px、height:720px

当サイトのコンテンツ幅は660pxなので「width:640px、height:360px」あたりのサイズは少し大きめと感じています。加えて、FacebookのOGP画像では「許容される画像の最小サイズは200 x 200ピクセルです。」とあります。

そのほか、一般的なスマホのデバイス幅は320pxや375px、あるいは414px程度となっているため、それ以上のサイズで考えると、最終的には「width:480px、height:270px」あたりが無難な選択になるかもしれません。

アスペクト比「4x3」の候補

同様に、以下はアスペクト比「4:3」で端数のでない数字を拾ったものです。

width:320px、height:240px
width:360px、height:270px
width:400px、height:300px
width:440px、height:330px
width:480px、height:360px
width:520px、height:390px
width:560px、height:420px
width:600px、height:450px
width:640px、height:480px
width:680px、height:510px
width:720px、height:540px
width:760px、height:570px
width:800px、height:600px
width:840px、height:630px
width:880px、height:660px
width:920px、height:690px
width:960px、height:720px
width:1000px、height:750px
width:1040px、height:780px
width:1080px、height:810px
width:1120px、height:840px
width:1160px、height:870px
width:1200px、height:900px
width:1240px、height:930px
width:1280px、height:960px

「width幅」を揃えて統一した方が良いと思いますので、当サイトでは「width:480px、height:270px」と「width:480px、height:360px」あたりを好んで使っています。そのほか、「記事」構造化データの画像については「width:1200px、height:900px」あたりを指定しています。

また、スクエアの「1:1」については縦長になってしまうため、当サイトではほとんど使うことはありません。

できるだけスクロールしなくても済むよう、縦長よりも横長の画像サイズを選択されるとよいでしょう。