画像の扱い｜比率・トリミング・容量

画像の問題は「伸びる」「切れる」「重い」の3つに集約されます。いずれも、画像そのものではなく置き方の設定で起きています。順に見ていきます。

伸びる・切れるの正体

画像を入れる枠と、画像自体の縦横比が違うときに起きます。枠に合わせて引き伸ばすか、比率を保って一部を切るか——どちらの挙動を選ぶかの設定があります。

切れる位置を決める

「埋める」を選ぶと、はみ出した部分が切られます。切る位置を指定しないと、人物の顔が切れることがあります。写真は、切れてほしくない部分を中心に寄せる設定を確認してください。とくに横長の枠に縦長の写真を入れる場面で起きがちです。

容量と表示速度

画像は、サイト全体の重さのほとんどを占めます。撮ったままの写真をそのまま入れると、表示が目に見えて遅くなります。目安は次のとおりです。

次は装飾（色・角丸・影・ホバー）です。