3 replies

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"
..
>

<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"
..
>

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

Similar Threads

Similar Threads

Similar Threads