search

connectivedx / Phoenix

http://connectivedx.github.io/Phoenix/
33 stars 5 forks source link

Responsive Images #66

Closed ajmueller closed 9 years ago

ajmueller commented 9 years ago

I'd like to add some examples of responsive images. Opera has a great page with code snippets we can start from:

https://dev.opera.com/articles/responsive-images/

@kamsar, I believe you did some work with this in Sitecore?

kamsar commented 9 years ago

Yes, I made a rudimentary responsive image emitter that uses Sitecore's image rescaling features to automatically generate responsive (well, retina in that case) images.

On Oct 7, 2014, at 7:55 AM, Alex Mueller notifications@github.com wrote:

I'd like to add some examples of responsive images. Opera has a great page with code snippets we can start from:

https://dev.opera.com/articles/responsive-images/ https://dev.opera.com/articles/responsive-images/ @kamsar https://github.com/kamsar, I believe you did some work with this in Sitecore?

— Reply to this email directly or view it on GitHub https://github.com/isitedesign/Phoenix/issues/66.

ajmueller commented 9 years ago

Awesome. I assume the output markup is the standard picture element with a source element containing the srcset attribute?

EDIT: It would appear that the img tag has been updated to support srcset. I haven't been keeping up-to-date with this. Basically I just want to make sure we can output the proper markup with Sitecore. https://dev.opera.com/articles/native-responsive-images/

isite-jenkins commented 9 years ago

No it's an img with a srcset. Picture is massive overkill for a retina image (and srcset on img has much wider browser support)

ajmueller commented 9 years ago

Yep, I found another article by Opera and updated my above comment.

elseloop commented 9 years ago

(Jumping in just to share some related links I read recently…)

Jason Grigsby at Cloud Four wrote something last week about the benefits of srcset over <picture> and some of the inherent confusion between the two, even in the spec.

I'm guessing this path would also require bundling picturefill.js in the JavaScript vendor libraries? Scott Jehl wrote about the benefits and drawbacks of his polyfill recently as well.

ajmueller commented 9 years ago

Awesome, thanks Dan. The inclusion of picturefill is definitely something we should discuss. Considering the low support of srcset, we probably want to consider something. Unless we want to simply go the route of providing the default image as the fallback and just let the most modern browsers take advantage of what they support.

ajmueller commented 9 years ago

A recent ALA article that may be helpful: http://alistapart.com/article/responsive-images-in-practice

ajmueller commented 9 years ago

Closing this since we've added a basic example in #120 that has been merged into development.