22 Replies Latest reply on Sep 15, 2012 12:25 PM by Noel Carboni

    Recommendations needed for CS5 editing format

    cma cma Level 1

      What is best format to save for high resolution on the web using CS5? For my website [.. removed personal advertising ..] and for my FB page especially [.. removed personal advertising ..] I want to create higher resolution .jpgs (or .png?).

       

      I have been saving .jpgs in highest resolution. Should I consider saving to .png?

       

      My typical .psd file is 3456 px wide X 5184 px high, resolution 240/bicubic  with all 3 boxes checked (Scale styles; Constrain proportions; Resample image). Should I be using different settings in creating my .psd files from .CR2?

       


        • 1. Re: Recommendations needed for CS5 editing format
          Mylenium Most Valuable Participant

          And what specifically are you asking? What do you mean by "high resolution"? Resolution doesn't matter on the web, only absolute pixel dimensions, so I'm not sure what you are asking...

           

          Mylenium

          • 2. Re: Recommendations needed for CS5 editing format
            cma cma Level 1

            I want to get higher resolution pictures onto my website and on my Facebook page. Are there any recommendation to improve my current CS5 settings and workflow--see my original question for my current settings.

            • 3. Re: Recommendations needed for CS5 editing format
              conroy Level 5

              As Mylenium indicated, it's not clear what you mean by "higher resolution". Some people use resolution to mean pixel density (which is irrelevant to Web images), others mean the count of pixels in width and height (which is relevant to Web images). Yet other people may mean a perceived "higher quality", such as improved clarity or sharpness or a reduction in compression artefacts.

               

              I think you mean "higher quality".

               

               

              You've said that your PSDs are typically 3456 px wide X 5184 px high. For those of us who can't access your Facebook account, what size, measured in pixels, of images do you want to put on the Web?

               

              Can you post one or two examples of your Web images and a description of what you would like to be different?

              • 4. Re: Recommendations needed for CS5 editing format
                cma cma Level 1

                Conroy, thanks most kindly for your reply. In my original post, I had references to my webpage and FB page, not realizing that that was not allowed. I also had a typical .psd image used to save a .jpg from, but could not upload as it was far too large.

                My meaning of "resolution" was "pixel density."

                FB now has an option that allows one to upload "high resolution" images (.jpgs, .gifs or .pngs) which can be viewed in Chrome or FF as full page.

                For such high quality images to be uploaded, do you have any suggested changes to my current CS5 .psd settings based on the 240 resolution and the other settings referred to above?

                • 5. Re: Recommendations needed for CS5 editing format
                  conroy Level 5

                  Mylenium and myself already have said that pixel density (ppi) is irrelevant on the Web. If you were sending images to a printer then the density would be relevant. So forget about the 240. Typically, Web images have a 72 ppi tag, but that's unimportant.

                   

                  The thing to consider for the Web is the height and width of an image, measured in pixels. For example, a 1920 x 1080 pixels display cannot show an image larger than 1920 x 1080 pixels without the image being resampled to a smaller scale or the image requiring scrolling or panning. There are now Retina displays with many more pixels than typical displays, of course.

                   

                  You may want to upload images which have more pixels than any monitor if viewers are to be able to examine regions of the image in high detail.

                   

                  Reducing the size of your original images to create Web images should be done with care. The "Bicubic Sharper" algorithm can produce artefacts which some people find objectionable. The standard "Bicubic" algorithm tends to require some sharpening by the Photoshop user. You should experiment with slightly sharpening an image before downsizing it as a compensation for blurring which will be introduced by the bicubic resampling. Some people prefer sharpening after the resampling, and others prefer both pre-sharpening and post-sharpening.

                  • 6. Re: Recommendations needed for CS5 editing format
                    Noel Carboni Level 8

                    What is the pixel count you want for online images? 

                     

                    Understand that unless you're trying to give people images they can print as big enlargements, you probably don't need more than 1 to 2 megapixels in a "high resolution" image for viewing online.  Storing web images in too large a size just means they'll take more resources to download and people won't want to look at them as much.

                     

                    Is this enough?  Too much?  It's 1400 x 1052 pixels (1.5 megapixels), about 800 kbytes.

                     

                    http://Noel.ProDigitalSoftware.com/ForumPosts/DecentPixelCountForScreenViewing.jpg

                     

                    -Noel

                    • 7. Re: Recommendations needed for CS5 editing format
                      cma cma Level 1

                      Thanks to both Conroy and Noel for the detailed answers. I am trying to answer Noel's basic question first--what pixel count I'm aiming for with my hi res online images--before we can proceed to the next step: how to edit the .CR2 files to achieve that image size.

                      I note with disappointment that the typical image size on my website is shown as 400X585 px. One would think that would be a file size of 234K. However, online "image information" shows 57.1 KB.

                      Should I conclude that for a given dimensions in px of a .jpg, that the resolution on the web is fixed, e.g., there is no way to create higher quality .jpgs (or .pngs) from a given .psd file?

                      • 8. Re: Recommendations needed for CS5 editing format
                        conroy Level 5

                        The file size is affected by the compression algorithm employed in creating the file. There is a trade-off of image quality for size reduction. However, there is often no significant perceived difference between uncompressed or lossless compressed images and "high quality" or "very high quality" lossy compressed images, while there can be significant or huge file size differences.

                        • 9. Re: Recommendations needed for CS5 editing format
                          conroy Level 5

                          Your images of a given size can vary hugely in "quality". When down-scaling from the original, choice of resampling algorithm and appropriate sharpening make a difference. Choice of compression algorithm and level for the file make a difference.

                           

                          I use PNG for screenshots in the forum, but for publishing photos for viewing on the Web, I recommend JPEG with quality setting between "high" and "very high" for excellent results at a reasonably small file size.

                          • 10. Re: Recommendations needed for CS5 editing format
                            cma cma Level 1

                            So should I conclude that there is no reason to use FB's "hi resolution" option in creating albums, since 57K files look about the same as 300 K files on the web, assuming they have the same px dimensions?

                               I created in CS5 a cover image with a high pixel count. That image looks much better than the other images on my FB page (or on other FB pages.) The favorable comments I've gotten for my FB cover image was what got me thinking about routinely creating higher resolution images.

                            • 11. Re: Recommendations needed for CS5 editing format
                              conroy Level 5

                              I don't know what FB's use of the term "high resolution" is, but when you talk of images of a given number of pixels having a 6-fold difference in file size then it's quite likely that the difference is due to differing quality/compression levels being specified when the files were created. Having said that, a given algorithm's compression level can compress different image contents of a given size to differing degrees. It would help greatly if you post example images to elucidate your questions.

                              • 12. Re: Recommendations needed for CS5 editing format
                                Noel Carboni Level 8

                                It's really as simple as this:

                                 

                                Pick a target set of pixel dimensions you'd like to publish your images in.

                                 

                                Process your files through Camera Raw and Photoshop, and downsample for publishing to the size you've chosen.

                                 

                                Choose a JPEG compression amount when you save your images for publication that looks good enough to you on screen, and provides a reasonable amount of compression so as not to make people wait too long for the download.  I suggest starting with quality level 9 or 10 (I believe I used 10 on the image I provided a link for above).

                                 

                                -Noe

                                • 13. Re: Recommendations needed for CS5 editing format
                                  cma cma Level 1

                                  Hi Noel;

                                     My typical final .jpg size to be uploaded is 585 px wide X 400 px high. I'm not sure what you mean by "downsample for publishing". Does that mean "reduce in size"?

                                    I always used quality level 10 for .jpgs.madamerecamier.jpg4003h.jpg

                                  • 14. Re: Recommendations needed for CS5 editing format
                                    Noel Carboni Level 8

                                    Downsampling is what you do when you reduce the pixel dimensions in the Image - Image Size dialog with the [  ] Resample checkbox checked.  I'm talking about processing the images at the resolution out of the camera (or even higher) for best appearance, then doing Image Size right at the end when you're ready to publish them.

                                     

                                    Yours are what I would call low to medium resolution.  585 x 400 pixels wouldn't give you a sharp full screen display even on a small monitor or tablet.

                                     

                                    If you have full control over the HTML in your own web page, some time back I prepared a web page that uses HTML to downsample images for normal display at 100%, so that they stand up to being zoomed-into - e.g., on an iPad, or by using the zoom function in a browser.  Where's that URL...   Ah, here:

                                     

                                    http://Noel.ProDigitalSoftware.com/temp/WebImage/Test.html

                                     

                                    That's just a graphic, but the larger of the two, which will stand up to being zoomed in to 200% (and display really nicely on a Retina display) is 1000 x 1188 pixels.  The <IMG> tag initially displays it at 50% of its true size.  With this technique the user downloads a bit more data but the image stands up to close scrutiny much better.

                                     

                                    -Noel

                                    • 15. Re: Recommendations needed for CS5 editing format
                                      cma cma Level 1

                                      Noel:

                                      The graphic on the right of your example has higher resolution. I believe that my clients look at my pages mostly on full size monitors like mine (19" diagonal at least). For such an audience, what size jpgs would you recommend to achieve medium to high resolution? (I wish I could give the URL of a typical page from my website.)

                                      However, if I were using jpgs of say 877 X 600 px, they would be larger on the screen than my current jpgs,  but would the larger jpgs be higher resolution?

                                      It seems to me that they would have to cover more screen space, so doing Image Size at 877 X 600 would result in the same apparent visual resolution (fineness of detail) as my current 585 X 400 px images. What am I missing?

                                        I checked your html. If I understand your technique, you constrain the displayed size of the higher resolution jpg. But because it is higher resolution, it looks better when zoomed than the one on the left.

                                      I'm not concerned with zooming, since I don't foresee most of my clients doing that. I think your image on the right looks better at the same displayed size than the one on the left. Therefore, why not downsample to 1170 X 800 px for example, but display at a smaller size, e.g., 877 X 600 px ?

                                      • 16. Re: Recommendations needed for CS5 editing format
                                        conroy Level 5

                                        cma cma wrote:

                                         

                                        ... if I were using jpgs of say 877 X 600 px, they would be larger on the screen than my current jpgs,  but would the larger jpgs be higher resolution?

                                         

                                         

                                        The resolution (pixels per inch) would be that of your monitor's screen and therefore the same for all displayed images.

                                         

                                         

                                        It seems to me that they would have to cover more screen space, so doing Image Size at 877 X 600 would result in the same apparent visual resolution (fineness of detail) as my current 585 X 400 px images. What am I missing?

                                         

                                        More pixels will contain finer detail, of course (unless you create the large image by upsampling the small image).

                                         

                                        buttoncrop.jpg  buttoncrop67.jpg

                                        1 person found this helpful
                                        • 17. Re: Recommendations needed for CS5 editing format
                                          Noel Carboni Level 8

                                          cma cma wrote:

                                           

                                          I'm not concerned with zooming, since I don't foresee most of my clients doing that.

                                           

                                          You're clearly not well in touch with the trends in internet browsing.

                                           

                                          The amount of eCommerce conducted from tablets is already staggering.

                                           

                                          Whereas zooming on a browser on a desktop computer is arguably less common, it's absolutely expected that people are constantly using "pinch zoom" gestures on tablets to see things more clearly, and that's EXACTLY what they're going to do to look at your products more closely.  If they're pleasantly surprised to see more detail do you think they're more likely to buy vs. just seeing a big, blurry version of your image?

                                           

                                          -Noel

                                          • 18. Re: Recommendations needed for CS5 editing format
                                            cma cma Level 1

                                            Noel, you are right on target with this. So much so that I have decided to implement larger standard pictures with my 9/27/12 update. I will be using a standard size of 800px X1170 px, e.g., 4 X the size in pixels of the old jpgs. However, the new jps will be constrained by my style sheet to the previous display size of 400 px X 585 px.

                                              Looking at a couple of examples side-by-side, old vs. new size downsampled from same .psd file, there is a huge improvement in quality with the larger size when zoomed. The quality difference is also evident without zooming.

                                              With an average of 10 .jpgs/ detail page on my website, I am not too concerned about increased download time.

                                            However, I will not implement at present larger file size for .jpgs on my category pages with as many as 40 thumbnails/page.

                                            • 19. Re: Recommendations needed for CS5 editing format
                                              cma cma Level 1

                                              Conroy,  thank you for your very informative, expert ideas on this subject.

                                              • 20. Re: Recommendations needed for CS5 editing format
                                                Noel Carboni Level 8

                                                Just to add:  One thing you can usually do is with the larger pixel count images save them at a higher level of compression (lower Quality setting) and the sizes won't be 4x the size of the smaller JPEGs.

                                                 

                                                I have just updated the web page example I provided above to include an image as well as the graphic.  The much more detailed image is only about double the size as a JPEG file as the smaller one.  The Quality setting was 7 vs. 10.

                                                 

                                                -Noel

                                                • 21. Re: Recommendations needed for CS5 editing format
                                                  cma cma Level 1

                                                  Noel, this is a valuable tip. But would not the lower quality setting partially counteract the effect of the  larger number of pixels?

                                                  • 22. Re: Recommendations needed for CS5 editing format
                                                    Noel Carboni Level 8

                                                    Not as much as you'd think.  See it for yourself on my example page.

                                                     

                                                    -Noel

                                                    1 person found this helpful