• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

OT: Srcset

LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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

Views

904

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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"

/>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2017 Feb 19, 2017

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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)."

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

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!!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines