When working for mobile, you need to consider the pixel ratio, so instead of 1=1 (something like 'one physical pixel per pixel space'), you have 2=1 (2 pixels in 'the space of 1 pixel'). Please correct me if I'm wrong, I always assumed this but I've never worked with such high quality images. Well, as long as they have the same size of their container. At this resolution images will render nicely, as long as they are of good quality, and should not appear pixelated or distorted. The web standard for (non-mobile) images was 72 pixels per inch (according to comments there is non, or if it is it should be 96). ( One wonders what they were smoking when they decided to specify pixels as flexible, since the viewport and display resolutions are also flexible. Your list is a list of min-widths, so your image sizes should be sized based upon the overall size of your site, less margins.
Sometimes this is not acceptable: scaling can blur items especially non-vector type and you will need to work with two versions of the same image, however most of the time there will be no problem.Īs far as EXACTLY how big your images should be, this is not an answer that can be given. The other way is to work with 2x the pix dimensions, and export a half-size set with a special naming convention such as Yisela suggested. This means you are wasting bandwidth for non-PR2 users, but you only maintain one set of images.
make all your images 2x the pixel dimensions that you need) and specify the sizes in css/html. The easiest thing to do is to craft everything for PR2 (i.e. This is so that the pr2 device won't need to stretch the 100px image to fit the same visual space.
The short of it all is that if you envision an image being a certain size for your viewport (say 100px wide), then for a pixel ratio 2 device, you need to provide a copy that is 200px wide. Basically, this means that for the same "visual space" in a pixel ratio 2 device, an image made for 'normal' use needs to be stretched to fit, and stretching tends to look horrible.
#BEST RESOLUTION FOR PHOTOS ON WEBSITE SOFTWARE#
The width and height are also specified as flags: the software reads the bytes as one long chain of numbers, and merely chooses the position of a pixel as it renders, based upon counting and the width/height flags.Īt some point, someone decided to specify the ipod screen as a fixed size and the pixel (a discrete number) needed to became flexible somehow. I don't have solid information on this so I am not sure this qualifies as an answer, but min-device-pixel-ratio appears to be a "flag", like dpi BUT it does not get stored with the image, it is a capability flag of hardware.Īn image gets stored by breaking up the image into a grid, where each grid cell is called a pixel (and each pixel is a number represented as a byte).
0 kommentar(er)
