6 Replies Latest reply on Oct 10, 2015 3:26 AM by Per Berntsen

    Help - pixel dimensions - lightroom

    heleno55538692

      Screen Shot 2015-10-10 at 08.48.01.pngHi, I am one of many people getting confused by image size for upload to the web. I am preparing my portfolio of photographs to upload to my website (in construction). I have read and read, and am following the conventional wisdom that PPI does not mater (much) and that it's all about pixel dimensions. My required aspect ration is 3X4 so I have cut my photographs down to 800X600 px, so the image size is not too large and it loads quickly. However at this size, not matter what the PPI, the images look compromised (pixelated). It's not until I export to 2000 px long edge that my images look reasonable.

      I am using a 13 inch Retina display (2560 x 1600 pixels) and can't help but think this has something to do with it.

       

      Can someone advise on what dimensions I should use to get good resolution across devices?

       

      THANKS!

        • 1. Re: Help - pixel dimensions - lightroom
          Per Berntsen Adobe Community Professional

          This has nothing to do with LR, but your Retina display.

          When a web browser detects that the screen is Retina (high pixel density), it scales everything, images included, to 200%.

          This is to ensure that text is readable, and that things look "normal", but images will loose sharpness because of the scaling.

           

          It is possible to solve this by serving Retina displays images that have double pixel dimensions - in your case they would be 1600 x 1200px.

          These images are named with @2x at the end. So you would have to make two versions of every image - for instance image.jpg and image@2x.jpg.

          image.jpg will be served to regular displays, and image@2x.jpg will be served to Retina displays.

          I use a solution from Retina Images

          You can see it at work on my website - http://perberntsen.com

          • 2. Re: Help - pixel dimensions - lightroom
            Per Berntsen Adobe Community Professional

            I should add that ppi is totally irrelevant in this context - it only comes into play when printing.

            You can enter 1 or 1000 ppi, and the image will display exactly the same. Only pixel dimensions matter.

            • 3. Re: Help - pixel dimensions - lightroom
              heleno55538692 Level 1

              Thank you Per! Yes I understand that PPI doesn't matter. If I do if you suggest - does that mean I have to upload X2 images for every image on my website? Not sure how I am going to do that..

              • 4. Re: Help - pixel dimensions - lightroom
                Per Berntsen Adobe Community Professional

                This of course requires coding on your website. If you have a web designer, he or she should be able to code it, (if not, get someone who can)

                If you use Wordpress, I think there are options to use @2x images.

                Or, if you do your own web design, it's not that hard to do this yourself.

                 

                As for Lightroom, make two export presets for the two different sizes.

                The regular and @2x images must be in the same folder. Edit: on your website, that is.

                • 5. Re: Help - pixel dimensions - lightroom
                  D Fosse Adobe Community Professional & MVP

                  I think Muse can handle twin versions quite easily (haven't tried it, though).

                   

                  Nice site, Per. I've seen some of your work before, and especially the "Norwegian Landscapes" series has been a bit of an inspiration for a long time. Love the way you drained all sentimentality out of it Here are two random examples in (more or less) that spirit:

                  landskap 01.jpg

                  20130330-DSC_1939.jpg

                  • 6. Re: Help - pixel dimensions - lightroom
                    Per Berntsen Adobe Community Professional

                    I have never used Muse, (I use DW) but it seems that Muse sites first will load the regular image, and then the @2x image on top of it.

                    Not a good solution, since loading time will increase, and it may look confusing to the user.

                    (Besides, Muse creates bloated code that's hard to edit manually, and doesn't create responsive sites that will adapt to smaller screens.)

                    The solution I use will only load one image, depending on screen pixel density, whiich reduces bandwith use to a minimum.

                     

                    The @2x images are supposedly four times the file size of the regular images, but I've found that I can apply more compression to them (20 units less on the LR quality scale), and still get good results. So they end up being a little over twice the file size, sometimes close to three.

                     

                    Nice site, Per.

                    thank you! I take it that you are familiar with Jens Huage's bus series? Jens Hauge: Gjennom Noreg i buss