What is the recommended size (pixel dimensions and / or file size) for full screen (desktop) background images considering that some monitors like the iMac are 5K.
I'm thinking in broad terms and more for load time considerations.
Should I detect viewport and load different sized images for different viewports?
Related
I have a web page with a row 1200px wide with some 3/4 columns, each one holding an image, that is each image may be 300/400 px wide. On collapse, below the breakpoint (768), images appear blurred because they are scaled to 768px in width.
I wanted to keep things as small as possible, however I think I'll have to use larger images, shrinking them with media queries on large desktop view and 1:1 (almost) on tablets.
Any thought?
You can upload the images to 768px if that is the biggest they get. If you have a lot of images and worry about download time for slow connections or bandwidth from server, consider only load images depending on resolution.
You can read more here:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
You can also google responsive images and see what would fit you best, or build your own solution if you are into that :)
I'm building a page which is supposed to be full retina ready. I'm creating a retina version of all the small-medium images.
It looks good when you look at the 100x100 pixel version of a 50x50 image on devices with high density screens. But what if the image is much larger? Like a background image of a slider with 1700x600 pixel dimensions, should this get a retina version as well? The image's size is already much bigger than almost every mobile device's resolution. Would a 1700x600 or a 3400x1200 image look different on a 640x960 display?
Don't forget about retina enabled laptops, and iPads... In my experience most images you can save at a scale of about 150% the expected viewing size, and they still look great on a high density screen. You should play with compression quality as well, a lot of times you can lower the quality and still have an image that looks great because of the shear amount of extra pixels.
See this for an example of what I'm talking about: http://filamentgroup.com/lab/rwd_img_compression/
Considering a css pixel is not a device pixel on high DPI device, predict and manage touch target size across these devices have been a headache for me.
For example, say I have a Web App with viewport meta "width=device-width, initial-scale=1.0", on iPad (9.7 inch screen) in landscape mode, viewport is set to 1024px, and 50px (in css) is roughly 1cm in physical size.
However for device such as Nexus 7 (7 inch screen), viewport would be set to 966px, thus 50px (in css) is only about 0.7cm in physical size. (Not to mention a growing list of High DPI device that I may not get my hands on)
Different guideline varies on recommeneded touch target size, but I tend to prefer around 1cm to allow for human error.
Is there a best practice for such scenario? the idea described in Let's Get Physical (Units) is the closest I found via google, but far from production ready.
Start using em or percentages instead of px.
This is probably going to be what pushes everyone over the line.
this is mentioned every article about mobile web, but nowhere I can found an explanation of what exactly does this attribute measure.
Can anyone please elaborate what does queries like this check?
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
Short answer
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.
Physical resolution: 960 x 640
Logical resolution: 480 x 320
The formula is:
Where:
is the physical linear resolution
and:
is the logical linear resolution
Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.
Discussion
The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of viewing angle, which is approximately of an inch at arm's length. Source: CSS Absolute Lengths
This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.
If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.
Example
#element { background-image: url('lores.png'); }
#media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
#media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.
A case for vector graphics
As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).
If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.
Device Pixel Ratio == CSS Pixel Ratio
In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.
A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:
For example:
Apple iPhone 6s
Actual Resolution: 750 x 1334
CSS Pixel Ratio: 2
Logical Resolution:
When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.
Some other examples:
Samsung Galaxy S4
Actual Resolution: 1080 x 1920
CSS Pixel Ratio: 3
Logical Resolution:
iPhone 5s
Actual Resolution: 640 x 1136
CSS Pixel Ratio: 2
Logical Resolution:
Why does the Device Pixel Ratio exist?
The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.
A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.
So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.
Here is a tool that also tells you your current device's pixel density:
http://bjango.com/articles/min-device-pixel-ratio/
Boris Smus's article High DPI Images for Variable Pixel Densities has a more accurate definition of device pixel ratio: the number of device pixels per CSS pixel is a good approximation, but not the whole story.
Note that you can get the DPR used by a device with window.devicePixelRatio.
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.
this is almost self-explaining. the number describes the ratio of how much "real" pixels (physical pixerls of the screen) are used to display one "virtual" pixel (size set in CSS).
Device Pixel Ratio has direct correlation with Pixel density of the device.
Best concise description I could find:
Purpose of DPR is to keep consistent size of CSS pixels and therefore
consistent size of letters, symbols, images and everything else on
screen, across a variety of devices with different physical pixel
densities.
Source: screenresolutiontest
If I set my screen resolution to 1024 * 768, does that mean my website can be 1024 pixels wide?
If so then why does an image 1024 pixels wide cut off the page?
http://stevenportfolio.servehttp.com
If your screen resolution is 1024x768, that means that your screen is 1024 pixels wide. The available space for a web page is probably a little less, since scroll bars and window borders take up some space.
The short answer is no. A screen resolution of 1024 x 768 means that your screen is displaying 1024 pixels horizontally and 768 pixels vertically. When you view your web page, though, you aren't always using 100% of those pixels. For example, the scroll bar in your browser takes up some of those pixels or if the browser is not maximized then you may only have half of the screen.
You should never design a website that relies on the screen being a particular resolution for several reasons:
Not all your users have the same screen resolution
Even if you try to find the resolution with JavaScript or some similar hack, it may or may not be reported correctly (plus your website shouldn't require JavaScript to work)
The browser window may or may not be maximized
Try to come up with a design that is flexible enough to scale for any standard screen size and remember to test your site frequently on different screen sizes, browsers, operating systems, and resolutions. (You can use browsershots.org if you don't have multiple computers handy.)