Episode 31 - Responsive Images


(Brad Halstead) #1

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 :slightly_smiling:
Brad


(Jannis from inStacks Software) #2

http://caniuse.com/#feat=picture


(Brad Halstead) #3

A current list of unresolved issues 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


(mark hunter) #4

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


(Robert Ziebol 🖖🏼) #5

No, you can not do this.


(Brad Halstead) #6

@mark

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

Brad


(Jannis from inStacks Software) #7

You need a single image stack, or an gallery of images?


(mark hunter) #8

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


(Jannis from inStacks Software) #9

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:

I am working on an upgrade to include high density pictures in a gallery :slight_smile: