Hello everyone, I read a lot about how to prepare images for the web but something I have not understood. I need to display an image of 800x600 px, the guide tell me that I don't need to load on the image server with larger size because it takes more time to download it and the browser ( or a representative ) must reduce it. I do not understand why the quality change, if I display on a browser an image 800x600px that originaly was bigger the quality is better that if I had it loaded on the server already reduced the size 800x600px. What can be due to the problem ? To reduce the original use photoshop image quality 9.
If the container where you display the image is 800x600, it should make no difference if the original picture is larger, and being reduced in size either by the containers size or via CSS or other means on the server (apart from the fact that it will be heavier to load), or being 800x600 when you upload it. However, if the container isn't the correct size, a picture with dimensions 1920x1080 will look better when it is reduced in size to fit whatever size the container has - say in this case a 900x700 (yes, I know the dimensions aren't correct) - than a 800x600 px picture will look scaled up. Regardless - if you're gonna show a picture with set width and height, the best way to do this is to make the picture the correct size before uploading. However, apart from showing actual images in their "real size" when clicked or similar, you should never ever use px-size on images, as it will break when the screen gets narrower, for instance on mobile.
You can see the image (http://www.davideinz...folio/fox-beer/) . 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 metod of a browser is better the photoshop ? I'm using a full hd screen. Thanks
In the spirit of full disclosure, I am not an expert in image manipulation, so where my comments are concerned, you may take'em or leave'em. Do not concern yourself with any "quality scale" measures for two reasons. 1) You don't know what is being measured unless you're a postdoc mathematician. 2) Because of #1, ask yourself whether you believe the number or your own lying eyes. Yes, different programs spit out different results. I read a paper a while back that compared the reduction qualities of several image manipulation applications. The primary "competitors" were Photoshop, The GIMP and ImageMagick. When it came to image reductions, GIMP and IM were clearly superior to Ps in keeping fine detail. That's not necessarily an indictment of Ps, it is a print oriented app, where GIMP, in particular, is web oriented. That 700px wide image for print is only a little over a half inch wide on paper while it is about seven inches wide on your monitor. The computer monitor, even the HD monitor, is low fidelity compared to print. Even an el cheapo printer has a higher resolution than the best monitor. That quality number is helpful where you're trying to achieve good fidelity while reducing the bandwidth (file size). Large images are expensive. They cost you bandwidth to serve and they cost your visitors to download (bandwidth = time and money) and to manipulate. Try this test: Take a full size HD jpeg image and scale it down to 700px width. Do this at various quality levels, from 1.0 down to 0.5 (or whatever the equivalent values are for your app). Now, view these images in a test page. At some point you will see, using your own lying eyes, a noticeable drop off in the image quality. That's probably somewhere around a value of 0.7. Use that value, give or take for future web images. Remember, too, that not all images need to have good fidelity. Always consider your visitors. If you want to make images available to download for print, you can always link to the full size, high quality original. cheers, gary
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). 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).
Photoshop -- like all Adobe products -- wouldn't know image optimization from the hole in its product DVD. Grab some other program -- paint shop pro, Gimp, ImageMagik, whatever, they'll do it right. Also remember that the file format itself can introduce errors, and the smoothing of the image reduction in the browser can hide those errors; called "artifacts". JPEG is lossy, PNG is not. That "loss" in JPEG can be smoothed out on a 50% reduction, whilst completely visible without it. You might also just be obsessing over a level of detail 99.99% of the world can't actually see; a common failing amongst the graphically minded. Kind of like the FLAC placebo nonsense where the vast majority of people in legitimate blind tests couldn't tell 192kbBs or variable rate MP3 from the FLAC. (naturally why the people who favor flack use 128kBps as their litmus test -- card stacking!)... even more of a laugh when the raw unencoded source is only 1408kBps and they waste 9mBps FLAC on it. Though your saying it must be a specific size is troubling, makes it sound like you are using it for presentation instead of as content -- in which case it might not have any business on a website in the first place. It's just a suspicion I have the moment I see that 800 wide number. I could probably say more if the URI to your image wasn't mangled.
1. You need to open the image in Photoshop, And select Crop(x) tool, and if you notice on the top properties you can set this values of your image size that you are expecting: 800x600px and select 72dpi for web 2. Now drag and drop the Crop tool and crop the image as you needed to cover on the size of 800x600px, and press enter, then that image will be cropped on your required size. 3. Then Go to file, > Select 'Save for Web' Option, and save it as Jpg, PNG, or Gif as you wanted. If any doubts please contact me. Thank you