I need a little help here. If I use the image stack in Source, it offers a choice of 4 image sizes. What px dimensions might these be? I would be using the default Source settings, so max width of 1140. Would I be right in thinking that 1140px would be the X-L size? I can’t see anywhere what the S-M-L sizes would be. Are they where the break points are? Where do I set the break points?
(I am a long-time RW user, trying to keep up!).
Many thanks in advance.
hi @fergus
Yes - the Source image stack allows you to add up to 4 separate images that would be switched out at the different breakpoints (the BPs in Source are 600px, 900px and 1200px).
So, if you were wanting to use all 4 (and wanted to make sure that they were full width at all sizes then yes - you would want one the small one at least at 600px, the medium one at least 900px, the large one 1200px, the x-large one is for devices wider than 1200px so you would maybe add a 2000px (but if you are using in a max-width container as you say then you wouldn’t need the x-l).
If you wanted to supply retina images you would want to supply images double these widths.
The other option is just adding a single 1140px wide image into the small image and this single image will be used on all devices. This will work fine but of course you lose out on potential file size savings (for the web page visitor) / being able to use different images for different device sizes / different aspect ratios for different devices etc.
Hope this answers your question?
Thanks - I understand, I think. It has always confused me a bit, and in Foundation, I have always simply stuck one image in the small option. But I am redoing my sites, which are a few years old, and thought I should try and get this more right.
I might end up using Srcerer, since it covers the retina issue as well, although it is probably overkill for my needs
Your Retrobatch workflow was very helpful.
Best wishes
Yes - for a fully-fledged approach to responsive images Srcerer is a great option. Especially on sites where images are central.
The 4 images available via Source Image stack should meet most needs though.
Any further questins just ask :)
Hi,
just to ask about source v Srcerer, am I right in thinking that Source isn’t as “advanced” as Srcerer in some regards. For example for setting background images Source has up to 4 options, would Source download all 4 images but only display the one that fitted best, whereas Srcerer determines the screen size and downloads the best option only?
Just trying to get my head round a few things and staring to work my way through the Lawyer project, good so far :)
Cheers,
Paul
Hi @pmjd -
Srcerer is a way more advanced and flexible image stack but the Source one works in the same kind of way. If you have supplied all 4 possible images then only the one appropriate for whatever device size it is being viewed on will be loaded and displayed.