I was just going over the book HTML&CSS design and build websites by Jon Duckett, I'm currently on the Measuring Images and Resolution section, and had a question on the part that says
"On a screen, an image is that is 300x300pixels at 72ppi looks exactly the same as an image that is 300x300 pixels at 500ppi."
Why is this? (let's say for this case, the screen resolution is same for both 1680x1050px) I've been trying to figure out why, but having trouble understanding why it would look the same. There must be something that's working to make it look the same right?
For example,
what happens when you set an image with a fixed size of 300x300px, but the image ppi is greater than screen ppi, or when an image ppi is less than a screen ppi? Does the image somehow get reduced/added pixels?
Hope my question makes sense!
If screen size is 13"x8.125" resolution is 1680x1050px then the ppi for the screen is about 129ppi.
and if the 300x300px image is 72 ppi, then 72 is much less than 129, what fills these 57pixels that the image does not provide?
And for the 500ppi image, it would be too much?
Related
I have got an img element in my HTML document, and its width is about 100px.
The outputs when I set the source to images of different widths that I change every time:
17000 px:
2000 px:
500 px:
100 px:
As you can see, the quality of the image reduces even though the img element's width is at a constant 100px. Is there any reason behind this? If so, what are the practises to be followed to ensure the quality isn't bad?
Are you taking these as screenshots? I'm thinking that the image looks less clear because you have a low resolution when you display them. As in, the area you are showing the image in on your monitor is of a lower resolution than the image itself. So, by making the area displayed larger your monitor can more accurately display the image.
Think of it like this: Displaying a 4K wallpaper on a 720p display won't look as good because the monitor has to scale it down.
Slightly related reading to browser image resizing: https://petapixel.com/2009/11/12/why-you-should-never-let-browsers-resize-your-photos/
We're currently using apache fop to render a bunch of images in PDF format, but we've notice that the quality of just about any image is complete garbage and anything with text in it is incredibly unreadable.
I have looked through the documentation about source and target resolutions here.
And I thought that maybe I could force fit some good image quality in by assuming a default (source) resolution of 72 pixels per inch for all bitmaps/pngs/etc and desiring a target resolution of 300 pixels per inch. I figured this would theoretically cause FOP to cram way more image into a smaller space netting me an increase in quality with less of a need to smash my images into such a small space. Also I did the math and before where things were 72 72 it seemed like we were getting 5 * 72 = 375 pixel Nokia phone screen resolutions so I was like no wonder they are terrible quality.
Well, it seems like even with a target PPI of 300 instead of netting me a generous space of about 1500 pixels, I'm still getting the same crappy Nokia phone quality. I tried many combinations of source and target PPI 300/300 72/300 and 300/72 respectively, but nothing seems to cause any form or resampling or better image output. In the end I'm always left with this.
This is an actual screenshot of my PDF at almost full screen size. It may be worth noting that we are using the org.apache.commons.codec.binary.Base64 encoder to take images from memory and turn them into strings to embed into PDF. I don't know what kind of compression if any is being done through this encoder, but I hope to dump a string to the filesystem soon to take a look and make sure that isn't the issue.
In the meantime, does anyone know what PPI settings I might have messed up or what better options I may have to render clear cleaner images out to PDF with FOP?
After reading posts on this site and others, I am uncertain what pixel width I should make for a background cover image. For retina devices it is recommended to create a background image x2 the size if for a non-retina device.
I want to create a background image that will cover the entire screen but this would make a retina device image 2560 x 1760 and non-retina 1920 x 1200 if accommodating large monitors.
Is this too big?
I can't keep the jpeg image file size down to 276KB and that is with the most compression I can apply without destroying the image quality
Well your question is very interesting. To address your comment about what pixel width you should design your background image for. The size of a screen for a laptop, or desktop can vary. So you'll never exactly be able to make a single "universal" image for all backgrounds. Generally diagonal display in inches decides the amount of pixels. My screen is quite large, roughly the biggest size commercially purchased by public. Which is of course 1600 x 900 pixel, 17.3" diagonal display. I wouldn't recommend designing images for any display larger because those displays are custom and more for people who do things like graphic design themselves. Visit http://nodejs.org/logos/ If you scroll down to the computer display, you can see a list of pixel ratios that nodejs designs its logos for. These are very mainstream and popular display sizes. I would recommend you do the same and use those. Hope this answer helped.
Edit: nodejs builds for quality up to 2560 x 1440. If the size of the files doesn't matter. You should easily be able to build for sizes this large. Hope this helped.
I want to submit some images to IEEE journals. there stand is image should be in at least 300dpi. I originally created my image using screenshot. its original size was 392*143 (pxels) and resolution was 96*96 (dpi).
then i used GiMP and go Image > scale image > X and Y resolution to (300)
then i export it.
yes, in the property of the image it shows now resolution as 300*300 dpi.
when i open the image, I can not see that it has high resolution quality that my original. because still to the computer screen my original image look good.
Did I do something wrong? should I change the size when changing the resolution, but i feel if i give a larger size than original size then the new image might verse.
can anyone tell me, how can i get a quality high resolution image (at least 300 dpi) using low quality image. thanks
hope this question is ok on stackoverflow. I want to use a photo as the background for the homepage of a website. The photo will be take up the entire page. However i don't know what resolution i should make the photo. I was thinking 1920 x 1200px so that people with 24 inch screen don't see the 'ends' of the photo. However is that big enough? I'm worried about the site looking ok on screens larger than 24 inches.
Also anyone know how i should optimize the photo so it loads as fast as possible? Thanks.
Overall, this seems to be a question of trade-offs. The better the resolution, the slower the page load for a do-nothing page. Is it worth the slow-down to have the better resolution and avoid pixellation?
Also, I think you're asking the wrong question, since a 24-inch screen can be in multiple resolutions.
I would approach this in the following manner:
what is the largest resolution you MUST have your photo look "good" on? Then make your photo that resolution. If 24" is your target, look at what resolutions this size monitor "typically" supports and target that.
What number of colors you want? (or perhaps b&w / grayscale). If you reduce the number of colors (preferably to "web-safe" colors), you can load faster with the same resolution.
A program like Photoshop (or Gimp) will probably give you the most power in tuning these parameters.
Do you care if only a portion of the photo displays when your viewer has a smaller window?
I know this isn't a cut and dried answer, but these things seldom are (IMHO).
For a solution that will work on most modern browsers, you will need to place the image in a div with a z-index less than the rest of your page (see: Stretch and scale CSS background)
As far as creating a 1920x1200 photo that will compress to a small size, I would recommend trying a smaller size (e.g. 960x600) and see if it looks okay on your 24-inch screen. There are many programs that will let you specify file size for your compression (e.g. FastStone Resizer) so you can experiment and see what is acceptable. In general, photos with less detail and/or color-depth will compress better.
Another problem you are going to run into is aspect ratio. Even assuming that your web-site is always opened in a full screen browser and not a window, sometimes that screen is going to be 16:9 ratio and sometimes 4:3. You could try to create an photo that has a nice 4:3 ratio "sweet-spot" in the center and adjust your div using some Javascript based on the current window aspect-ratio.