Kevin Powell - Community•3mo ago

What image sizes would you choose for a responsive hero image?

Are there any rules or conventions to follow? I am considering using 2560w and 1920w for full HD and QHD screens, but what about sizes below these resolutions? Which sizes should I choose for smaller screens?"

<img
...
srcset="
hero-2560 2560w, 
hero-1920 1920w, 
hero-1400 1400w, 
hero-900 900w
src="hero.webp"
..
>

<img
...
srcset="
hero-2560 2560w, 
hero-1920 1920w, 
hero-1400 1400w, 
hero-900 900w
src="hero.webp"
..
>

2 Replies

ἔρως•3mo ago

worry more about file size than resolutions usually, hero backgrounds have absolutely no information at all, so, just blurrying the image will probably be just fine-ish

Smix•3mo ago

depends,. its always a good idea to choose one ratio and thus you will have sizes accordingly.

Gaming

Programming

What image sizes would you choose for a responsive hero image?