image

SRCERER

A suite of 3 powerful image stacks for the responsive delivery of images. Srcerer is perfect for improving speed and SEO and making your images look awesome!

Srcerer iconSrcerer3 image stacks with a touch of magic

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, including the parallax header image above, have been added using Srcerer.

(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. 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)
320 28
640 90
768 126
1024 208
1120 247
1366 344
1600 464
1920 653

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" 
src="https://shakingthehabitual.com/Warehouse/srcerer/city-1024.jpg" 
srcset="https://shakingthehabitual.com/Warehouse/srcerer/city-320.jpg 320w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-640.jpg 640w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-768.jpg 768w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-1024.jpg 1024w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-1120.jpg 1120w
     https://shakingthehabitual.com/Warehouse/srcerer/city-1366.jpg 1366w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-1600.jpg 1600w,
     https://shakingthehabitual.com/Warehouse/srcerer/city-1920.jpg 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.

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

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:

<picture>
<source media="(max-width: 768px)" srcset="https://shakingthehabitual.com/Warehouse/srcerer/family-beach-small.jpg, https://shakingthehabitual.com/Warehouse/srcerer/family-beach-small@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="https://shakingthehabitual.com/Warehouse/srcerer/family-beach-large.jpg">
<img class="srcerer-img" alt="beach scene" src="https://shakingthehabitual.com/Warehouse/srcerer/family-beach-large.jpg">
</picture>

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
Close
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

Some content centered on image

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

More

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:

Tap / Click for more information

Tap / Click for more information

Srcerer Stack Settings

Image
Widths selection

It is within this section that you select which image widths you wish to include for this particular image.

Srcerer stack allows you to add up to 8 different width versions of an image. The 8 default widths can be changed if required to suit the needs of your site.

If you do not wish to add all 8 versions then simply uncheck the boxes for whichever widths you are not supplying.

Images source

There are 3 option for linking to your images:

Warehouse (formula)

This is the default option and saves you having to link 8 individual images to the stack. Instead you can supply three components of the images URL and Srcerer stack will do the rest. For this to work you need to use the following format to name your images: name-768.jpg (i.e. image name followed by a dash followed by the width value)

Warehouse (links)

This option will present you with 8 link boxes. You need to supply a link for every image width that you have previously stated that you will supply.

Drag and Drop

You can use this option to drage and drop / browse for local images.

Default image

You need to supply a default / fallback image for use by browsers that cannot use the `secret` functionality. You need to select from the Small, Medium or Large widths so make sure that at least one of these is included in your image set.

Note: Of all modern browsers, only IE11 cannot properly use the code supplied by Srcerer stack. It is very well supported on all other browsers.

Alt tag

Provide your Alternative text in this area

Image conditions

By default, Screrer will generate code that will ask the browser to select an image based on the width of the screen being used. Using only this will still allow you to make good data/speed savings on small devices but adding in more information can make further improvements in these areas.

For instance, if you are using an image full width on mobile and on desktop is sits within one of 2 columns then the browser should really be basing the calculation for the desktop image on only half of the width of the screen. Srcerer allows you to add up to 3 conditions detailing the width of the image at 3 breakpoints.

Note: You need to start with the smallest width and work upwards. I.e. start with what your mobile breakpoint is and add in the width of the image for those devices, then the same for tablet and desktop.

The default width is used if no conditions are set or where none are met.

Cover mode

By default, Srcerer stack is set to display your image in 'Contain' mode which means that all of the image will be displayed.

If however you wish to use your image as a banner / Hero image, or you want to control the height of your image generally, then you can enable Cover mode.

Cover mode allows you to specify the image height (in px or % of browser height) for both mobile and desktop.

Image
Images set up

You should select how many different versions of the image you want to supply to the stack. Screrer (Art Direction) stack allows you to add up to 4 versions.

In addition to detailing this, you then need to also state at which breakpoints you want the images switched.

In the default example here the small image would be exchanged for the large image at 1024px. As such you would probably want your small image to be 1024px wide so that it fills the available space right up to this breakpoint (without needing to stretch it).

Images source

NB: A note of which images you need to supply is given at the top of this settings section.

There are 3 option for linking to your images.

Warehouse (formula)

This option anables you to link to all of the relevant individual images by providing some basic information. You need to supply three components of the images URL and Srcerer stack will do the rest. For this to work you need to use the following format to name your images: imageName-small.jpg (i.e. image name followed by a dash followed by the name of the size). The size names (image suffix names) can be changed from the default ones if desired (to enable use in different languages etc)

The warehouse formula option also allows you to specify if you are providing 2x and/or 3x versions of the images. You also need to specify which image sizes these are being provided for. If you are supplying these then you should name them like [email protected]

Warehouse (links)

This option will present you with 4 link boxes. You need to supply a link for every image width that you have previously stated that you will supply.

Drag and Drop

You can use this option to drage and drop / browse for local images.

Default image

You need to supply a default / fallback image for use by browsers that cannot use the `secret` functionality. You need to select from the Small, Medium or Large widths so make sure that at least one of these is included in your image set.

Note: Of all modern browsers, only IE11 cannot properly use the code supplied by Srcerer stack. It is very well supported on all other browsers.

Alt tag

Provide your Alternative text in this area

Image
Images source

There are 2 options for linking to your images:

Warehoused

This option will present you with the option to add a url to your image

Drag and Drop

You can use this option to drage and drop / browse for local images.

Alt tag

Provide your Alternative text in this area

Cover mode

By default, Srcerer stack is set to display your image in 'Contain' mode which means that all of the image will be displayed.

If however you wish to use your image as a banner / Hero image, or you want to control the height of your image generally, then you can enable Cover mode.

Cover mode allows you to specify the image height (in px or % of browser height) for both mobile and desktop.

Image
Add link?

You can add a link to the image.

Tip: You may wish to combine this with a hover effect (see later section)

Add content?

You can add content on top of your image or below it. Srcerer offers the following placement options:

  • Top-left
  • Top-right
  • Top full
  • Centre
  • Bottom-left
  • Bottom-right
  • Bottom full
  • Below (caption mode)
  • Below (card mode)

NB: You should not add too much content on top of any image. Whatever cannot fit on the image will be hidden from view.

There is an additional option to 'Allow click throughs'. This means that hover effects and links will work even when the tap/click is on the content area. NB: If you have buttons / links in your content then you should disable this setting.

Add hover effect

You can add any of the following hover effects to your image: Blur, Opacity, Zoom In and Zoom Out

You can also opt to show any content that has been added on hover (as opposed to it being initially visible).

Add parallax effect

You can add movement to your image by adding a Parallax effect. This will cause the image to move at a different speed as the rest of the page.

You can choose for the effect direction to be: Up, Down, Left or Right

Tip: Landscape images tend to work best with a parallax effect - certainly in terms of the left and right direction options.

Enable blend modes

You can apply the standard CSS blend modes to either the image (and its background) and / or any added content and the image.

Many of the effects depend on there being a background colour applied (and often with some level of opacity).

Cover mode

By default, Srcerer stack is set to display your image in 'Contain' mode which means that all of the image will be displayed.

If however you wish to use your image as a banner / Hero image, or you want to control the height of your image generally, then you can enable Cover mode.

Cover mode allows you to specify the image height (in px or % of browser height) for both mobile and desktop.

Colour

The colour set here will be applied to certain bland effects and also to the background of any content set to display below the image.

Custom CSS (Advanced)

You can add your own class to the container and to the image.

Allow stretch

By default, Srcerer stack uses 'max-width=100%'. If your images are wide enough then they will fill the available space. If your images are not wide enough (they really should be) then you can enable 'Allow stretch' to make it fill.

Additionally, with Srcerer (Sizes) stack, if the user resizes the browser (or rotates their device) then the loaded image may no longer fill that space. Selecting 'Allow stretch' will change the css to 'width: 100%' so that the image will fill the space at all times (though the image may need to stretch to fill the new space).

Show linked image in Edit mode

By default, Srcerer stack shows only a placeholder image. If you wish instead to display your linked images then uncheck this box. It will be the selected default / fallback image that is used.

Note: Displaying warehoused images within Edit mode of RW can cause some performance issues. If using then it is worth linking your images before unchecking this box.

Download Project File
0

Srcerer Tips and Tricks

There are no set sizes that you should use for your images. Screrer comes with default values/suggestions but you should change these to suit your site and how you use your images. This will depend on your theme, whether you are using a max-width container, whether the image is full screen width on all devices etc etc.

There are various tools for exporting your image into different sizes. Retrobatch for instance is able to take an image (or a folder of images) and scale it to various widths and rename the images to include the width. This makes pulling together your image set very easy but it could easily be done using Preview and resizing and 'saving as' each time.

If you are a web designer then it is worth your time developing a full understanding of what Srcerer can do in terms of responsive image delivery and why this is a critical approach to take in your web development projects. There are numerous sites online that go into great detail about the code that Srcerer constructs in terms of size/resolution switching and art direction. There are also sites with great advice about choosing your breakpoints, deciding which units to use (e.g. em or vw) and generally about how to prepare images for use in this way. A number of recommended reading sites are listed below. A good understanding of this area will help you use Srcerer to its fullest potential and enjoy all of the benefits that delivering your images in this way offers.

Buy Srcerer stack

You can buy this stack on its own or as part of our hugely discounted stacks bundle.

or

View our stacks bundle

Shaking the Habitual

Stacks Bundle

Like the look of our stacks? You can buy them individually or get them all for one hugely discounted price. Buying the bundle will save well over 50% on the cost of buying them individually.

View all the stacks included here

What about future stacks?

It's annoying buying a bundle only for new stacks to be released in future. That's why we at Shaking the Habitual will send all bundle purchasers their own unique 50% discount voucher* that is good for every new stack that we release in future.

My Image

* Please allow up to 1 week for delivery of discount code

Srcerer stack

Image

If you appreciate this stack then please leave a rating and/or review on the RapidWeaver Community site

© Shaking the Habitual
Let us know if you agree to cookies

We use cookies to give you the best online experience. Please let us know if you agree to the use of all of these cookies. You can read more about the cookies we use, and all other aspects of data use and privacy in our Privacy Policy.