web上で表示させる最適な画像サイズについて

Question

web上で画像を表示させる上で2点ほど気になることがあるため質問させてください。

■１点目
表示させる画像のサイズはどのようにして決めればいいのでしょうか？
あまりサイズが大きいと表示速度の遅延につながりますが、小さいと画質が荒くなってしまいちょうど良いサイズがわからない状況です。
ベストプラクティスがあればご教示いただきたいです。

■2点目
基本的にweb上で画像を表示させる際は、サーバーにある画像をhtml/cssで調整して表示すると思います。
サイズの大きな画像をサーバーに置いておくと表示速度の遅延につながる？ため、そのままweb上で表示するサイズの画像をサーバーに置いておき、html/cssで表示用に画像を縮小しなくても済むようにするのが理想なのでしょうか？

Comments

[archiver]

表示される「画像」は何を想定していますか？
（写真とかイラストとか）

[Jake5]

jpegやpngなどのビットマップデータを想定しております。

[miyabi_pudding]

サイズ、ですか？容量ではなくて？
表示の大きさは、速度にそこまで影響はしません。
画像の大きさが大きくなれば当然容量も大きくなるので、
読み込みに時間がかかるようになりやすいってだけで、
大きさが一緒でも、圧縮率を高くすれば、容量を抑えれ、結果表示速度は向上できますが・・・。

Answer 1

■１点目
私の場合ですが、基本的にその画像を最大何pxの幅または高さで表示するかで決めています。おっしゃる通り、大きいほど読み込みに時間がかかってしまうためです。
しかし画面いっぱいに表示させる場合はせいぜい横幅1300〜1500程度に抑えて解像度より速度を優先することもあります。
あと、いずれにしても使用する画像は必ずPhotoshopで最適化してからサーバに上げています。

■2点目
サムネイル用と拡大表示用の2点を用意することもありますが、場合によっては同じものを使用した方が一枚の読み込みで済むという利点もあるので、サイトでの使用の仕方にもよるかと思います。
同一画面で数多くの画像を表示させる場合は小さめのサイズを用意した方が断然早いですね。
ちなみにWordPressなどでは画像をアップロードした時点で自動的に3通りの大きさに加工されそれぞれが別名で保存されて、ページ作成の際用途にあった大きさのものが選択されるようです。

Comments

[Jake5]

使用用途によって変わるのですね。勉強になります????‍♂️
デバイスによって画像を出し分けることもできるんですね。画像や実装のメンテナンスを考えると若干大変そうですが…笑何を重視するかが大事なのかもしれないですね。
ご回答ありがとうございました！

Answer 2

■2点目

基本的にweb上で画像を表示させる際は、サーバーにある画像をhtml/cssで調整して表示すると思います。

自分は、開発中は画像の大きさが頻繁に変わるかもしれないのでCSSなどで調整しますが、本番環境では実際に表示するサイズにリサイズしたものをサーバーにアップロードします。これにより、画像のデータ量が減る、画像縮小の処理がなくなるなどのメリットがあります。
cerfwebさんも書かれていますが、サイト内での画像の使い方によっては使用するサイズごとに複数の画像をアップロードしておくことで、読み込みを軽くできます。スマホとパソコンで画像を分ける場合もあります。

Comments

[Jake5]

本番環境とテスト環境で使用する画像のサイズを変える方法もあるんですね。
ちなみに実際に表示する画像をそのまま使用する場合はwidth、heightは指定しない方がよいのでしょうか？
(実装する側からすると指定があった方が表示画像のサイズがわかっていい気もしますが、指定してしまうことによって余計なサイズ指定の処理が入ってしまうので若干速度に影響してしまうのでしょうか…)

[ex025]

転送量の削減が主な目的なので、widthやheightは指定してよいです。というか、指定した方が良いです。
imgタグにheight属性とwidth属性を記述しない場合、ページの読み込み中に画像の下にあるテキストなどが移動するレイアウトシフトが起こるのに対し、これらの属性を記述することによって事前に画像のスペースが確保されるため、描画にかかる時間が短くなります。
参考: https://parashuto.com/rriver/development/img-size-attributes-are-back

[Jake5]

そうなんですね。参考資料もご提示いただきありがとうございました????‍♂️
勉強になります！