Blogger | 画像の大きさを最適化
画像の大きさ
「小」「中」「大」「特大」は相対的なサイズではなく、決まった幅になります。
自分の環境では、横幅（width)が「小」で200px、「中」で320px、「大」で400px、「特大」で640pxになります。
高さ(height)は横幅に合わせて自動で決まるようです。
サイズ毎の違い
それぞれのサイズ毎（キャプション付けました）による違いを見るために、同じ画像をサイズを変えて貼ったので、見比べてみてください。
ちなみに写真は家族旅行で、青森県の奥入瀬渓流に行ったときに撮ったものです。
 |
| 小 （148 x 200） |
|
| 中 （238 x 320） |
|
| 大 （296 x 400） |
|
| 特大 （474 x 640） |
|
| 元のサイズ （1108 x 1478） |
「元のサイズ」は使用しない（レスポンシブ非対応のテーマを利用している場合）
PCから見る分には問題ないと思うんですが、スマホからページを見た際に問題が生じるようです。
「元のサイズ」の画像は、端末の横幅に合わせてリサイズ（サイズ変更）されないのです。なので、画面から画像だけはみ出てしまうといった、見栄えの良くない状態になってしまいます。
画像サイズ「小」、「中」、「大」、「特大」の画像はきちんとスマホ向けに自動でリサイズされます。
※レスポンシブ対応のテーマの場合は、この問題は生じないようです。
※レスポンシブデザインに関しては、コチラ
画像サイズ「小」、「中」、「大」、「特大」の画像はきちんとスマホ向けに自動でリサイズされます。
※レスポンシブ対応のテーマの場合は、この問題は生じないようです。
※レスポンシブデザインに関しては、コチラ
画像の大きさを最適化する例
画面左上の「作成」のすぐ横に「HTML」という箇所があります。ここをクリックすると、投稿の内容がHTMLで編集できるようになりますので、そこで画像について書かれている部分をみつけ、以下のコードを追記すれば、画像の最適化（横幅の最大値の設定）ができます。
max-width: 100%;
height: auto;
そのため、画像が親要素よりも大きくなることはなく、スマホや小さい画面の場合でも、画面内に収めることができます。
ただし、「max-width:100%;」だけだと、横幅のwidth幅だけが縮小されてしまい、高さが調整されずに画像が歪んでしまうため、「height:auto;」も一緒に追記する必要があります。
max-width: 100%;
height: auto;
max-width:100%;は親要素より大きい場合のみ縮小される
この「max-width:100%;」は、「画像の大きさの最大値」が「親要素のwidth幅の100%の値」という意味になります。そのため、画像が親要素よりも大きくなることはなく、スマホや小さい画面の場合でも、画面内に収めることができます。
ただし、「max-width:100%;」だけだと、横幅のwidth幅だけが縮小されてしまい、高さが調整されずに画像が歪んでしまうため、「height:auto;」も一緒に追記する必要があります。
なお、この「max-width」はあくまで最大値の意味ですので、もともと画像がスマホ画面に収まるサイズ（例えば100px程度の大きさ）の場合は拡大されず、そのサイズで表示されます。1000pxなどのはみ出る大きさの場合にのみ、縮小されて表示されます。
