I created this image with photoshop 4500x2646px 72dpi, I want to show my picture in a div of 700x412px.
1 resize with photoshop, 700x412px 72dpi quality 12 (max) -> 216Kb and the quality (according to my scale) on my site is 8 (from 0 to 10).
2 resize with photoshop, 1400x824px 72dpi quality 12 (max) -> 683Kb and the quality (according to my scale) on my site is 10 (from 0 to 10).
Why if the browser resize an original image of 1400px to 700px the quality of the pictures are better than use a pictures resize by photoshop ?
The resize method of a browser is better the photoshop ?
I'm using a full hd screen.
Thanks
If you resize a 4500x2646px image with html/css in a Browser, it will still have to download the full image and use bandwidth. It's not like having a server program resize and save a new image like a thumbnail.
It also may depend on what method the specific Browser is using to resample the image, nearest-neighbor or bicubic.
Take a look at the different options in Photoshop for resizing/resampling. And Flatten the image first so that the edges don't blur, then Save As JPEG. But do not save over your PSD as flattened or you won't get your layers back.
There are more quality options if you choose Save for Web.
And if the image is still not crisp enough, I put a Smart Sharpen Filter of 15%, 1.0px Radius.
Related
I'm making a website with a single image as a background (with different backgrounds for subpages). So far I have established that the image should be about 1920x1080, possibly with 1.77:1 aspect ratio and a jpg for PCs. Now I want to reduce the image file size without losing quality.
1) First my problem. I have encountered the most bizarre thing in photoshop. When I upload an image 4272x2848 that weights 521 KB into photoshop and save it without changing anything, its size increases to... 1,52 MB ??? After I cut down the size to ~1920x1080 the size is still ~800 KB. Also the image before uploading has 96 DPI, after it is uploaded it changes to 72 DPI. (What sorcery is this?)
2) What is an acceptable image file size with that resolution?
3) Should I use save for web? This increases the size or reduces the quality from what I have experimented.
4) I found this image size reducer website: https://kraken.io/web-interface It reduces the size and I think the image quality does not change.
5) http://www.filedropper.com/pancakes - the image from question #1. (The image will probably be changed in the near future so this one is more of a case study).
Thanks!
JPEG being lossy, every time you load, then save, a separate JPEG algorithm is applied again. I believe the default for Photoshop is High quality, which an 8 on their dialog. So if you have an original JPEG that was originally saved as a low or medium quality (say a 4-6 on the Photoshop dialog), if you then open that in Photoshop, and go with the default "High/8" quality save, then the JPEG algorithm is applied on the perceptual image, meaning you saved a lower quality perceptual image at a higher quality algorithm's amount of data.
This is a major reason that I've moved away from JPEG. If JPEG is required I always try to start with either a RAW, BMP, TIFF, or PNG image, and then save off a JPEG version from that, then if I need to make any changes I go back to the full "original" [lossless] format, make the changes then save the JPEG again. I try to never edit an image that is already saved as JPEG, because you're always going to lose a small amount of quality (mostly the JPEG algorithm is good enough that the loss of quality isn't perceptual, but the file size can change none-the-less).
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
I have a client who insists on "crisp" images on his Web pages. One image he gave me was 2592 pixels wide, but the page is only 940 pixels wide. No problem, I just resize the images using Photoshop but there is a noticeable drop in quality, lots of jagged edges. I expect a loss of quality when resizing to one-third the size, but I thought I could do better. So what I did is take the original image and have the browser (Chrome) resize it to 940 pixels wide. Yes, I understand this is the absolute worst thing to do but I was just experimenting. It turns out the browser does a much better job of resizing than Photoshop -- I don't get the jagged edges and the picture looks fairly close to the original in quality.
So what's the deal here? Why is Photoshop not as good as resizing as Chrome (IE8 and Firefox do just as good a job too)? I've tried tweaking Photoshop's resampling options but have seen no real difference.
There are a couple of different things to take into account when scaling images in photoshop:
1.) File type+compression
You're going to want to make sure that if you use a filetype with lossy compression (i.e. JPEG) that you set the quality >8, or you will see a noticeable drop on quality.
2.) Resample method
Photoshop provides a few different resampling methods which effect how pixels are combined when scaling down. Below are links to some images that illustrate where you can modify this when scaling.
Image->Image Size...
http://cl.ly/3W3M0b3W3H0G1Y452L15
There is a drop-down on the bottom of this window:
http://cl.ly/0o463J2J0e2L1u0C1U26
Likely what you're experiencing is that your image is resampling using "Nearest Neighbor" or Bilinear".
Give it a go.
You can try using a browser-based script such as TimThumb: http://code.google.com/p/timthumb/
You really do need to resize the image instead of shrinking a huge image just to display. This script will create copies of your image in different sizes and if I remember correctly, it even supports some sort of caching.
Ive had it resize pretty large images for me to very small thumbnails and it always looked sharp.
Photoshop and web browsers handle resizing differently. I don't use Photoshop, so I can't help you with that..
However, if you want that the picture looks like resized by a web browser, then resize it with a web browser! Take a screenshot and cut the resized picture, creating another one which you can really use on the site.
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 have a very large background image ~400k. If I reduce the quality in Photoshop to say (4) it will shrink it down to ~180k - still big but much more manageable. Are there any other good methods at reducing file size without losing a ton of quality? My PSD for my background image is basically a giant collage - some of the pics have color and the rest are desaturated. I'd love to save as black and white but need some of those color images.
Thanks for any help!
have you tried to save the image in Photoshop by "Save for web and devices"?