What width to choose for images meant for full width slider images in a responsive site?

HTML & CSS
1

Hi guys

Wondering if those who have done it can give a small tip here. I am working on a responsive website which will contain a full width slider. What width should the images be, given that we are having more and more screens having resolutions going towards 2000 pixels ?

Thanks for any help.

2 
img {
    width: 100%;
}

This property makes images width same as outer parent. And of course it’s responsive to all screens.

Note: Images parent’s width must be 100% also to make it responsive. If parent of img is “body”, then no problem. But be sure if image’s parent any other element (like div), parent’s width must be 100% (as divs default).

3

Hi,

That’s a difficult question to answer because it depends on what quality you want the images to be.

Usually you want the lowest filesize that looks reasonably good across the whole range. Generally images that are natively created with a larger width and height will scale down in the browser better than trying to scale up a small image. If you are also clever at optimizing you can reduce the quality of the larger image anyway.

Indeed this is what some people advocate to get over the retina issue.

Therefore if you want an mage to look brilliant at 2000px then you have to create it at 2000px width and then scale smaller. However if you only want it to look ok at the larger screens then make it smaller. There is always a trade off and its not an exact science. Remember in the end users generally would prefer a quicker site than looks good one that takes ages to load but looks perfect.

This also assumes that you have a responsive slider and our doing something sensible for mobile devices rather than serving the very large filesize images.

If on the other hand you were talking about how to handle the image in the page as dogagenc suggest above:

Then usually you would set the img to width:100% but you must also set height to auto or you will lose the aspect ratio of the image.

Generally though most responsive sliders will handle this aspect for you in some way. bxslider is a nice little responsive slider that is relatively simple to implement.

4

You’re the best! :thumbsup:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.