【見切れない】WEBサイトに最適なサイズの画像を設定する【ぼやけない】
お客様から、とある質問をいただきました。
「どんなサイズの画像を設定したらいい？」
私たちはその質問をもとに、
- どこに設定する画像か
- サイズとは縦横のピクセル数？画像の縦横比（アスペクト比）？それともファイル容量？
などを考えながら、WEBサイトを調べます。
というのも、WEBサイト（厳密には画像を表示する領域）ごとに、設定するべき画像サイズは違っているからです。
WEBサイトに最適な画像サイズを知る方法
ブラウザで検証ツールを開けば、その画像が何ピクセルの大きさで画面に表示されているのか、簡単に知ることができます。
検証ツールとは？
WEBブラウザに用意されているWEB開発者用のツールです。
WEBページで右クリックをしたときに、Edgeでは「開発者ツールで調査する」、Firefoxでは「調査」、Chromeでは「検証」という名前で表示されています。 ※Safariでも用意されていますが、利用には設定の変更が必要です。
下記のように画像を調べます。(動画はChromeです)
同じピクセル数の画像にすれば、縦横比も同じになって、見切れずにきれいに表示できそう！
画像がぼやける
ところが、近年のモニターは高解像度のため、そのままのピクセル数だと画像がぼやけてしまうことがあります。(Apple製品のRetinaディスプレイなど)
なので、私たちはデザインデータから画像を書き出すときに2倍の大きさで書き出しをします。
そうすると、ピクセル数が2倍 = 解像度が2倍になります。
しかし画像のピクセル数が大きくなると、当然ファイル容量も大きくなってしまいます。
WEBページが快適に表示できるのは、ページの容量が1.6MB未満と言われているため、ファイル容量が500KBの画像は5枚程度でWEBページの表示が重くなってしまいます。
【参考】Avoid enormous network payloads
必ずしも画像の解像度が高ければ良いわけではないので、注意が必要です。
これでやっときれいに画像が表示できそう！
画像が見切れる
ところが、ブラウザの画面幅が変わると、表示領域が変形して画像が見切れたり、ページからはみでたりすることがあります。
そんなときはWEBコーディングの知識が必要になります。
画像サイズをCSSで適切に設定する方法
一般的なWEBサイトやSNSは、どんな縦横比の画像でも、適切にトリミングされるように設定されています。
画像の表示方法を適切に変えるには、CSSの設定が必要な場合があります。
画像をトリミングさせない
img {
max-width: 100%;// 表示領域からはみ出ないようにする
height: auto;// 画像をトリミングしないようにする
}
画像をトリミングさせる
上記とは逆に、様々な縦横比の画像を適切にトリミングして同じ縦横比で表示するためには、現在2種類の方法があります。
padding-top
<div>
<img src="" alt="">
</div>
div {
position: relative;
}
div::before {
content: "";
padding-top: 56.25%;// 16:9で表示される
display: block;
}
img {
position: absolute;
inset :0;
}
aspect-ratio
昨年から利用できるようになった、比較的新しいCSSプロパティです。
※ブラウザのバージョンによっては適用されない場合があります。
“aspect-ratio" | Can I use… Support tables for HTML5, CSS3, etc
img {
width: 100%;
aspect-ratio: 16/9;// 16:9で表示される
}
こちらの方が短くてわかりやすいですね。
おしまい
弊社ではWEBサイトの作成だけでなく、SEO対策、Googleアナリティクスによるアクセス解析、解析結果を基にした広告運用など、WEBにまつわる様々なサービスを行っております。
そんな株式会社アルタがお届けするソリューションが気になる方は…