What size of image or images do I need for Responsive web?

Question

I am trying to make our website responsive. I am wondering if I have images that take up the entire screen, minus a header for navigation, what size of images do I need to work on every type of device? Do I need just one? Or do I need 1024x768, 800x600, etc....?

Example: www.Squareup.com

Answer 1

It depends on how good you want your pictures to look vs how fast your website loads. Usually in RWD you use percentages to scale your image to fill a container anyway, so the size doesn't necessarily matter.

Depending on how you scale it any size could theoretically "fit". On the other hamd if you don't use percentages for widths then you 1) probably are not practicing rwd 2) can specify as specific width for your container anyway so that your image fills it whatever way, so again any size works. Also, any size could not "fit" a container if you specify a specific maxwidth for an image but make your container responsive.

However I suggest Minimum 800x600 nowadays for a background. Maybe target surround 1024x768 as user resolutions are usually greater than that nowadays. And yeah you can have "just one" as long as you think it still looks good on screens with higher res. I also suggest repeated texture patterns vs photographic backgrounds, they're great.

Answer 2

I'm not sure I understand your question but you can set max-width: 100% on your images and they will look great at a different resolution