Responsive imaging

This documentation shows how to easily add responsive images to your websites/apps. For assistance, please contact support from your Sirv account. If you don’t have a Sirv account yet, create your free account now.

Perfectly sized images

Sirv can automatically deliver images to fit your users screen. Whether iPhone, iPad, mobiles, tablets or desktop/laptops, Sirv will detect the available dimensions and create an image to fit.

Sirv does this by resizing your image, caching it and rapidly delivering it to the user. Simple to setup, this is one of the easiest ways for web designers and developers to embed responsive images in web pages.

180px width div
Responsive image demo 1
40% width div
Responsive image demo 2
100% width div
Responsive image demo 3

Interactive example

Drag the slider to change the width of the containing div. Larger images are fetched when the div becomes larger:

350px

233px

Responsive image demo

Setup

To use responsive imaging, follow these two steps:

1. Add class=”Sirv” to your image and use data-src instead of src, for example:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv">

2. Reference the sirv.js file, if it’s not already in your page (it’s the same file used for embedding zooms/spins):

<script src="https://scripts.sirv.com/sirv.js"></script>

Cropped, responsive images

You can add other dynamic image effects to your responsive images. All of Sirv’s 70+ dynamic imaging options are available.

For example, you can create a full width responsive image that is cropped to a certain height (in % or px). The example below is 200px height. While the width will change depending on the size of the users screen, the height will remain the same:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg?scale.height=100%&crop.height=200&crop.y=center" class="Sirv" />

This technique is ideal for full-page-width responsive images that you often see on home pages, to give a dramatic first impression.

Lazy loading

To help pages load as fast as possible, for the best user experience, Sirv responsive images automatically use lazy loading. This loading method fetches the image when it is needed, instead of fetching all images on page load. Only images within the viewable part of the page will load. Images out of view will not load unless the user scrolls down the page and they come into view.

To use lazy loading, add a class of Sirv to an image, like so:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv" />

The loading effect smoothly fades in the image, giving a discreet, refined feeling. To alter this, you can add the img.Sirv.sirv-image-loading and img.Sirv.sirv-image-loaded classes to your page, with the settings you prefer. The default settings are:

<style>
  img.Sirv.sirv-image-loading {
    opacity: 0;
  }
  img.Sirv.sirv-image-loaded {
    transition: opacity .4s linear;
    opacity: 1;
  }
</style>

To remove the fade-in effect, apply this style in your HTML page:

<style>
  img.Sirv.sirv-image-loaded {
    transition: none;
  }
</style>

To use lazy loading on an image with fixed width or height (i.e. not a responsive image), set the resize to false:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv" data-options="resize: false;" width="300" />

To disable lazy loading of your responsive images, set lazy to false:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv" data-options="lazy: false;" />

Retina images

Sirv responsive imaging supports HiDPI (retina) images, to serve beautifully sharp images to retina devices. Retina images have incredible clarity but are roughly 4 times larger in file size. For faster image downloading, you can turn off retina and Sirv will deliver 72dpi images instead.

To turn off retina images, set retina to false:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv" data-options="retina: false;">

Resize step

For better user experience, when a user resizes their browser, new images are only served if the difference in image size is at least 50px. This helps keep your page feeling fast.

The resize step can be increased to a higher value or reduced as low as 10px. To change the value, use the resizeStep option:

<img data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" class="Sirv" data-options="resizeStep: 100;">

Options

Table of options that can be applied via the ‘data-options’ tag:

ParameterDefaultOptionsDescription
retinatruetrue / falseLoad retina images on HiDPI screens
resizetruetrue / falseEnable responsiveness when page is resized
resizeStep50numericWidth change threshold when resizing window (pixels, minimum 10px)
lazyfalsetrue / falseEnable lazy loading of images when they come into view

Options can alternatively be applied to all images on the page by using the script tag:

<script>
  var SirvOptions = {
    image: {
      retina: false
    }
  };
</script>

or like this:

<script>
  var SirvOptions = {};
  SirvOptions.image = {
    retina: false
  };
</script>

Was this article helpful?