stripped logo

4 powerful stacks focussed on the responsive delivery of your images

Srcerer features

Srcerer has been designed to meet some particular needs, and to overcome particular challenges, that designing for the modern web requires. Here are just a few of the things that the Srcerer stacks can help you with:

  • The huge range of screen sizes that you need to cater for (from a small phone right through to the widest retina displays)
  • The different resolutions of these devices (i.e. 1x, 2x, 3x)
  • Presenting different versions of an image depending on device (i.e. different shapes, sizes, aspect ratios, focal points)
  • Speed improvements (by serving only the most appropriate image for the device - i.e. a small image on a mobile device)

Responsive image solutions such as this are key for speed and Search Engine Optimisation (SEO). Srcerer stack makes providing responsive images in this way a breeze!

And, of course, Srcerer helps you make your images look amazing too!

Hugely flexible image delivery

Supply an appropriate image (width and content) to every device

Search Engine Optimisation

Delivering the right sized image is fast which is key for SEO

display options

Show just the image in all its glory or add content / create a card. You can even add hover, blending and parallax effects!

Modern lightweight coding

Using only the latest approaches to HTML and CSS code to achieve to deliver responsive images

All images on this page have been added using Srcerer. Including the parallax header! (The only exception is the logo / icons. There would be no advantage in using Srcerer for small fixed width images such as these)

The Srcerer stacks

1. Sizes stack

This stack (the original Srcerer stack) allows you to add up to 8 different width versions of the same image. The code that Srcerer creates gives the browser enough information for it to be able to serve the most appropriately sized image for whatever device is being used. You can even supply information about how your images are used for even more efficient results!

Summary: Use to improve the speed and efficiency of image delivery and ensure a great quality image is displayed on every device.

Sizes video overview

The videos below demonstrate Srcerer (Sizes) stack in action.

Sizes Overview

A demonstration of Srcerer in action showing how different viewing devices can be shown different versions of an image.

Creating and Linking Images

A demonstration of how to create your image 'set' and then easily link these to Srcerer stack.

2. Art Direction stack

This stack allows you to use different versions / compositions of the same image at different breakpoints. This means that you can make sure that the important part of any image is clear and central on any device. (Note: You can of course use different images for each breakpoint however be aware that all included images will share the same Alt tag). You can add up to 4 different versions of an image.

Summary: Use to ensure that the key message / focus area in your images is clear on every device.

3. WebP stack

This stack allows you to make use of the WebP image format. This format is well worth checking out if you don't already know about it as the file sizes are tiny with no loss of quality. The stack also allows for a fallback image that would be used in browsers that cannot yet use WebP images (most now can though!).

Summary: Useful for a quick and easy image stack and for where there is no need to supply different versions / sizes of the image.

4. Single stack

This stack is not concerned about responsive image delivery. It is simply a way for you to use a single image and access all of the great effects and options that Srcerer stack offers. It is perfect for images that are a fixed width on all devices and therefore would not benefit much from enabling alternative versions.

Summary: Useful for a quick and easy image stack and for where there is no need to supply different versions / sizes of the image.

Srcerer Examples

1. Srcerer (Sizes)

Consider the image above

This is set to show at the full site (content) width, which, on this particular page, will be a maximum width of 1120px on desktop. On all devices with a screen size less than this width, the image will take up 100% of the available space. On a non-retina mobile phone (in portrait mode) this could be as small as 320px. Perhaps surprisingly, on (for example) a 10.5" iPad Pro, the required image size will actually be greater than 1120px as it has a resolution that equates to 2224x1668px (in landscape mode that is almost twice the width of the image required for desktop!).

So what size of image do we provide in our RW project?

Do we cater for the maximum possible size on desktop (in this case 1120px) or do we go somewhere between that and a mobile device width (maybe 800px) that might still look acceptable on a desktop when displayed at 1120px? Or do we provide an image good enough to take full advantage of the screen on an iPad Pro?

If we go for the desktop size of 1120px then we can guarantee that the image will look good on all devices. (It won't look as good as it could on an iPad Pro but would still look ok). But providing an image of this size would come at a cost when viewed on a mobile device. Check out the table to see the differences in file size that this image has at various different widths.

Width (px) File size (kb)

You'll see that for this single image alone, if the 1120px image is loaded on a 320px (non-retina) mobile phone it will use over 200KB more than the 320px version would have required. That's a very considerable difference and obviously If you scale this up for multiple images on a page then you can see that quite quickly the unnecessary data usage would soon add up and speed on poor connections would be significantly slowed down.

So what is the alternative?

Glad you asked. Step up Srcerer (Sizes) stack. With Screrer you can supply up to 8 different versions (at different widths) of the same image. And then it's over to the browser to work its magic. Browsers these days (with the obvious exception of IE11) can use the information provided by Srcerer stack to intelligently select which image is best to use for whatever screen size it is being viewed on.

How does Srcerer (Sizes) work?

Well, to answer that let's have a look at the generated code for the city image on the main page:

<img class="srcerer-img" alt="image" 
srcset=" 320w, 640w, 768w, 1024w, 1120w 1366w, 1600w, 1920w" 
sizes="(max-width: 1120px) 100vw, 1120px">

We can see we have a src element which is a link to our default/fallback image. This will be used on the likes of IE11 and any other browser that can't work with the srcset element.

It is the srcset part of the code that we list all of our available images along with a note of their width (e.g. the 640w part).

Finally, the sizes part of the code allows us to supply even more information to the browser. Using Srcerer stack, as default, the information sent to the browser will ask it to base the image choice on only the device width. The Sizes element allows us to also add in information about how much of the screen the image will use at different breakpoints. For example, in the code above, we can see that for devices up to our maximum width (of 1120px) should base the decision on 100% of the Viewport Width (vw). On devices over 1120px, the browser should instead only serve the image that is appropriate for use at 1120px (as there is no point in serving a wider image). This same approach can be used for when images are placed in columns and therefore might be displayed at a considerably smaller width than the device/screen width.

Remember: Speed is key for SEO optimisation and so any data/speed savings that can be made for mobile devices are worth making

And what about retina / HD device screens?

Browsers are clever enough for this too. If someone is viewing on a 320px wide iPhone that has a 2x resolution screen then it will be served the 640px image.

This all sounds a bit complicated

It needn't be. At least not with Srcerer stack. Srcerer is set up to do all of the 'heavy lifting'. All you need to do is tell it where your images are. And, if you want to, tell it about how much space on the published page the image will use at different breakpoints.

It's really quite simple.

See Srcerer in action

On the main page you will see a note of which width of image has been served to you in the top-right corner of the city image. If you are on a desktop try reducing your browser width and then hitting refresh. You should see the supplied image change to a more appropriate one.


2. Srcerer (Art Direction)

Consider the image above

This looks fine on a large screen and the family within the image can be clearly seen. On a mobile device however, this same image would be too small to be able to properly see the people. Obviously if the subject / focal point of the image is important then this is an issue.

How can art direction help?

Srcerer (Art Direction stack) allows you to add up to 4 different versions of an image that will be switched out at 3 different breakpoints. You can therefore frame / size / crop the original image however you like for each breakpoint to ensure that the focal points of the image are not lost on any device. For the image above we might opt to create a cropped version of the image that we would show on mobile devices like so:

Can object-fit: cover not do this?

There are ways that you can use CSS (such as object-fit: cover) to size and crop your image however there is very little control over this and therefore is extremely difficult to get the framing right on each device. With Srcerer those framing and 'art direction' decisions are yours, as a designer, to make and then implement.

What else is the Art Direction approach good for?

This is great for creating bespoke banner images that will display exactly as you need them to on all devices. You can, for example, create up to 4 distinct versions of a banner image and select on what screen size each should be shown at. No longer are you left to guess how your artwork / images will display across devices.

What about different widths/resolutions of devices?

As well as being able to link up to 4 different versions of an image, Srcerer Art Direction stack also gives you the option of linking 2x and 3x versions of the images too. If these have been included then (like with the Sizes stack) the browser will select the most appropriate version for any device.

How does Srcerer (AD) work?

Here is the generated code for the family on the beach image that we looked at on the main page:

<source media="(max-width: 768px)" srcset=",[email protected] 2x">
<source media="(min-width: 768px)" srcset="">
<img class="srcerer-img" alt="beach scene" src="">

Unlike the Srcerer (Sizes) stack (where all of the code is included within the img tags), the Art Direction version puts the code within picture tags.

For however many images that we have opted to include (2 in this example), we can see source tags that contain all of the required information about each image - i.e. their location and the breakpoint at which they should be switched out. If 2x (or 3x) versions have also been included, then details of these versions are included too.

Finally, a regular img tag is used to hold information about our default / fallback image. And it is this tag that the relevant source image will switched into when rendered on screen.

And what about retina / HD device screens?

You can opt to include 2x (and 3x) versions of any image version. Srcerer will add these versions to the code and the browser will select the most appropriate for the device.

See Srcerer in action

The below image uses the code shown above and therefore, if you are viewing on a device with a width less than 768px then you will see the cropped version of the beach scene below. Above this width you will see the full version. Also, depending on your screen resolution, you may have been served the 2x version (i.e. a 1536px version of the small image) on the smaller screen. This example only uses 2 images (and 1 breakpoint). Srcerer (AD) stack allows you to add up to 4 image versions (and 3 breakpoints)!

If you are on a desktop then adjust your browser size down to less than 768px and you will see the image switch.

beach scene

Nice. But can Srcerer do any other tricks?

Yes indeed. Srcerer has a magical option of linking to warehoused images. Instead of you having to link to each individual image in your Srcerer set, you can instead use a unique formula-based url that will take 1 template url and create all of the required links for you. Though you can still add the links manually if you like (or add via drag and drop / browse).

Anything else?

Sure. The Srcerer stacks have all of these display options to make your images really stand out:

  • Create Banner / Hero images using 'Cover' mode (like at the top of the page!)
  • Add content on top of your image (in one of 6 preset positions)
  • Add content beneath the image (i.e. a caption)
  • Use any stack(s) as content
  • Make image a link
  • Create beautiful looking 'cards'
  • Add hover effects
  • Add a parallax effect
  • Use blending modes

You can see examples of many of these below. In short, Srcerer is an image stack that is a must in any RapidWeaver toolbox!

Adding content

You can opt to add content below the image (as a caption) or in one of 6 preset locations on top of the image (top-left, top-right; top full, centre, bottom-left, bottom-right and bottom full).

You can add any content / stacks that you wish (though you what you add will need to fit within the image on all device sizes as any overflow will be cropped).


My Heading Text


An inset image caption


A caption below the image


Image from Unsplash

Creating cards

You can create a 'card' effect with any image (and added content). There are 7 preset effects included along with a 'custom' option. (The last example also has had a parallax effect enabled!)







Adding hover effects

There are several preset options for adding a hover effect to your images: Blur, Zoom In, Zoom Out and Opacity. You can also opt to only show any added content on hover too.


This is an example of the Blur hover effect (and of showing added content on hover!)


Hover to see the image Zoom Out


Hover to see the image Zoom In


Hover to change opacity / see background colour

Adding Blends

You can opt to blend the image with its background and also opt to blend any added content with the image. You can create some really nice effects by playing about with the options provided here.


Content blend


Image Blend


Combined Blend

Adding parallax effects

You can also opt to add a parallax effect to any image. This uses some aspects from our popular Parallaxer stack and allows you to specify the direction of effect that you wish to apply.


Direction: UP


Direction: DOWN


Direction: LEFT


Direction: RIGHT

Combining effects

And of course you can combine any / all of these effects with any image (with the exception of combining Hover and Parallax effects)! Here are a few examples of combining adding links, content and hover effects:


Tap / Click for more information


Tap / Click for more information

Buy Srcerer stack

You can buy this stack on its own or as part of our hugely discounted stacks bundle (find out more).