24

I am building a website which includes a full width slider; 100% of browser window. The CSS would be like this

.slider {
    width:100%;
}

... where the slider's parent is <body>, not some wrapper div.

My dilemma is that if I use an image of say 1600px width, and scale it to 100% using CSS then this will be fine for anyone who's maximised browser is (monitor width) is less than 1600px as the image will be scaled down not up ( leaving mobile/responsive size considerations out of the picture for the moment ) however someone using a maximised browser on a very large monitor will have that image scaled up not down and thus it will have a slightly degraded appearance.

I checked out a couple of sliders and they are using image widths of approx 2000px, but is there a width that would not need to be scaled up on a large percentage of monitors?

Please Note: I am not asking about CSS, a grid system, twitter Bootstrap, a responsive or adaptive site, a 960px width website or anything like that. Neither am I talking about a slider which is 100% of the website wrapper. I am simply asking about the pixel width of the image file used to create a slider which is scaled 100% of the browser width.

Jeroen
  • 1,168
  • 1
  • 12
  • 24
byronyasgur
  • 4,627
  • 13
  • 52
  • 96

6 Answers6

23

1920px is the highest you want to go. That is considered the "high-end" for screen resolution sizes, and anything higher will make the browsers act up. As long as you set your slide width to 100% it will adjust to screen sizes of a higher resolution than 1920 without a problem. This will also solve the problem of taking up too much bandwidth and won't affect your load time (which is key for functionality of your site).

Jeff
  • 745
  • 6
  • 24
  • Sorry looks like I didn't ask the question right - see my edit – byronyasgur Jun 25 '12 at 17:37
  • Thanks for your comprehensive answer but I'm don't understand why you're putting into columns at all ... all I need from a css point of view is .container { width:100% } where the container's parent is ... my question purely relates to the pixel width of the image used ... again sorry if I haven't made that clear. – byronyasgur Jun 25 '12 at 19:15
  • you generate columns so that your image will dynamically adjust to the screen size. You would set your slide to be 100% of the columns width. Hence if a screen is 960 px, your image will know to generate to the size of 16 columns or if the screen is 1060px it will know to generate based on 18 columns. "columns" doesn't actually represent physical grid that can be seen by a user on the screen, rather a grid that browser acts use a bridge for the language to base the size of the contents on a specific page per screen resolution. It's a responsive web development method – Jeff Jun 25 '12 at 19:21
  • And if you don't want to use that approach than 1920 should suffice. If you give it a width of 100% it will automatically adjust. The larger you go the more load time and bandwidth you use, which just becomes a waste of time and space. – Jeff Jun 25 '12 at 19:30
  • Yes I dont think I need a grid. 1920 is probably the answer I am looking for, but why 1920? – byronyasgur Jun 25 '12 at 19:43
  • That's generally considered the high end of screen sizes. Most browsers will start to 'fuzz' things when they get bigger than that/have a hard time rendering them in a reasonable amount of time. And like I said before, the large the images, the slower your site will render (especially for smaller screens like smartphones/tablets), and the more bandwidth you're using. – Jeff Jun 25 '12 at 19:44
  • Thanks ... yes that's the answer I was looking for. Having re-read and re-edited my question 4 times I still have no idea why everyone got so confused but in any case yours is the closest answer so if you want to edit your question to put that explanation in I will accept your answer. Yes ( as I explained in my latter edit I am not considering mobile in this scenario ... I will probably not be displaying the slider at all for mobile ) – byronyasgur Jun 25 '12 at 19:54
1

According to the global stats of screen resolutions of the year 2013, the display size of 1920x1080 is the fourth one among other top 10 popular current screen sizes. This one is also the last high definition display for the monitors so far.

Lightcoder
  • 259
  • 4
  • 14
1

I think its more of a persnal choice, depending upon your target audience. These stats might help you make an educated decision. http://www.w3schools.com/browsers/browsers_display.asp

H.Saraf
  • 31
  • 4
1

Catching up with ever-large resolution display devices in yr2019, I would recommend size of 2400x1600px, optimized jpeg or next-gen image format with fallback support for jpeg.

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

Sources:
https://flothemes.com/flothemes-image-sizes/
https://freshman.tech/image-optimisation/

You may even go many steps smarter and use CDN which supports image optimization & delivery of responsive images like (free tier available) https://cloudinary.com/ or https://www.cloudimage.io

GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
  • Do people think this should be the new selected answer for 2019 I'm a bit out of touch so I dont really know myself. If this gets some votes or comments I can change it. – byronyasgur Nov 13 '19 at 17:20
0

960px is the standard full width for any content area of a web page to HOPEFULLY not have any overflow in a full browser window.

http://960.gs/

MultiDev
  • 10,389
  • 24
  • 81
  • 148
  • Are you sure you understand my question? I am doing a 100% width slider - 100% of browser window. – byronyasgur Jun 25 '12 at 17:32
  • Well unless you do it dynamically, there is no way to know what 100% is in pixels, since everyone's resolution is different. – MultiDev Jun 25 '12 at 17:36
  • Yes, and by the way sorry I think my question didn't make "full width" quite clear. Yes I know it would have to be 100%, what I am asking is what is the best guideline as to where to start from, or in other words the most likely maximum width a user would have their agent maximised to; so as to avoid up scaling the image ... to ask it another way is there a physical monitor width that we generally consider to be "as wide as they typically get" – byronyasgur Jun 25 '12 at 17:38
-1

As already noticed above, the standard width is 960 pixels. But many sites are doing adaptive, so you can not say for sure. My monitor, for example, has a resolution of 2560x1440. No one makes such a large site resolution.

If you want to make an adaptive site as a monitor and a mobile device, I can only advise to use the twitter bootstrap or something similar. You can also use grid system, for example: designinfluences.

Xella
  • 1,283
  • 10
  • 10
  • I think your answer, like the others ( despite my best efforts) is confusing my question with the standard width of a website. Rather, I am asking about the largest typical screens that people develop for, not wrt responsive design but wrt the pixel width of the jpeg file used in a 100% of browser with slider ( when maximised on a large screen). It is helpful to not that _"My monitor, for example, has a resolution of 2560x1440. No **one makes such a large site resolution**."_ – byronyasgur Jun 25 '12 at 19:48
  • Read this, maybe it helps more: http://stackoverflow.com/questions/456250/recommended-website-resolution-width-and-height – Xella Jun 25 '12 at 20:02
  • No .. AFAICT this is not what I am asking about at all, that question sounds like a discussion about adjusting the css for monitor dims - look at the slider on this theme, it's a fairly common spectacle, in this case the images are scalled down from 2100px, meaning that the theme will break if anyone on a wider than 2100px monitor maximises http://demo.udfrance.com/voltage/wordpress/ – byronyasgur Jun 25 '12 at 20:13