image

SRCERER

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

Extensive
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)

image
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.

image
Width (px) File size (kb)
32028
64090
768126
1024208
1120247
1366344
1600464
1920653

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.

2. Srcerer (Art Direction)

image
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:

image
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.


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).

image

My Heading Text

image

An inset image caption

image

A caption below the image

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!)

image

Some

image

example

image

cards

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.

image

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

image

Hover to see the image Zoom Out

image

Hover to see the image Zoom In

image

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.

image

Content blend

image

Image Blend

image

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.

image

Direction: UP

image

Direction: DOWN

image

Direction: LEFT

image

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:

magnifier-zoom-in

Tap / Click for more information

external-link-alt

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).