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/
Related
AMP pages that have structured data need at least 1200 pixels wide marked-up image. But the NON-AMP version only need 696 pixels wide image.
Any reason why the mobile search result needs such a large image?
Doc: Link to AMP DOC
If I were to make a guess I would say it is to ensure the images are crisp when viewed on a high DPI screen. 696px might look fine on something that has a fairly low DPI, but on a higher quality screen with a high DPI 696px may be fuzzy and probably show some JPG artifacts. Where as a 1200px image scaled down will remain crisp on all displays.
I can't figure out why some images get blurry at different browser sizes. Take a look at this sample site:
The menu buttons at the top and the other buttons all shrink a bit when hovered over. Change the browser size a few times and see that some of them are blurry. Some actually get sharper when hovered over, some get blurrier.
I can't figure out how to solve this. They are all compressed the same way, all around the same resolution. Is there a specific size that they need to be to look better when scaled?
You are serving your image files way too large, causing the browser to spend time rescaling them to the size specified in the image tag. This causes the two-pass rendering that you are seeing.
For example, icon_profile2.png has the dimensions 2055x1712.
Resize your images to the desired size in your favorite image editor and use the scaled-down version on the website.
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
Just wondering:
I'm trying to set up an adaptive image handler in Coldfusion8, which resizes images for smaller screensizes.
I have it working allright and am currently playing around with the different resize options found here
What I notice is no matter what method I'm using, they all take time, reduce the image quality and not really reduce the image size, so for example:
IMG 1 IMG 2
Original 23K 900x360px 53K 900x360px
Blackman 22k 320x128px 52K 320x128px
highPerformance 21K 320x128px 32K 320x128px
nearest 25K " 38K "
The idea was to resize images for smaller displays. Right now I'm not really reducing anything, I'm only drainging the processor for resizing and output blurry images and the same file size.
Question:
Why should I bother resizing then? I might as well send the original file which #900x360px #23K. At least that images will be sharp vs. a resized blurry image with 320x1280px. Is there a way to make resizing images in Coldfusion worthwhile in terms of file size and/or image quality?
Thanks for inputs!Cldfu
I think what you fiddle with are quality/speed of the resize algorithm, not compression.
To compress with better file size, set the JPEG compression quality using the quality attribute (default to 0.75)
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7945.html
If cfimage doesn't satisfy your needs, use imagemagick
I want to re-size the image for example say 1000 * 1000 to 100 * 100. And I want to display full image after resizing it. Please can anyone help me?
To scale display objects in Corona either use the scale() command or manipulate the xScale and yScale properties:
http://developer.anscamobile.com/node/2452
Note however that the scaling will look best if the image sticks to power of two divisions. That is, 1/2 size, 1/4 size, etc.
For fast animations (eg. the object transitions away over half a second) the exact scaling you describe would look fine, but otherwise I'm wondering why you would want to do that in Corona (as opposed to scaling the image in Photoshop and simply having a smaller image to begin with.)
It'd be best to create an image of a larger size than you'd like to display. This will preserve the quality. For example you have an image with dimensions of 100x100 and you'd like it to display as a 20x20 image. Do the following:
local IMAGE = display.newImageRect("IMAGE.png", 20, 20)