1 2 3 Previous Next 87 Replies Latest reply on Feb 9, 2018 12:01 PM by pziecina

    With regards to hiDPI image conversion...

    r_tist Level 1

      Is retina.js a tool that should be employed for handling hiDPI images for retina display? Would you recommend it?

      regular:

      <img src="/images/my_image.png" />

      script checks for alternative and will pull in on retina displays:

      "/images/my_image@2x.png"

       

      Another tutorial I found online said to keep the 72dpi, and going forward, double the width of the image size (the height to follow suit to constrain proportions). Then use more compression techniques in your 'save/export for web'. Tutorial noted your large image might wind up being less kb than original size you had previously.
      Apply global CSS:

      portfolio-pics img {

      max-width: 100%;
      height: auto;

      }  ... and if you cannot do this, to make note in the image tag, width="700" as to the actual size needed on the page.

       

      Which of these techniques would you be more comfortable / trusting of to take care of this ever-evolving era in screen displays?

      I am curious as to your thoughts on these solutions; not interested in using the <picture> tag.

      ...I did experiment with the second option mentioned for a blog site, and it did work out nicely. In that test, I used a single 72 dpi image 'doubled up in dimensions'... then just cited the dimensions desired on the page to down-size/down-scale.

       

      Thank you.

        • 1. Re: With regards to hiDPI image conversion...
          Nancy OShea Adobe Community Professional & MVP

          I don't use retina.js.   Never did.  I found problems with it when I tested it a few years ago.

           

          Moderns browsers are supporting <picture> and <srcset>  now.   So that's what I use.

          Responsive images - Learn web development | MDN

           

          In Photoshop, use File > Export > Export As to generate 1x, 2x and 3x images.   More pixels gives better resolution and bigger file size, too.  So move the quality slider down to reduce file size. 

          PS-export2x.jpg

          2 people found this helpful
          • 2. Re: With regards to hiDPI image conversion...
            Per Berntsen Adobe Community Professional

            Hi Nancy,

             

            I have done some superficial reading on <picture> and <srcset> previously, but found it hard to grasp.

            The article you linked to seems to be easier to understand. (but I thought "Responsive images" usually referred to the max-width:100% property)

             

            What I'm curious about, and that the article doesn't seem to mention, is how <picture> and <srcset> deal with browser scaling on high resolution screens.

            Is the scaling of images to 200% prevented?

            • 3. Re: With regards to hiDPI image conversion...
              Nancy OShea Adobe Community Professional & MVP

              https://forums.adobe.com/people/Per+Berntsen  wrote

               

              Hi Nancy,

               

              I have done some superficial reading on <picture> and <srcset> previously, but found it hard to grasp.

              The article you linked to seems to be easier to understand. (but I thought "Responsive images" usually referred to the max-width:100% property)

               

              What I'm curious about, and that the article doesn't seem to mention, is how <picture> and <srcset> deal with browser scaling on high resolution screens.

              Is the scaling of images to 200% prevented?

              If you want simple, use SVG which retains image quality at any scale on any device.

               

              With raster images it's more complicated.   A 2x image will render correctly on a retina display.  If no 2x image is available, the 1x image will take its place and the browser will upscale it unless you define the actual width of your 1x image somewhere.

              https://medium.com/@micjamking/hd-retina-display-media-queries-b5562b5430d6

               

              Max-width: 100%  will give the best results with raster images because it doesn't up-scale beyond the image's native height and width.   But it allows for down-scaling to fit smaller displays.

               

              Width: 100% allows for up-scaling small images to fit bigger viewports however that is likely to cause distortion with JPG and PNG on very large displays.  On the other hand, SVG is no problem because it remains crisp at any scale.

               

               

              Nancy

              1 person found this helpful
              • 4. Re: With regards to hiDPI image conversion...
                r_tist Level 1

                This is exactly what I was looking for. Here's my question...so now I have 2 files, the general .jpg at about 200kb and the @2x winds up about 500kb. - If the images are getting called into a lightbox; are you telling me the retina display computer sifts through the images folder options and computes @2x and knows to pull that one in as a substitute for those retina ready screens?

                This is where I need clarification as how to apply to this scenario:

                 

                <figure><a href="img/paintings/seaview.jpg" data-lightbox="Paintings" alt="Painting of the sea"></a></figure>

                 

                As is, I've never had to indicate the width & height of the image. It automatically displays that accordingly.

                Thank you! This will clear up so much of the confusion in applying this technique.

                • 5. Re: With regards to hiDPI image conversion...
                  Nancy OShea Adobe Community Professional & MVP

                  Does your LIghtbox script support  srcset or <picture> element?

                  That's a fundamental question.  If it doesn't, you'll be feeding a lot of unwanted bandwidth to people.

                   

                  The latest version of FancyBox 3 does support srcset.

                  fancyBox - touch enabled, responsive and fully customizable lightbox script

                   

                  <a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
                  <img src="thumbnail.jpg" />
                  </a>

                   

                  If you decide to use FancyBox 3 read the licensing requirements.

                  fancyBox - Touch enabled, responsive and fully customizable jQuery lightbox script

                  • 6. Re: With regards to hiDPI image conversion...
                    osgood_ Level 8

                    I dont think that is for detecting  hi-definition screens, its for detecting window width and serving the appropriate image based on that, which is different?

                     

                    Admittedley I dont know much about detecting hi-def screens and serving the appropriate hi-defintion images, along with most. Its still a thorn in every developers backside. There are ways using javascript or jquery, but never tried them.

                     

                    Im waiting until something emerges which is considered the main stream way of dealing with a situation which is becoming relevant but l dont see many doing anything about it right now according to the code lm looking at unless its being evoked by some js file which l probably would not investigate.

                     

                    So if anyone else has any thoughts please chip in as its a subject which needs clarifying and addressing.

                    • 7. Re: With regards to hiDPI image conversion...
                      B i r n o u Adobe Community Professional

                      using picture and source and/or srcset can refer on width property (vw) but also pixel density (2x)... and so on

                      Responsive images - Learn web development | MDN

                      1 person found this helpful
                      • 8. Re: With regards to hiDPI image conversion...
                        B i r n o u Adobe Community Professional

                        in case you don't want to read the entire paper... add #Resolution_switching_Same_size_different_resolutions to the URL

                        • 9. Re: With regards to hiDPI image conversion...
                          pziecina Level 6

                          You can code srcset and picture to detect the screen resolution, the width of the image required, the users download speed or any combination of all 3, (any from 1 or 2 to all).

                           

                          Both srcset and picture are as we have discussed before, are not simple to use, but can also be very simple to use, depending on what the developer wishes to do.

                           

                          I did suggest a survey to find out what devices and screen sizes/resolutions people were using before Preran took his sebatical, but as it would in my opinion require an acp/mvp to complete satisfactorily, (post in mvp forum, and possibly in pre-release) I have let it drop, but if any mvp/acp wishes to take over the survey I will help them in analysing and sugesting a workflow/demo code if they wish me to do so.

                          • 10. Re: With regards to hiDPI image conversion...
                            osgood_ Level 8

                            So in the example that Nancy supplied, which doesnt cover resolution, how many images would you need if you were to include 1.5x and 2x and posibbly 3x. Are these in addition to the 3 images required for standard desktop, tablet, smartphone resoluton screens ?

                             

                            Can you rewrite that bit of code so it addresses all the options standard desktop, tablet, smartphone and retina hidef, so its clear to those who might come across this thread what its supposed to look like?

                            • 11. Re: With regards to hiDPI image conversion...
                              osgood_ Level 8

                              Thanks for that link, lm working on it.

                               

                              I guess it dont help if you dont have a retina/hi-def device to test it on......hummm.

                               

                              Which leads me to ask.......when I get around to upgrading my Mac, sometime this year hopefully, l think buying a retina one is future proof BUT does that mean all those millions of websites with standard images are going to look rubbish?

                              • 12. Re: With regards to hiDPI image conversion...
                                pziecina Level 6

                                To cover the 3 screen sizes you mention Os, all that is required is -

                                 

                                <img src="standard.jpg" srcset="standard.jpg 2x", "small.jpg 1x">

                                 

                                The reason why you only require 2 images is because the desktop and tablet images are the same image. If you create a desktop image to fill say half of the screen on a 24 inch monitor, that same image when used to fill half the screen on a 12 inch hi-dpi tablet device will be twice the resolution at half the display size.

                                 

                                The image that is labeled as 1x is just a fallback for low connection speeds, as mobile, (smartphone) devices all have image optimization built into the browser image rendering routines, so small hi-dpi devices only require a fallback if the user has a bad connection. That said if the users screen size falls below half that of the image for the tablet device, it would be worth adding another image using the sizes media-query attribute just for that image with the 1x image as fallback in the sizes code structure.

                                 

                                As I mentioned it can get much more complicated than this example, but without more info on what devices people are using, I don't think we can move beyond the basics.

                                 

                                It should also be mentioned that image-set can also be used for delivering background images in css, and that they are 'exploring' a similar usage for other media, (video/audio/interactive). So looking forward, most items we now deliver that we must decide between file size vs quality will no longer be an either/or choice.

                                • 13. Re: With regards to hiDPI image conversion...
                                  pziecina Level 6

                                  One thing i forgot to add in the above post.

                                   

                                  The new smartphones are all above 300ppi resolution, so the 'standard 2x' image would also be almost the correct ppi for those devices.

                                   

                                  This is why anyone telling users to use Photoshops save for web feature, which uses a base ppi setting of 72ppi is still creating images as though it was the 1990's, (a 3x image using Ps is still only 216ppi, and we have 8k screens just around the corner, what then 8x images?).

                                  • 14. Re: With regards to hiDPI image conversion...
                                    osgood_ Level 8

                                    So what image does the tablet with standard resolution screen get? I dont want it to get the standard.jpg which is for desktop as that  would be too big and the x2 would be even bigger, no?

                                     

                                    Confused, you will be......and what image will the smartphone get if it has a standard res screen?

                                     

                                    In your following post you say the smart phone will get the 2x image but isnt that going to be really big for a smartphone?

                                     

                                    I can see why this is slow to be taken up because its massively baffling.

                                    • 15. Re: With regards to hiDPI image conversion...
                                      pziecina Level 6

                                      They will get the 1x image.

                                       

                                      The reason for this, is that when a browser is 'deciding' which image to use it 'queries' the image header info from the image file durring the process, (about 70-80 bytes). It is also worth mentioning that browsers may also select the image based on connection speed, and select then resize the image if it thinks that the connection speed is high enough and that the higher ppi image would be better.

                                       

                                      If you wish a specific image to be delivered, (you have cropped a specific region) then the srcset media-query attributes should be used, (in the html, not the css) possibly with the picture element. As i said simple to very complexed, the developer can decide.

                                      • 16. Re: With regards to hiDPI image conversion...
                                        osgood_ Level 8

                                        So if l create a 900px width image for the 1x tablet the smartphone gets the 900px 1x image as welll? l think l would need someting smaller for the smartphone if l was doing this correctly.

                                         

                                        As l have said in previous threads about this, there is not a hope in hell of this getting far if its this complicated, as far as l know no-one has addressed this issue with any intent or clear direction as yet and it sure as hell needs to be.

                                        • 17. Re: With regards to hiDPI image conversion...
                                          pziecina Level 6

                                          osgood_  wrote

                                           

                                          In your following post you say the smart phone will get the 2x image but isnt that going to be really big for a smartphone?

                                           

                                          I can see why this is slow to be taken up because its massively baffling.

                                          O/k.

                                          If you create an image at 96ppi that image will be displayed at actual size on a standard screen, but if that screen is 192ppi resolution the image will be half the original size, if the screen resolution is 3x96ppi then the image will be displayed at 1/3rd the original size.

                                           

                                          Higher screen ppi smaller image, so as screen size decreases the image count required does not increase. But as you say in a post, you are considering a hi-dpi display when you upgrade your system, that means that you will require a different image, (higher ppi) for that screen, as the old standard image will not be high enough quality.

                                           

                                          Now you know why this subject gets complicated very, very quickly

                                          • 18. Re: With regards to hiDPI image conversion...
                                            pziecina Level 6

                                            osgood_  wrote

                                             

                                            As l have said in previous threads about this, there is not a hope in hell of this getting far if its this complicated, as far as l know no-one has addressed this issue with any intent or clear direction as yet and it sure as hell needs to be.

                                            Actually it could be very, very simple, as just like css media-queries it only requires a few basic standard structures for 90% of user cases code wise. What is difficult is trying to explain the 'how to use' and the why and when the other 10% of cases should be used.

                                            • 19. Re: With regards to hiDPI image conversion...
                                              osgood_ Level 8

                                              So lets look at it like this. I create a file which for simplicity sake is 1mb in size at 96ppi. Are you saying that 1mb image  is good for tablet and smartphone if they have a high screen resolution. The image gets halved in size but where does the 1mb information go, does that also get halved along with the physical dimension size?

                                               

                                              Im trying to work out particularly for smartphone and tablet hidef screens why  would l want to supply those with massive image files, that surely is going to impact the dowload speed?

                                              • 20. Re: With regards to hiDPI image conversion...
                                                pziecina Level 6

                                                Sorry Os, but you are thinking in pre hi-dpi images.

                                                 

                                                Browsers in accordance with the specs use the intrinsic size of an image, that is the width and height values that is included in all image meta data, (it is a complete fallacy when people say meta data is not included). That data gives the width and height in the number of pixels to display, (width is the important value), and every browse device displays the image as 1 image pixel = 1 device pixel, (forger dppx).

                                                 

                                                The reason that image file sizes can be so large, is also because the color space information is also included. That is why an image of just one color, will be much smaller, (file size) than an image of 1 million colors when both images have the same width and height, plus any image compression used will also be a factor, as most gain the highest compression by 'playing with' the colour values in the image.

                                                • 21. Re: With regards to hiDPI image conversion...
                                                  osgood_ Level 8

                                                  Css media queries are a lot simpler for background images as they are not combined like srcset so you easily know what device is getting what image, it only starts getting  complex when retina starts being taken into consideration because you would need to used a different method to detetmine what the screen resolution is........and of course media queties only address bacground images not inline images.

                                                   

                                                  Srcset is relatively essy to understand if you are just wanting to serve images to standard resolution screens at specifuc window sizes but when retina is involved into the mix as well that were it starts getting confusing.

                                                  • 22. Re: With regards to hiDPI image conversion...
                                                    pziecina Level 6

                                                    You've got it in one .

                                                     

                                                    That's why I personally think a survey would have been helpfull, because then we would know what devices and more importanly what screen resolutions people are using. Without that info anything we say/do is nothing more than a long series if 'if's', whilst what we actually require is 'when' cases in order to help users understand which srcset/picture code to use, (and the number of images required).

                                                     

                                                    Now you have started me thinking about images on the web again, I am going to take a break, and try and forget it .

                                                    • 23. Re: With regards to hiDPI image conversion...
                                                      osgood_ Level 8

                                                      Disregarding retina  images we dont serve the same images to standard screen resolution, we should produce 3 images, desktoo, tablet and smartphone. In your previous post you seemed to imply that a 96dpi images at original size would be displayed at halve the size on a 192ppi resolution screen which seems simple enoough to follow but what happens to the file size, its still the same surely, its not been reduced?

                                                      • 24. Re: With regards to hiDPI image conversion...
                                                        pziecina Level 6

                                                        File size stays the same, but you supply a lower file size for users with a slower connection speed, (image optimization).

                                                        • 25. Re: With regards to hiDPI image conversion...
                                                          osgood_ Level 8

                                                          But surely this is something which should be known without having to conduct a survey. If l was the only person wanting to address the issue of serving up retina images what difference does it make. There should be clear, precise and proven  steps to use whether its using srcset or some scripting, there is no information out there which seems to me like a clear and reliable source to follow.

                                                          • 26. Re: With regards to hiDPI image conversion...
                                                            osgood_ Level 8

                                                            Lol, so now along with the retina images l have to supply an additional one for slow connection speeds,. Its a complete joke if ever there was one. Is it any wonder that developers dont seem to be rushing head first into this, let alone clients who upload their own images. If we dont understand what needs to be produced what chance do they and even if they do its highly unlikely that they are going to follow such a backwards workflow in producing so many image variants.

                                                             

                                                            Isnt someone working on an svg type method for images, that would solve everything?

                                                            • 27. Re: With regards to hiDPI image conversion...
                                                              B i r n o u Adobe Community Professional

                                                              well I have recorded a training for helping people to explore the use and feel of those feature... and what I did, (that was the only scenarii that came to my mind at that time to have an approach allowing to better start and take in hands the specs and techs...)

                                                               

                                                              so , I've proposed to add a training CSS file to each testing file...  that sheets handle and remove every margin, padding and sizing options... then to get a better decimal understanding was added a 62.5% font size on body (except if the user change manually the default browser font size...) that way em and rem became decimal... and are allow to get fluid tests... beside static tests

                                                               

                                                              then a very large image background (2500 width) is added to the page ... this image is just made of grids and repers

                                                               

                                                              after a different set of source image file was produced and provided ... those images are made of different size, resolution and a simple text describing on what device this image should appear and what are those specs (easy to catch when testing)

                                                               

                                                              so you understand how the result of the mix between displaying images on the page background give as result... and expectation

                                                              (on a specific debug style sheet / javascript real time, one get added a aboslute floating window, that describe and contains the code used)...

                                                               

                                                              for testing prupose, a responsive studio is made with tablet, smartphone, printer (PDF) ... android, Ios, VM Virtual box... and (well I know that you don't agree and like this but...) a grunt/gulp watch , connect , reload... tasks is running on background... that way one can directly see what's going on on each device...

                                                               

                                                              then to complete the studio, a use of browser stacks is recommanded...

                                                              • 28. Re: With regards to hiDPI image conversion...
                                                                pziecina Level 6

                                                                That's why we need a survey, the orginal iPhone retina was 186 ppi, (i think) but the iPhone X is 360ppi, a 22 inch hd monitor is 1080ppi, but a 22 inch 4k monitor is twice that. Then we have all the various tv screen sizes and resolutions, with many people using game consoles, also of various screen resolution outputs, plus the variation in tablet/laptop/desktops.

                                                                 

                                                                I'm not 100% certain that the Adobe forums are the best place for a survey of device/resolutions, due to the very small diversity in users, but it is all we have.

                                                                • 29. Re: With regards to hiDPI image conversion...
                                                                  B i r n o u Adobe Community Professional

                                                                  ah... I forgot to add.. that those test as you can figure out... don't need the training support to be done... everybody can do it on this reciept as one needs... but... but... if you really want the tests work... dont forget to empty browsers cache (check also the don't use cahce property)... because one the large image is loaded... browser don't bother to use (if that is require) the lower one

                                                                  • 30. Re: With regards to hiDPI image conversion...
                                                                    pziecina Level 6

                                                                    osgood_  wrote

                                                                     

                                                                    Isnt someone working on an svg type method for images, that would solve everything?

                                                                    Do not use svg for photo images, they work fine at very small changes in size, but if you try to shrink or enlarge them too much you will end up with an 'artists impression' due to the missing information for variations in color and shape changes.

                                                                    • 31. Re: With regards to hiDPI image conversion...
                                                                      r_tist Level 1

                                                                      Yes! Not rubbish, but raster imagery a little fuzzy. (I got a new Mac a few months ago - that's when I discovered the issue) I've spent time updating logos and like items to SVG. But then there's all the fine artwork raster images in a portfolio. This is why I need to know how to edit my specific light box use case so it would know which version to pull in... the regular 1x jpg or the 2x jpg. 

                                                                       

                                                                      <figure><a href="img/paintings/seaview.jpg" data-lightbox="Paintings" alt="Painting of the sea"></a></figure>

                                                                       

                                                                      I will check if my lightbox supports the srcset... As in your example... can you confirm for my knowledge that with this setup, the system automatically will select the correct img size based on user's screen? It somehow just "knows"? No other support script is needed?

                                                                       

                                                                      <a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">

                                                                      <img src="thumbnail.jpg" />

                                                                      </a>

                                                                       

                                                                      Thank you.

                                                                      • 32. Re: With regards to hiDPI image conversion...
                                                                        osgood_ Level 8

                                                                        I know not to use svg for images.....l was just suggesting its about time some bright spark came up with a similar solution for images that we can now use for graphics for any resolution screen.

                                                                        • 33. Re: With regards to hiDPI image conversion...
                                                                          B i r n o u Adobe Community Professional

                                                                          but in its own deep nature, a solution for resizing indefinitly graphics al ready exist...  that it is called SVG

                                                                          • 34. Re: With regards to hiDPI image conversion...
                                                                            osgood_ Level 8

                                                                            Hummm....if i get a retina display then oh joy, almost all the websites l visit are going to have fuzzy images.......what idiot thought that one up without coming up with a fallback solution......

                                                                            • 35. Re: With regards to hiDPI image conversion...
                                                                              osgood_ Level 8

                                                                              I know svg exists for graphic elements NOT images .....jesus are you and paula reading a different thread or so excited that youre just not reading things properly.

                                                                               

                                                                              I know this kind of thread/discussion wets the appetite of a few , which is positive, but keep up.

                                                                              • 36. Re: With regards to hiDPI image conversion...
                                                                                B i r n o u Adobe Community Professional

                                                                                well what you ask and propose as code... is a real merge of everything...

                                                                                • data-* attribut, is non natively used by HTML... but it allows us to preserve a correct HTML tagged document, but need to be use by JavaScript
                                                                                • <a> tag doesn't has any srcset attribute a – hyperlink (CHANGED) - HTML5

                                                                                so if I unerstand quite well, what you would like to set is have different link to a final image depending on the screen resolution and size ?

                                                                                I didn't dig i such a solution exist.. but I would personnaly use and refer to https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia

                                                                                • 37. Re: With regards to hiDPI image conversion...
                                                                                  B i r n o u Adobe Community Professional

                                                                                  so I missed your point ?... you want top mix graphics and image ?

                                                                                  • 38. Re: With regards to hiDPI image conversion...
                                                                                    pziecina Level 6

                                                                                    osgood_  wrote

                                                                                     

                                                                                    I know not to use svg for images.....l was just suggesting its about time some bright spark came up with a similar solution for images that we can now use for graphics for any resolution screen.

                                                                                    Believe it or not, that was part of the debate during the discussion regarding responsive image solutions, (when it started 8 years ago) and there was some progress made. The initial photo to image data trials worked well with regular shapes, (circles, squares and similar) but failed completely when it came to complexed photos, (no better than svg2) A persons face, or a cliff may at first glance appear to be simple to describe, but the amount of data required to do so turned out to be unviable for web images, (1mb image ended up at 5x the file size). It is the subtelties in shape changes and colour that cause the problems).

                                                                                     

                                                                                    There was even a suggestion of converting to fractal images in browsers. I don't think we have now reached the final ideas for responsive images, but as more people update to higher and/or larger hi-dpi screens then the problem will become more obvious to everyone, and the limitations of trying to adapt old workflows and solutions will i hope be finally thrown in the garbage where they belong.

                                                                                    • 39. Re: With regards to hiDPI image conversion...
                                                                                      osgood_ Level 8

                                                                                      Actually lm not asking anthing in specific just what is  considered the main stream approach to not only cater for standard resolutoin devices but also those with hidef displays when serving images to them.

                                                                                       

                                                                                      So far its just been a lot of hugely confusing replies as the OP is stlll asking what their code should look like to cater for retina devices. I have bought up a few questions in terms of serving mobile devices with large file because of the issues with download speed and bandwidth......so on the one hand for standard resolution devices we provide them with optimised images according to the window width yet on the other hand if they are hidef devices we provide twice or three times the image size  to cater for the resolution...........yet the download speed remains the same.

                                                                                      1 2 3 Previous Next