and i want to make its width and height same as A4 Page
can ay one tell me whats the size?
note : not neccessary to be the exact width and height !!
It depends on the resolution:
72 dpi (web) = 595 X 842 pixels
300 dpi (print) = 2480 X 3508 pixels
600 dpi (print) = 4960 X 7016 pixels
As can be seen here (wikipedia) you will need to make it 210mm × 297mm.
Converting millimeters and centimeters to pixels (and the other way around) depends on the DPI of the screen you are using - it is not a constant.
See this SO question and answers.
My local photo lab told me A4 dimensions are 21x29.7cm and 8.3 x 11.7 inches.
But, and this is just FYI, when it comes out of their machine you do lose a couple of millimeters from each edge, so most important is to make sure you have configured the output from within your postprocess software (i.e LightRoom or PhotoShop etc) otherwise the composition will be screwed.
Related
I'd like to make a stage size with A4(300dpi).
2480 x 3508 px
If then I cannot see the proper size in flash player.
So I'm planning to make a reduction of stage like "248 x 350" / 90% contraction view.
How can I implement this job?
If I understand the question correctly
You can create a 248 by 350 swf stage and use scaleX and scaleY properties of your A4 content (which can have actual size of 2480 by 3508) to zoom in/out.
Here is a small demo
What is the correct way to resize srcset images? For example say I have an image that is 2000 x 1337. I resize it to 255 x 170. For 2x srcset should it be:
510 x 340 (based on current image)
510 x 339 (based on original image)
Edit
To clarify I want to know how srcset works. For example if I use the 510 x 339 image (technically more correct dimensions based on the original) for 2x will the browser "create" a 510 x 340 container (current dimensions x 2) and then resize the 510 x 339 image to fit inside it?
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
With srcset, the browser does the work of figuring out which image is best
In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best.
Mat Marquis demonstrated this by showing how the browser approaches it with math. Say you're on a device with a screen width of 320px and is a 1x (non-retina) display. and the images you have are small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide).
The browser goes:
Lemme do some quick math that nobody cares about except me.
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
OK, so since I'm a 1x display, 1.5625 is the closest to what I need. It's a little high, but it's the best option compared to those other that are way too high.
Now another browser visits the site. It's also a 320px display but it's a retina (2x) display. That browser does the same math, only then goes:
OK, so since I'm a 2x display, I'm going to throw out that 1.5625 image because it's too low for me and might look bad. I'm going to use the 3.125 image.
See how that's already useful? You're letting the browser do the work of figuring out what's best for it rather than you trying to figure it out
To what you asked specifically that change in one or two pixel does
not matter .What you should be looking at is basically for higher
pixel density the large image will be loaded
and for 2X just use double the width 100% percent precision is not
required
and for getting the width you want you can use the w descriptor:
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">
The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute. Let’s again learn through a couple of examples:
Example 1
Say you want the image to be viewed in half of the viewport width. You’ll type:
<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">
The browser will now decide which image to download based on the browser width and the device pixel ratio. For example:
If the browser width is 500 CSS pixels, the image will be displayed 250px wide (because of 50vw). Now, this is equivalent to specifying:
srcset="images/space-needle.jpg 0.8x, images/space-needle-2x.jpg 1.6x,
images/space-needle-hd.jpg 2.4x"
So, for a 1.5x display, images/space-needle-2x.jpg will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x (which is most suitable for a 1.5x display).
EDIT 1:-
And what you are actually looking for is rather than srcset.You dont want your images to be blurred in resize or what you call responsive images should maintain its orginal quality and do not blurr.
I have added the Q&A from SO regardiing the same issue here
which explains the use image-rendering css property
EDIT 2:-
img{
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
The issue regarding image rendering on scaling can be addressed using the image rendering css proprety upto and extant try it out on the scaled image .Documentation is given below.
On the question whether browser will change the size of image by adjusting the image to fit to the container size answer is ie changing from 539 to 540 :-
NO it wont srcset depending upon the constraints used only takes the best picture suited for that display wrt pixel density or screen size which ever may be the given contraint.Rest depends upon the css .
Simple example without srcset
https://jsfiddle.net/f03hwb7p/1/
https://drafts.csswg.org/css-images-3/#the-image-rendering
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Image downscaling with CSS … Images are blurry in several Browsers
http://heygrady.com/blog/2012/05/25/responsive-images-without-javascript/
External Reference 1
External Reference 2
Orginal Article from where this paragraph was taken
W3c examples adn explanation
The correct way is option 1: 510 x 340 (based on current image)
If you use 510 x 339 (based on original image) the browser will just stretch it until it fits inside the 2x box.
The image you use must have dimensions divisible by 2 (for 2x) or 3 (for 3x) otherwise the browser will resize it even if you don't have a width or height set.
Test 1 - 600x300 (3x) image inside 200x200 img container on Chrome, Nexus 5
<img src='200x200.png' srcset='600x300.png 3x' width="200" height="200">
This image originally contains a circle, as you can see the browser stretches the image to fill the 200 x 200 container.
Test 2 - 600x600 (3x) vs 600x599 (3x) image inside 200x200 img container on Chrome, Nexus 5
<img src='200x200.png' srcset='600x600.png 3x' width="200" height="200">
<img src='200x200.png' srcset='600x599.png 3x' width="200" height="200">
Checking just in case the browser has some smarts to leave images that are 1px different alone (because it is possible that these images would be the "correct" dimensions). Doesn't seem to.
If your image container is fixed to 255 x 170, do the math for
(2x = *2) = (CurrentImageSize * 2 = x)
Ratio is calculating lowest to high (Ascending)
e.g.
iPhone: 57 x 57 (1x)
Retina iPhone: 114 x 114 (2x)
iPad: 72 x 72 (3x)
Retina iPad: 144 x 144 (4x)
Technically: if (1x = 57) then (2x = 114)
Demo Example: https://webkit.org/demos/srcset/
I have a simple 20 x 20 tile world (TiledMap) that I want to display using an OrthogonalTiledMapRenderer. However, I'd like to show as much of the world as the screen will allow. This means if the screen is bigger, more of the world is shown and if the screen is smaller, less of the world is shown. Is this even possible?
The physical size of my tiles are 16 pixels x 16 pixels. So I thought that creating a 16 * 20 x 16 * 20 (320 x 320 unit?) FillViewport would do the trick, but that will always show the entire world on the screen (zooming in or out depending on screen size). Instead I want zoom to stay at 1 and cut off the world that is too wide or tall for the screen. How can I achieve this effect?
Update
I tried using a ScreenViewport, but it ends up looking like this: .
I've tried setting up my camera's position like so: camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); in my create method, but the camera's position is always 0, 0, 0.
Here is the source code I am using so far.
I want to decrease an 480 X 480 bitmap image size to 30 X 30 pixel size but keeping the whole height and width intact. (I do not want to scale or use height/width property! )
So if i divide 480/16 = 30. So i need to take average pixel values of 30 pixel elements and put it into new image.
How to take the average in actionscript 3.0? I looked at getpixels() method, is their any simple way/methods to achieve this?
Let me put in more simple way - I am trying to reduce pixels in an bitmap image from 480 X 480 to 30 X 30, the height and width remain same and i expect some amount of distortion after converting image to 30 X 30.
I did scaling but it reduces width and height, if i again increase width and height it just regains normal pixels. Thanks!
Why don't you simply then make a copy of the whole image in code, but use the simple scaling to scale the copy, and only present that to the user. Also look at this from Stack Overflow
How to resize dynamically loaded image into flash (as3)
I want to create a template . If the user monitor at least is 14 inches , It has a ppi for itself maybe 102 or something else.
So What ppi should I set for my web template to avoid the screen horizontal scrolling ? Is it the maximum ppi of the 14 inches monitor ?
ppi/dpi (dots per inch) doesn't work here: Different 14 inch monitors can have different resolutions - the number of pixels displayed on the screen.
For your purposes, the only thing you need to worry about is the user's resolution.
The size of a pixel can differ depending on the device's size, but it doesn't matter for layouting.
If you want to avoid scroll bars, either choose a very low pixel width (960 pixels is deemed ideal by many, because layouts with that width are guaranteed to work on a 1024 x 768 resolution) or use relative widths instead of pixel sizes.
Related:
Smashing Magazine: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?