One source (Mozilla) says it is experimental, not full endorsed or settled and lacks mobile browser support except for iOS Safari 9.3
Another source says it is standardized and shows how to use it, but also shows that only current browsers support it and again only mobile support is Android browser 47+ and IOS Safari 9.3+
To me, I don’t think basing projects off this is feasible yet until it is more widely adopted, settled on and becomes a bonified standard that works mobile up to desktop fully.
I still think it experimental and if a web site developer is wanting to cover as much compatibility as possible this is still in the “just a little more support needed” category for me.
It’s use by a Third Party Developer would not stop me from purchasing said developers Stacks, Plugins or Themes that use it though as an aside…
In the podcast Ben and and Dan appeared to imply that for responsive images to work properly you need to add a number of separately sized versions of the same image for each device. So you’d probably end up with 3 images one for Mobile, one for Tablet and one for Desktop, and you would use css to serve the correct image to the appropriate device.
There are a number of Responsive Image stacks out there, but most of them appear to just re-scale (the dimensions) of a single image depending on browser size, so I assume the size (in kb) of the image downloaded to the device remains the same.
The only image stack I currently have that provides the facility to add 3 separate versions of the same image is Joe Workmans Foundation Image stack.
Is my understanding of this correct?
Could I use the Image Foundation Stack in a none Foundation Themed project?
Is there a stack available that allows you to add multiple versions of the same image that can be used across all themes?
Not really, they are implying load time for each device…
True
Other framework type themes offer the same type of things as the Foundations Pack
You are correct, No, you cannot use Foundation specific stacks in non-foundations pages! They all look for the Foundation Theme and the Foundation Styles Stack…
There is none that I am aware but I do not have every stack out there being an independent volunteer, there is only so much $$ to go around lol
I was thinking about just a single image, but I guess my question applies equally to a gallery of images - I’m more trying to sort out how to deal with responsive images correctly in Rapidweaver, rather than for a specific project.
The default image stack already has some kind of responsiveness included.
If you add a large image (e.g. 4000 x 3000 px) and define the output to 1200 px max., 2 images will be exported:
one with 1200 x 900
one with 2400 x 1800 (suffixed @2)
In addition, the image contains the srcset attribute (http://www.sitepoint.com/how-to-build-responsive-images-with-srcset/) At least with this, on a HiDPI display, you get the higher density picture. But it will not distinguish between mobile and desktop.
I am working on an upgrade to include high density pictures in a gallery
