Finally, Support for Responsive Images in Sitecore!

Responsive Web Design (RWD) offers a cost effective, high quality and easily managed delivery of content to a variety of devices.

Many teams build sites in RWD by using custom or popular responsive frameworks like Twitter Bootstrap or Foundation Zurb. But how can we combine the responsive design goodness with an intuitive content authoring experience in Sitecore?

The Problem

There is a HUGE difference in the resolution and physical size of a desktop monitor and a mobile phone or tablet.

When adding images to the website, we wish to take advantage of the “real-estate” of the desktop system to add beautiful images that help tell our story.  These images can be large, and they set a focal point – a position in the image that is meant to focus the viewer’s attention to a concept or meaning of the depiction.

When we scale the screen down to a smaller device, we really have 3 choices in an RWD website:

1. Allow the browser to crop the image
2. Allow the browser to scale the image
3. Use CSS or Javascript to replace the image with another one

Scaling or Cropping the Image

Options #1 and #2 do some good in some cases, however, they can easily distort the image or the message of the image by changing its focal point.

Let’s take an example from BrainJuice – here’s a full resolution image for the desktop

If I scale the image down, it looks like this

And another thing…

In addition to looking bad and causing my visitors to squint their eyes, the image is still the same file size in bytes. Scaling the image down visually does not make it any smaller in delivery!

And if I allow the image to the “cropped” by the browser, it comes out like this

Yeah. Not great.

Replacing the Image

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Replacing the image is a great option.  You can scale, crop, or just use a different image altogether.  However, changing from one image to another in a RWD website based on device is usually something that is embedded within the CSS or within Javascript – and therefore it not manageable by the content author in Sitecore.

It typically looks something like this in HTML / CSS:

<img src="original.png" id="logo1" />
<img src="replacement.png" id="logo2" />

@media only screen and (max-width: 767px) {
#logo1 { display:block;}
#logo2 { display:none;}
}

@media only screen and (min-width: 768px) {
#logo1 { display:none;}
#logo2 { display:block;}
}

Or like this using Javascript:

$(document).ready(function() {
if($(window).width() > 767) {
$("#logo").attr("src", "replacement.png");
} else {
$("#logo").attr("src", "original.png");
}
});

So, if a content author wished to change this image, they would have to seek the assistance of a developer (or do something like loading CSS or Javascript into the media library – clearly this is developer territory!)

Another problem with these solutions is that they may actually download both images – making the load on the device even worse.

The Solution

BrainJocks SCORE™ 3.0 introduces a feature that helps all teams provide better support for images within RWD websites.

Images in Sitecore are just images, however with BrainJocks SCORE, you can now select the focal point scale and crop images for each device in your responsive design.  To use this feature, we’ll start by defining the breakpoints of our responsive design for an image.

We refer to these as “Picture Presets”.  Each preset defines one or more viewports for the image selection.  In this diagram, we define a Generic preset with 3 viewports – Desktop, Tablet and Mobile.

Second, we add the new “Picture” component to the page which uses the new field type included in SCORE.  Because we used a custom field type, SCORE users can also create their own components with this functionality.

One an image is selected, SCORE allows you to set the focal point of the image (note the blue dot) which we use to auto-scale and crop the image for the other viewports in your list.

Then, for each viewport you can scale and crop the image for that device.

The Result

Your uploaded image is optimized, and in this case two additional images are created in the media library from the original.

Full screen picture

Mobile Phone

And the image is reduced down to 1/2 the size in bytes.

Oh yea, and the next time to return to edit the page, the Picture field remembers where you zoomed / panned / cropped the image and allows you to fine tune it without starting over.

Optimal Solution

Even better, the browser will only download the image needed based on device size.  So on the mobile phone, only the smaller image will be requested and downloaded to the device.

Does this work with IE?

Yes, it does.

We ensure compatibility with all modern browsers and Internet Explorer back to version 9.  Brainjocks, now Perficient, SCORE uses the <picture /> tag, which is part of HTML5. But for those older browsers which don’t know how to handle this, we automatically provide a Polyfill Javascript library (4.69KB zipped) to teach the older browsers how to render properly.

For more information responsive image support for Sitecore, contact Brainjocks, now Perficient, today.