1
\$\begingroup\$

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.

Improve this question
\$\endgroup\$
6
  • \$\begingroup\$ What do you do exactly to set the resolution (ppi) of the image? I can't find any such setting in the export tool. \$\endgroup\$
    – Guffa
    Commented Sep 6, 2014 at 21:43
  • \$\begingroup\$ I first change the resolution throughout Image -> Image Size \$\endgroup\$
    – S N
    Commented Sep 6, 2014 at 21:45
  • \$\begingroup\$ 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. \$\endgroup\$
    – S N
    Commented Sep 6, 2014 at 21:48
  • \$\begingroup\$ related: photo.stackexchange.com/q/46671/15871 \$\endgroup\$
    – Michael C
    Commented Sep 7, 2014 at 7:15
  • \$\begingroup\$ 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? \$\endgroup\$
    – mattdm
    Commented Sep 7, 2014 at 13:15

3 Answers 3

Reset to default
0
\$\begingroup\$

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
\$\endgroup\$
7
  • \$\begingroup\$ 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. \$\endgroup\$
    – JenSCDC
    Commented Sep 7, 2014 at 11:03
  • \$\begingroup\$ 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... \$\endgroup\$
    – James Snell
    Commented Sep 7, 2014 at 14:36
  • \$\begingroup\$ 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. \$\endgroup\$
    – James Snell
    Commented Sep 7, 2014 at 14:55
  • \$\begingroup\$ 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. \$\endgroup\$
    – JenSCDC
    Commented Sep 7, 2014 at 15:04
  • \$\begingroup\$ 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. \$\endgroup\$
    – James Snell
    Commented Sep 7, 2014 at 15:46
2
\$\begingroup\$

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
\$\endgroup\$
5
  • \$\begingroup\$ If I don't set to 300ppi, then wouldn't someone print the image? \$\endgroup\$
    – S N
    Commented Sep 6, 2014 at 22:06
  • 2
    \$\begingroup\$ @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". \$\endgroup\$
    – Guffa
    Commented Sep 6, 2014 at 22:14
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – JenSCDC
    Commented Sep 6, 2014 at 22:26
  • 1
    \$\begingroup\$ @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. \$\endgroup\$
    – user28116
    Commented Sep 7, 2014 at 0:16
  • \$\begingroup\$ 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. \$\endgroup\$
    – JenSCDC
    Commented Sep 7, 2014 at 0:58
-1
\$\begingroup\$

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
\$\endgroup\$
4
  • \$\begingroup\$ 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. \$\endgroup\$
    – user50809
    Commented Apr 23, 2016 at 17:48
  • \$\begingroup\$ 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... \$\endgroup\$
    – user50809
    Commented Apr 23, 2016 at 17:54
  • \$\begingroup\$ 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. \$\endgroup\$
    – Olivier
    Commented Apr 23, 2016 at 18:58
  • \$\begingroup\$ Related : Is there any practical difference between saving at 300ppi or 72ppi? \$\endgroup\$
    – Olivier
    Commented Apr 23, 2016 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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