1

my psd file is 9900px by 6600px and I want to export it to jpeg for a website. When I try to export it to jpeg with 72ppi and lower down pixel dimensions to about 1000px by 750px, the image comes out pixelated. It's so frustrating, please help.

  • What do you do exactly to set the resolution (ppi) of the image? I can't find any such setting in the export tool. – Guffa Sep 6 '14 at 21:43
  • I first change the resolution throughout Image -> Image Size – S N Sep 6 '14 at 21:45
  • When I reduced the pixel dimension to about 3000px by 2200px(72ppi), it don't notice the pixelation at all. The image is still clear but when I reduce to about 1000px by 750px, then it look pixelated. – S N Sep 6 '14 at 21:48
  • related: photo.stackexchange.com/q/46671/15871 – Michael C Sep 7 '14 at 7:15
  • I think the question title is misleading here. It's not the file format conversion that really matters (although the compression will be a factor too). It's How do I get best results when scaling an image down for web display? – Please Read My Profile Sep 7 '14 at 13:15
0

In Photoshop the best option for saving a single image for output to a website is the Save For Web tool.

This allows you to set up your PSD for export to JPG and gives you options to take care of the resizing, resampling and conversion to sRGB which is a good idea for the web. Also the tool allows you to look at samples of the image and decide which quality level is going to give the best size/quality tradeoff for screen.

Adobe Photoshop CC - Save for web dialogue showing 4-up view and JPEG options

| improve this answer | |
  • I thought that there were some issues with Save to Web. Maybe I read it in one of Dan Margulis's books? I'll have/get to go over them today. – JenSCDC Sep 7 '14 at 11:03
  • I think that's unlikely as Save For Web is just a Photoshop 8BE plugin that automates the functions already in Photoshop (like Save As.) But if he has criticisms then I'd be keen to see what they are... – James Snell Sep 7 '14 at 14:36
  • I just had a quick look and the only reference I found was in a newsgroup posting where he notes that the tool assigned the colour space rather than converting it - but that was 2003. He doesn't recommend against using Save For Web at any point there and he doesn't usually hold his tongue about things like that. – James Snell Sep 7 '14 at 14:55
  • I found it- apparently Save for Web leaves in some metadata. The thread on his mailing list is from February 2013. So nothing to do with image quality. – JenSCDC Sep 7 '14 at 15:04
  • Can you post the link? I'd be interested to read it as Photoshop CC (pictured) has a metadata option for you to control what it outputs. – James Snell Sep 7 '14 at 15:46
2

Don't change the resolution of the image. The resolution is irrelevant when you display images in a web page. The browser only cares about the pixel dimensions of the image.

Just resize the image to the pixel dimensions that you want.

If you then want to set the resolution (although the browser doesn't care), use the Image Size settings again, but uncheck the Resample Image option so that it only changes the resolution setting without resizing the actual image.

After resizing you might want to gently use the Unsharp Mask filter. I generally use settings like: Amount: 50, Radius: 0.5, Threshold: 2.

Then you can export as JPEG. If you don't use the sRGB color space already you can use the option to convert to sRGB. No need to embed a color profile.

See also Is there any practical difference between saving at 300ppi or 72ppi?

| improve this answer | |
  • If I don't set to 300ppi, then wouldn't someone print the image? – S N Sep 6 '14 at 22:06
  • 2
    @SN: The resolution is just information about how large a pixel is supposed to be in actual measurements. An image that is 1000x750 has the same pixel dimensions regardless if the resolution is set to 72ppi or 300ppi. It's not more printable just because it has a higher resolution setting. If you print it at 300ppi you will just get a printout that is 3.3" by 2.5". – Guffa Sep 6 '14 at 22:14
  • 1
    Why do so many people believe that the ppi resolution setting means anything? Is it just that many people are horrible at math? Sorry for the rant, but this is one of my pet peeves. – JenSCDC Sep 6 '14 at 22:26
  • 1
    @AndyBlankertz - it actually has some meaning, particularly with RIPs and pagesetting (desktop publishing) software. It's not that you can't change the physical dimensions of the output easily, but that the image is designed to have a particular size and resolution, and will import (or print) at the desired size without any additional manipulation. – user28116 Sep 7 '14 at 0:16
  • True, but the average user won't run across that. Also, why don't the RIPs and pagesetting software just grab an image and resize it as needed? If you know the ppi required and the physical dimensions, you know the number of pixels you need. – JenSCDC Sep 7 '14 at 0:58
-1

Height (px) / Height (inches) = PPI to use.. When working with a design for print but you want to proof it on the web then it is best to start with a 300ppi and convert to cmyk before exporting the final deliverable.

| improve this answer | |
  • 72ppi mac display - 96ppi windows - 150ppi retina - 300ppi best for print proofing on web before color space conversion to preserve 300dpi which is standard for print. – user50809 Apr 23 '16 at 17:48
  • Another thing to note if using 'save for web' feature as it will only save your images at 72ppi. To save at a higher ppi you must 'save as' and select JPEG, PNG... – user50809 Apr 23 '16 at 17:54
  • Could you explain what are the impact of PPI on image quality ? PPI are only needed to translate a physical size to/from pixels size => only for printing. As far as I know, PPI is only stored as EXIF data and has nothing to do with quality or image definition. – Olivier Apr 23 '16 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.