29 Replies Latest reply on Feb 20, 2017 1:21 PM by pziecina

    OT: Srcset

    osgood_ Level 8

      What width of images are you using, assuming you are using 3 - desktop, tablet, mobile?

       

      I just saw one of the companies I follow are now using srcset, so its time for me to follow. I think. Mind they are not using it very well as they are just resizng the orginal images width (quick and very dirty) so by time it gets to tablet and smart phone it looks stupid. The only way is to individually crop the image if you want to maintain a sensible ratio of height to width.

       

      At this stage I'm not concerned with retina, just need to keep it simple to try and save on download time.

       

      Os

        • 1. Re: OT: Srcset
          Nancy OShea Adobe Community Professional & MVP

          In Phothsop, I use ExportAs 1x,  2x and 3x. 

          For a full sized, square product image, I would probably use @1x 500 x 500,  @2x 700 x 700 and @3x 900 x 900 adjusting quality slider down to around 100-150KB for the largest image.   The smallest image around 30-40 KB.

           

           

           

          Nancy

          • 2. Re: OT: Srcset
            pziecina Adobe Community Professional

            I'm on my iPad at the moment, so specifics are only what I can remember.

             

            Nancy's info is usefull, but only if you are using the resolution srcset, which is not the most usefull except in limited circumstances, (plus i would, Not recommend using Ps's settings, but that another subject).

             

            The srcset atribute you should be looking at using is the 'sizes' atribute, which functions the same as a css media-query, but is part of the html srcset, (in fact the code is almost the same).

             

            If you look at the responsive image working group, (the ones who developed srcset and picture) you will see an example of using sizes -

            https://responsiveimages.org

             

            Basically you are creating an image that is specific in size to the device viewport, but don't forget that ppi will also be calculated by the drowser/device when it decides which image to download for use.

            • 3. Re: OT: Srcset
              pziecina Adobe Community Professional

              osgood_  wrote

               

              At this stage I'm not concerned with retina, just need to keep it simple to try and save on download time.

              This is built in to the browser calculation for which image to display, and is why many current examples of using srcset are wrong.

               

              Info, warning when using resolution images, (1x, 2x etc) - Edge, Firefox will use the image with the resolution you say it is. Chrome, Opera will use the image that best fits in the defined area for the image, modified by download speed and resolution even when using a desktop browser.

              • 4. Re: OT: Srcset
                osgood_ Level 8

                So you're using 900px, 700px and 500px, is 900px wide enough for large screens, without it breaking down?

                 

                I was thinking of using 2000px 1000px and 500px myself.

                • 5. Re: OT: Srcset
                  osgood_ Level 8

                  pziecina  wrote

                   

                  osgood_   wrote

                   

                  At this stage I'm not concerned with retina, just need to keep it simple to try and save on download time.

                  This is built in to the browser calculation for which image to display, and is why many current examples of using srcset are wrong.

                   

                  Info, warning when using resolution images, (1x, 2x etc) - Edge, Firefox will use the image with the resolution you say it is. Chrome, Opera will use the image that best fits in the defined area for the image, modified by download speed and resolution even when using a desktop browser.

                   

                   

                  I'm not really using that, I'm currently going with:

                   

                  img src="image_large_2000.jpg" alt=""

                  srcset ="image_large_2000.jpg 2000w,

                  image_medium_1000.jpg 1000w,

                  image_small_500.jpg 500w"

                  />

                  • 6. Re: OT: Srcset
                    Nancy OShea Adobe Community Professional & MVP

                    For a full-width banner?

                    My example is for a product image which doesn't consume 100% of viewport.  More like 30-50% depending on layout.

                     

                     

                    Nancy

                    • 7. Re: OT: Srcset
                      osgood_ Level 8

                      https://forums.adobe.com/people/Nancy+OShea  wrote

                       

                      For a full-width banner?

                      My example is for a product image which doesn't consume 100% of viewport.  More like 30-50% depending on layout.

                       

                       

                      Nancy

                       

                       

                      Ok, and for full width of browser window?

                      • 8. Re: OT: Srcset
                        Nancy OShea Adobe Community Professional & MVP

                        Full-width foreground images are problematic.    2000px might cover it or it might not be wide enough.  More often than not,  I use background-size cover and 1000px for the largest. 

                         

                         

                        Nancy

                        • 9. Re: OT: Srcset
                          pziecina Adobe Community Professional

                          I would not worry about image width, use what you want that fills the respective area. Remember on desktop or larger your user will normally be on a home/office broadband connection, so speed and bandwidth is not a problem.

                           

                          Also you can have as many image src's as you like in the srcset selection.

                          • 10. Re: OT: Srcset
                            osgood_ Level 8

                            https://forums.adobe.com/people/Nancy+OShea  wrote

                             

                            Full-width foreground images are problematic.    2000px might cover it or it might not be wide enough.  More often than not,  I use background-size cover and 1000px for the largest. 

                             

                             

                            Nancy

                             

                             

                            I usually do to but you have more control over what parts of the images show using inline images so now srcset is ready (I think) I thought I might try switching to using that instead.

                            • 11. Re: OT: Srcset
                              pziecina Adobe Community Professional

                              https://forums.adobe.com/people/Nancy+OShea  wrote

                               

                              Full-width foreground images are problematic.    2000px might cover it or it might not be wide enough.  More often than not,  I use background-size cover and 1000px for the largest. 

                               

                               

                              Nancy

                              You can also use the css img-set property for background images. It is only supported by Chrome, Safari, Opera, iOS and Android, but as those just about cover 99% of mobile devices !!!

                               

                              img-set only allows the resolution atribute at the moment, but it is undergoing a review to decide if it should be more close to srcset spec wise.

                              1 person found this helpful
                              • 12. Re: OT: Srcset
                                osgood_ Level 8

                                pziecina  wrote

                                 

                                I would not worry about image width, use what you want that fills the respective area. Remember on desktop or larger your user will normally be on a home/office broadband connection, so speed and bandwidth is not a problem.

                                 

                                Ok, well I think 2000 will do it for desktop and it can still be enlarged without losing too much quality.

                                 

                                pziecina  wrote

                                 

                                 

                                Also you can have as many image src's as you like in the srcset selection.

                                 

                                 

                                Yes but I only intend to use 3 max as there will be so much more extra work involved if done properly. You simply cannot in my opinion just reduce a 2000px wide image to 1000px and then to 500px without ajdusting the depth. The proportion just looks all wrong on mobile devices. Each image needs to be cropped individually so I expect I'll only be doing the hero images.

                                • 13. Re: OT: Srcset
                                  pziecina Adobe Community Professional

                                  osgood_  wrote

                                  pziecina   wrote

                                   

                                   

                                  Also you can have as many image src's as you like in the srcset selection.

                                   

                                   

                                  Yes but I only intend to use 3 max as there will be so much more extra work involved if done properly. You simply cannot in my opinion just reduce a 2000px wide image to 1000px and then to 500px without ajdusting the depth. The proportion just looks all wrong on mobile devices. Each image needs to be cropped individually so I expect I'll only be doing the hero images.

                                  That's the way we have gone with images. It means a little extra work, but the results are a lot better.

                                   

                                  OT - I did suggest that we need a Ps to Dw workflow for doing this in the pre-release, but except for David  and Nancy there was little support, (mainly Ps users objected, saying 1x, 2x was all that was required).

                                  • 14. Re: OT: Srcset
                                    osgood_ Level 8

                                    pziecina  wrote

                                     

                                    osgood_   wrote

                                    pziecina    wrote

                                     

                                     

                                    Also you can have as many image src's as you like in the srcset selection.

                                     

                                     

                                    Yes but I only intend to use 3 max as there will be so much more extra work involved if done properly. You simply cannot in my opinion just reduce a 2000px wide image to 1000px and then to 500px without ajdusting the depth. The proportion just looks all wrong on mobile devices. Each image needs to be cropped individually so I expect I'll only be doing the hero images.

                                    That's the way we have gone with images. It means a little extra work, but the results are a lot better.

                                     

                                    OT - I did suggest that we need a Ps to Dw workflow for doing this in the pre-release, but except for David  and Nancy there was little support, (mainly Ps users objected, saying 1x, 2x was all that was required).

                                     

                                    I'm using Sketch for Mac to export images but its of little use, that has 1x, 2x and 3x, completely useless in my opinion. Photoshop has more control for cropping images so I expect I'll wander back to that.

                                    • 15. Re: OT: Srcset
                                      pziecina Adobe Community Professional

                                      osgood_  wrote

                                       

                                      I'm using Sketch for Mac to export images but its of little use, that has 1x, 2x and 3x, completely useless in my opinion. Photoshop has more control for cropping images so I expect I'll wander back to that.

                                      Hopefully someone in the Dw CAB program will read the above, and let the team know that the current options are not enough.

                                       

                                      Not holding my breath though!

                                      • 16. Re: OT: Srcset
                                        osgood_ Level 8

                                        Trying to decide when to go with this is a headache.

                                         

                                        srcset doesnt work in either Chrome or Firefox on my tablet or smartphone so I guess they are non-compatible browser versions. The issue I see is how many people actually update the browsers on their mobile devices frequently?

                                         

                                        I'm a web-developer, know something about it but I never update my mobile browsers unless I need to see a supported css attribute like srcset or flex was the last time I had to update. The desktop browsers seem to update themselves.

                                         

                                        This kills srcset stone dead in production use for me personally as I dont want uncompatible mobile browsers (there must be millions in use still) to fall back on the desktop sized image because its the wrong proportions for mobile devices.

                                         

                                        I'll have to stick with background images for now. Reajust the width/height and the depth of the container so at least the design doesnt look like an after thought, as many do on mobile devices. Most developers still only seem to be designing for desktop and not really addressing layout issues in mobile. I can see why as done properly it requires a huge amount of testing, which I guess budget restrictions just cannot entertain.

                                         

                                        Frustrated. It's here we cant use it beacuse either browsers dont yet support it and when they do we have to wait for users to update their browsers!!!!!!!

                                         

                                        zzzzzzzzzzzzzzzzzzzzzzz

                                         

                                        Os.

                                        • 17. Re: OT: Srcset
                                          pziecina Adobe Community Professional

                                          osgood_  wrote

                                           

                                          Frustrated. It's here we cant use it beacuse either browsers dont yet support it and when they do we have to wait for users to update their browsers!!!!!!!

                                          That's always been the case.

                                           

                                          Personally I don't have the problem. I work 6-18 months in advance of what I produce being implemented as part of a module, which may sound harder to work with, but it actually makes what to support a lot easier.

                                          • 18. Re: OT: Srcset
                                            osgood_ Level 8

                                            According to can l use srcset should work in Android Firefox and Chrome if you have the current browsers but it doesnt according to my tests and other online examples that l have been reviewing. If you use the picture tag it does. A lot of tutorials  provide examples where they reduce the size of the brower window on a desktop browser to show how it works, whats to point in that, thats not the reason for using srcset and not how to test if it works or not.

                                             

                                            Do you think if l was to use the table tag, the font tag and possibly frames  todays browers would support them, lm not sure. I dont want to be getting to far ahead of the game.

                                            • 19. Re: OT: Srcset
                                              pziecina Adobe Community Professional

                                              If you are using the 'w' descriptor, as in your code example -

                                               

                                              img src="image_large_2000.jpg" alt=""

                                              srcset ="image_large_2000.jpg 2000w,

                                              image_medium_1000.jpg 1000w,

                                              image_small_500.jpg 500w"

                                               

                                              Then it will not work correctly.

                                              Pre iOS9 and Android 5.4 only recognize the resolution attribute, and devices after that should use the sizes attribute in order to give the correct image.

                                               

                                              Also the resizing of browser viewports is completely unreliable for testing srcset, as some browsers will download the new image, some will not.

                                              • 20. Re: OT: Srcset
                                                osgood_ Level 8

                                                Ok its back to the old tried, trusted and tested methods until this unravels when ever that might be.

                                                 

                                                I cant really be using something that is not more widely available. Those that do are hugely blinkered, ignorant or just hopeful. Not sure what they do if the client turns around and says can you make the image deeper on the tablet or smartphone because its being served the skinny default desktop image. At least using backround images that can be done.

                                                 

                                                Srcset at the moment isnt worth the paper its written on until more devices, browers support it correctly, only then will it be production ready in my opinion.

                                                • 21. Re: OT: Srcset
                                                  pziecina Adobe Community Professional

                                                  osgood_  wrote

                                                   

                                                  Ok its back to the old tried, trusted and tested methods until this unravels when ever that might be.

                                                   

                                                  I cant really be using something that is not more widely available. Those that do are hugely blinkered, ignorant or just hopeful. Not sure what they do if the client turns around and says can you make the image deeper on the tablet or smartphone because its being served the skinny default desktop image. At least using backround images that can be done.

                                                   

                                                  Srcset at the moment isnt worth the paper its written on until more devices, browers support it correctly, only then will it be production ready in my opinion.

                                                  Guess what, I disagree

                                                   

                                                  srcset can be used now, the problem is similar to what those who are against flexbox have. Lack of understanding.

                                                   

                                                  It takes time to learn something new, and even though srcset appears simple, it is not.

                                                   

                                                  Taking your code as an example, (whoever gave it to you, does not know what they are doing) -

                                                  The W3C specs, clearly says -

                                                   

                                                  "The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image)."

                                                  and

                                                  "If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present, and is a sizes attribute. The sizes attribute contributes the source size to the source set (if no source element was selected)."

                                                   

                                                  It is an 'and' not an 'or'. That means both must be present when using the 'w' descriptor.

                                                   

                                                  e.g. -

                                                  <img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"

                                                    src="wolf-400.jpg" alt="The rad wolf">

                                                   

                                                  https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

                                                   

                                                  I spent a lot of time over a number of weeks learning how and what to use, testing in various browsers and devices, and would still not say I know how and what to use, I only know what to use for what I require.

                                                  • 22. Re: OT: Srcset
                                                    osgood_ Level 8

                                                    OK so I was missing:

                                                     

                                                    sizes="100vw"

                                                     

                                                    This seems to have evoked the correct image in chrome 56 on Android but Firefox 51 is still getting the default, large desktop image.

                                                     

                                                    Smartphone still gets the large image so I'm guessing chrome and firefox on that device are less that what is necessary which concerns me as there must be zillions of users with devices with less than adequate browser support for what is being fed, which probably means the layout is not what the developer is expecting it to be.

                                                     

                                                    Not sure why Firefox 51 is not playing ball though, according to 'Can I use' srcset is supported.

                                                    • 23. Re: OT: Srcset
                                                      pziecina Adobe Community Professional

                                                      osgood_  wrote

                                                       

                                                      OK so I was missing:

                                                       

                                                      sizes="100vw"

                                                       

                                                      This seems to have evoked the correct image in chrome 56 on Android but Firefox 51 is still getting the default, large desktop image.

                                                       

                                                      Smartphone still gets the large image so I'm guessing chrome and firefox on that device are less that what is necessary which concerns me as there must be zillions of users with devices with less than adequate browser support for what is being fed, which probably means the layout is not what the developer is expecting it to be.

                                                       

                                                      Not sure why Firefox 51 is not playing ball though, according to 'Can I use' srcset is supported.

                                                      It used to be thought that mobile devices would be upgraded to newer models by users after about 5 years, (estimated battery life). The disproof of that is in Cex, (or any second hand electronics store) if you visit them, you will still see iPhone 2's available for sale, iPad 1's and Old Android v2/4 devices.

                                                       

                                                      The mobile market has taken over from the desktop, not just in the number of users, but as far as being an unknown for web design/development, and just like desktops, there comes a point when the designer/developer must decide for themselves when to use a new method. This will be different for everyone, and educating clients as to this is not always an option.

                                                       

                                                      If you like, think of it as the decision when/if to move over to Muse

                                                       

                                                      For firefox 51, the sizes may not be giving enough info, or the images do not match what the calculation says it should, so it is defaulting to the src image, (this is correct behaviour) -

                                                      e.g. -

                                                      sizes="(min-width: 600px) 200px, 50vw"

                                                      means -

                                                      "When the (min-width: 600px) media condition matches, the image will be 200px wide, otherwise it will be 50vw wide (50% of the viewport width)."

                                                      • 24. Re: OT: Srcset
                                                        pziecina Adobe Community Professional

                                                        Just thought I would point out -

                                                        The only thing I found easy about using srcset, was when using the same image size but different resolution, (e.g. 1x, 2x, 3x).

                                                         

                                                        Think of it like learning html layouts all over again, but with media-queries thrown into the html, just to complicate things.

                                                        • 25. Re: OT: Srcset
                                                          osgood_ Level 8

                                                          pziecina  wrote

                                                           

                                                          osgood_   wrote

                                                           

                                                           

                                                           

                                                          For firefox 51, the sizes may not be giving enough info, or the images do not match what the calculation says it should, so it is defaulting to the src image, (this is correct behaviour) -

                                                          e.g. -

                                                          sizes="(min-width: 600px) 200px, 50vw"

                                                          means -

                                                          "When the (min-width: 600px) media condition matches, the image will be 200px wide, otherwise it will be 50vw wide (50% of the viewport width)."

                                                           

                                                           

                                                          I think I missed something vital out in the confusion:

                                                           

                                                          <meta name="viewport" content="width=device-width, initial-scale=1.0">

                                                           

                                                          Even more confusing even without the viewport meta tag Chrome still worked.

                                                           

                                                          Even more confusing I tried the <picture> tag with hit and miss results until I include the viewport meta tag.

                                                           

                                                          Even more confusing I think I might like the <picture> tag solution better.

                                                           

                                                          I'll go through each solution again tomorrow and try an pin it down making sure I include all the necessary mark-up!!!

                                                           

                                                           

                                                           

                                                          • 26. Re: OT: Srcset
                                                            osgood_ Level 8

                                                            pziecina  wrote

                                                             

                                                            If you like, think of it as the decision when/if to move over to Muse

                                                             

                                                             

                                                             

                                                            That's not going to happen in my lifetime. I'll advertise myself as a dog-walker/sitter instead. (probably make more money anyway)

                                                            • 27. Re: OT: Srcset
                                                              pziecina Adobe Community Professional

                                                              osgood_  wrote

                                                               

                                                              Even more confusing I think I might like the <picture> tag solution better.

                                                               

                                                              I'll go through each solution again tomorrow and try an pin it down making sure I include all the necessary mark-up!!!

                                                              You are on your own with 'picture'

                                                               

                                                              I gave up with it, once I tried to work out how it fitted in with using 'figure' and 'figcaption'.

                                                              • 28. Re: OT: Srcset
                                                                osgood_ Level 8

                                                                pziecina  wrote

                                                                 

                                                                osgood_   wrote

                                                                 

                                                                 

                                                                 

                                                                I gave up with it, once I tried to work out how it fitted in with using 'figure' and 'figcaption'.

                                                                 

                                                                 

                                                                Hummm just throw another problem into the mix, why dont you. I'll just probably forget about the figure/figcaption

                                                                • 29. Re: OT: Srcset
                                                                  pziecina Adobe Community Professional

                                                                  LOL