# Episode 31 - Responsive Images **URL:** \ **Category:** RapidWeaver Classic\ **Tags:** picture, podcast\ **Created:** [March 3, 2016, 6:59pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670 "2016-03-03T18:59:02Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)\ **Post date:** [March 3, 2016, 6:59pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/1 "2016-03-03T18:59:02Z")
Thanks again for the continued Podcasts! RE: Picture Tag 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. my 2cents 🙂 Brad ---
**Author:** ![instacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/instacks/32/23339_2.png) [@instacks](https://forums.realmacsoftware.com/u/instacks)\ **Post date:** [March 4, 2016, 7:15am UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/2 "2016-03-04T07:15:43Z")
[http://caniuse.com/#feat=picture](http://caniuse.com/#feat=picture) ---
**Author:** ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)\ **Post date:** [March 5, 2016, 12:52am UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/3 "2016-03-05T00:52:12Z")
A current list of [unresolved issues](https://github.com/ResponsiveImagesCG/picture-element/issues?q=is%3Aopen) with the tag. 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… Brad ---
**Author:** ![mark](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mark/32/145_2.png) [@mark](https://forums.realmacsoftware.com/u/mark)\ **Post date:** [March 6, 2016, 8:39am UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/4 "2016-03-06T08:39:56Z")
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? Appreciate any help or guidance. Regards Mark ---
**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\ **Post date:** [March 6, 2016, 2:41pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/5 "2016-03-06T14:41:25Z")
> [@mark](#): > > Could I use the Image Foundation Stack in a none Foundation Themed project? No, you can not do this. ---
**Author:** ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)\ **Post date:** [March 6, 2016, 2:42pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/6 "2016-03-06T14:42:32Z")
@mark > [@mark](#): > > 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. Not really, they are implying load time for each device… > [@mark](#): > > 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. True > [@mark](#): > > 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. Other framework type themes offer the same type of things as the Foundations Pack > [@mark](#): > > 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? 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 Brad ---
**Author:** ![instacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/instacks/32/23339_2.png) [@instacks](https://forums.realmacsoftware.com/u/instacks)\ **Post date:** [March 6, 2016, 3:21pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/7 "2016-03-06T15:21:21Z")
You need a single image stack, or an gallery of images? ---
**Author:** ![mark](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mark/32/145_2.png) [@mark](https://forums.realmacsoftware.com/u/mark)\ **Post date:** [March 6, 2016, 6:19pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/8 "2016-03-06T18:19:00Z")
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. Regards Mark ---
**Author:** ![instacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/instacks/32/23339_2.png) [@instacks](https://forums.realmacsoftware.com/u/instacks)\ **Post date:** [March 6, 2016, 6:50pm UTC](https://forums.realmacsoftware.com/t/episode-31-responsive-images/5670/9 "2016-03-06T18:50:42Z")
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/](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 🙂