Menu
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.
755
2400x1600px, jpeg, saved for web, and optimized To ensure that your full width images look good across any device big or small the recommended size is 2400x1600px. Note that devices have different ratio than the one you shoot and it is possible your images will be cropped when viewed on web.
For full-width slideshows (that automatically stretch to the full size of the browser), I recommend going for 2560 pixels in width, which is the standard resolution width for 27″ and 30″ monitors.
It's important to use the proper image sizes to keep page load times low, ensure the images are clear, and that they look great on mobile devices. Ideal image dimensions 1900px wide by 1005px tall (visible on devices greater than 767px wide).
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
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).
159
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
