Srcerer is a set of 4 independent stacks that enable you to present images on your web pages using different, modern approaches.

In addition to this, the stacks are packed full of extra features that enable you to:

• Create Banner / Hero images using 'Cover' mode
• 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

Srcerer (Sizes) stack

The stack allows you to add up to 8 different sized versions of an image and have the browser load only the one that is appropriate for the device size it is being viewed on. You can even tell the stack how much of the page an image takes up at different breakpoints so that this is factored in too.

Summary: The Sizes stack is a great way of ensuring that you are only loading appropriately sized images on every device!

Srcerer (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.

Srcerer (WebP / AVIF) stack

This stack allows you to make use of the WebP or AVIF image format. These formats are well worth checking out if you don't already know about them 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/AVIF images.

Summary: Useful to get the speed / optimisation benefits that modern image formats offer

Srcerer (Single) stack

This stack is not concerned about advanced 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.

Also available in our stack bundle: This stack is also available as part of our spectacular stack bundle deal. This offers every one of our stacks (plus Source / Source Addons) at a massively discounted price. Find out more.