Hi guys
We have seen full width images in responsive websites that gets adjusted to various screen sizes. Can anyone tell which size we should have for such images, and any other trick for other images etc ?
Thanks for any input 
Hi,
If you are talking about full page background images then depending on the image you would need to create quite a large image to start with so that it can be resized smaller without losing quality. If you create a small sized image and try to scale larger the image quality will suffer.
The size of the image will depend on the image and the quality you require. A lot of sites will use a 1600px wide image to start with so that it doesn’t very often have to scale larger but will scale smaller reasonably well. You have to be careful though that you optimize carefully and ensure that the full size is not too large (if ts a full page image and its over 200k then that’s much too large unless you are creating a photographic type site where images are important content).
Also remember hat mobiles may need to consume this content so a large file size is going to hurt some smaller devices and you would probably need a mobile first approach and give smaller devices a smaller image (both in file size and image size) and then use media queries to download the higher quality image for desktops.
To make the background image scale you just need to use ‘background-size:cover’ in the css for that image which will ensure the image always fills the background of the required element.
If you are talking about a banner image or an image in the foreground then you would need to set the images width to 100% in the css and its height to auto to allow it to maintain its aspect ratio while it scales.
1 Like
Many thanks Paul. This clarifies perfectly.
I was having a related question. I have seen photographic sites using full width background images doing slideshow, and which loads very fast.
Is there anything new in the WWW apart from header preloading and caching ?
In the end resources have to load and if you preload a load of images then you effectively slow the site down initially because those images have to load first so that they will all be ready when you want to view them.
You probably instead want to ‘lazy load’ some resources so that the initial page loads and then while the visitor is viewing the page image can be fetched in the background.
It’s really six of one and half a dozen of the other and of course will vary depending on usage.
Hmm … thanks a lot Paul. Will have a look at this lazy load thing.
A whole lot of work has been going on in the area of responsive images, and there’s even a new <picture> element in HTML5, although it’s more likely that you’ll just want to use the new srcset attribute on images to serve up multiple versions for various devices. Here’s a rundown of how it all works:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.