Responsive.pics 

Automatic image resizing
for WordPress theme authors

ResponsivePics is a PHP library that enables WordPress theme authors to automatically resize images* in responsive layouts. Just upload a high-res image in your media library, and let ResponsivePics take care of the rest. Supports art-directed crops, background images and respects aspect ratios.

ResponsivePics is useful when you have a responsive grid layout (like Bootstrap, but can be any framework) and need images to adapt to responsive designs. ResponsivePics automatically resizes and / or crops your uploaded pictures to fit your layouts.

ResponsivePics saves bandwidth and lets your site load faster.

* ReponsivePics does not handle images in the WordPress wysiwig editor, it’s only useful for theme authors that use images or photos in their themes. It automatically handles retina or hdpi images via media queries.

Star our Github repo:
Star

Requirements

In order to use this PHP library, your website/server needs to meet the following requirements:

  • PHP 5.5+
  • WordPress 3.5+
  • WP Cron enabled or a Real Cron Job set up on your server

Installation

Composer

Run this command in your wordpress theme folder:

$ composer require "booreiland/responsive-pics"

And make sure to load Composer’s autoloader file by adding this line to your theme’s functions.php:

require_once (__DIR__.'/vendor/autoload.php');

Browser Support

Currently the <picture> element is supported in all the modern browsers except Internet Explorer 11.

In order to enable support for the picture element and associated features in browsers that do not yet support them, you can use a polyfill. We recommend using Picturefill.

To install Picturefill in your wordpress theme as a node module, run the following command from your theme directory:

npm

npm install --save picturefill

Yarn

yarn add picturefill

And import the package in your theme’s global javascript file:

import 'picturefill';

Configuration

Responsive Pics uses the following default variables:

Variable Type Default Definition
$columns number 12 The amount of columns your grid layout uses.
$gutter number 30 The gutter width in pixels (space between grid columns).
$breakpoints array ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400, 'xxxl' => 1600] The media query breakpoints Responsive Pics will use for creating and serving your image sources.
$grid_widths array ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1140, 'xxxl' => 1140] The maximum widths of your layout in pixels Responsive Pics will use for resizing your images.
$lazyload_class string lazyload The css class to be added on the picture img tag when lazyload is enabled.
$image_quality number 90 The image compression quality in percentage used in the WP_Image_Editor when resizing images.

By default, ResponsivePics will use the Bootstrap 4 SCSS variables for defining:

The amount of grid columns:

$grid-columns: 12;

The grid gutter width in pixels:

$grid-gutter-width: 30px;

The grid breakpoints in pixels:

$grid-breakpoints: (
 xs: 0,
 sm: 576px,
 md: 768px,
 lg: 992px,
 xl: 1200px
);

And the maximum widths of the containers in pixels:

$container-max-widths: (
 sm: 540px,
 md: 720px,
 lg: 960px,
 xl: 1140px
);

Note: ResponsivePics will add the xs container max width for you (= 576), based upon the default sm grid breakpoint (= 576px).

If you have customized the bootstrap defaults or if you’re using a different grid system (Foundation, Materialize etc.), or even if you want to add extra breakpoints & container widths, you can pass your own grid variables to the Responsive Pics library.

Add these lines to your theme’s functions.php and make sure to check if the ResponsivePics class exists:

/*
 * Set Responsive Pics variables
 */
if (class_exists('ResponsivePics')) {
	ResponsivePics::setColumns(12);
	ResponsivePics::setGutter(30);
	ResponsivePics::setBreakPoints([
		'xs'    => 0,
		'sm'    => 576,
		'md'    => 768,
		'lg'    => 992,
		'xl'    => 1200,
		'xxl'   => 1400,
		'xxxl'  => 1600,
		'xxxxl' => 1920
	]);
	ResponsivePics::setGridWidths([
		'xs'    => 576,
		'sm'    => 768,
		'md'    => 992,
		'lg'    => 1200,
		'xl'    => 1400,
		'xxl'   => 1600,
		'xxxl'  => 1920
	]);
	ResponsivePics::setImageQuality(85);
}

Helper Functions

You can retrieve any variables used in Responsive Pics by running one of these helper functions:

ResponsivePics::getColumns();       // Will return $columns
ResponsivePics::getGutter();        // Will return $gutter
ResponsivePics::getBreakpoints();   // Will return $breakpoints
ResponsivePics::getGridWidths();    // Will return $grid_widths
ResponsivePics::getLazyLoadClass(); // Will return $lazyload_class
ResponsivePics::getImageQuality();  // Will return $image_quality

Usage

Picture Element

For inserting a responsive <picture> element in your template, use the get function:

ResponsivePics::get()

with the following parameters:

Parameter Type Required Default Definition
id number yes The WordPress image id (e.g. 1).
sizes string yes A comma-separated string of preferred image sizes (e.g. 'xs-12, sm-6, md-4, lg-3'). See the Sizes section for more information.
classes string or array optional null Additional CSS classes you want to add to the picture element (e.g. 'my_picture_class' or ['my_picture_class', 'my_second_picture_class']).
lazyload boolean optional false When true enables lazyload classes and data-srcset attributes. See the Lazyloading section for more information.
intrinsic boolean optional false When true enables intrinsic classes and data-aspectratio attributes. See the Intrinsic Aspectratio section for more information.

Background Image

For inserting a responsive background image in your template, use the get_background function:

ResponsivePics::get_background()

with the following parameters:

Parameter Type Required Default Definition
id number yes The WordPress image id (e.g. 1).
sizes string yes A comma-separated string of preferred image sizes (e.g. 'xs-12, sm-6, md-4, lg-3').
classes string or array optional null Additional CSS classes you want to add to the background element (e.g. 'my_bg_class' or ['my_bg_class', 'my_second_bg_class']).

Process

  • When visiting the front-end page where the ResponsivePics function call is made, the library will try and resize and/or crop your image on the fly and save it to in the same uploads folder as the original image.
  • Once the image variation is created, it will skip the creation process of that variation on the next page load. The first page load can therefore take a while.
  • When you change one of the image size parameters, it will automatically try and create the new image variation on the next page load.
  • When the original image does not meet the dimension requirements of the requested image size, it will skip that image size variation and proceed to the next image size.
  • Alt text will automatically be added on the picture img element if the original image in the media library has one.

Supported image formats

The following image file formats are supported:

File format MIME Type Properties
jp(e)g image/jpeg yes
png image/png When the png contains an alpha channel, an extra 'has-alpha' class will be added to the picture image element for additional styling.
gif image/gif When the gif is animated (it will check for multiple header frames), no image resizing or cropping will be done to prevent discarding the animation.

Any other image formats, will not be resizes or cropped.

Sizes

Full Syntax

For each comma-separated image size being passed to the get or get_background function, the following syntax is applied:

breakpoint:width [/factor|height]|crop_x crop_y

with the following parameters:

Parameter Type Required Default Definition
breakpoint number or string yes If undefined, and width is a number, breakpoint will be the same as the width. If undefined, and width is a column definition, breakpoint will be the corresponding breakpoint (e.g. if width is 'xs-8', breakpoint will be 'xs').
width number or string yes A column definition is a key in $grid_widths plus a dash and a column span number (e.g. 'xs-8'). If column span number is full, the full width of the next matching $breakpoint is used (e.g. 'xs-full')
height number optional The desired height of the image (e.g. 500)
factor number optional A factor of the width (e.g. 0.75)
crop_x string optional c Crop position in horizontal direction: t(op), r(ight), b(ottom), l(eft) or c(enter)
crop_y string optional c Crop position in vertical direction: t(op), r(ight), b(ottom), l(eft) or c(enter). If undefined, crop_x will be treated as a shortcut: 'c' = 'center center', 't' = 'top center', r = 'right center', 'b' = 'center bottom', 'l' = 'left center'

Features

Lazyloading

When enabling the lazyload option in the ResponsivePics::get() function call, this library automatically:

  • adds a lazyload class to the picture img element.
  • swaps the srcset with data-srcset attributes on the picture source elements.

This will enable you to use a lazy loading plugin such as Lazysizes or Lozad.

You can also set your own lazyload class by passing it to Responsive Pics library in your theme’s functions.php:

if (class_exists('ResponsivePicture')) {
	ResponsivePics::setLazyLoadClass('lozad');
}

To install Lazysizes in your wordpress theme as a node module, run the following command from your theme directory:

npm

npm install --save lazysizes

Yarn

yarn add lazysizes

And import the package in your theme’s global javascript file:

import 'lazysizes';

Intrinsic Aspectratio

When enabling the intrinsic option in the ResponsivePics::get() function call, this library automatically:

  • adds a intrinsic class to the picture element and a intrinsic__item class to the picture img element.
  • adds data-aspectratio attributes on the picture source and img elements with the calculated source image ratio.

This will enable you to pre-occupy the space needed for an image by calculating the height from the image width or the width from the height with an intrinsic plugin such as the lazysizes aspectratio extension.

To use the Lazysizes aspectratio extension in your wordpress theme, first install lazysizes as a node module as described in the Lazyloading section and import the extension in your theme’s global javascript file:

import 'lazysizes/plugins/aspectratio/ls.aspectratio.js';

Examples

Grid system columns

Display an responsive image in a normal container column layout:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <?= ResponsivePics::get(1, 'xs-12, sm-6, md-4'); ?>
    </div>
  </div>
</div>

This method will output a <picture> element that spans 12 columns from the xs breakpoint and up, 6 columns from the sm breakpoint and up and 4 columns from the md breakpoint and up.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-330x220-center-top.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-330x220-center-top@2x.jpg 2x" />
  <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-290x193-center-top.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-290x193-center-top@2x.jpg 2x" />
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-210x140-center-top.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-210x140-center-top@2x.jpg 2x" />
  <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-240x160-center-top.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-240x160-center-top@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-546x364-center-top.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-546x364-center-top@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Grid system columns example" />
</picture>
Grid system columns example

Full width images

When your image is not in a container and you want to display your image as wide as the next breakpoint, you can use the -full shorthand:

<?= ResponsivePics::get(1, 'xs-full'); ?>

This method will output a <picture> element with a width of the next ascending breakpoint. In this case: 576px from the xs breakpoint and up, 768px from the sm breakpoint and up, 992px from the md breakpoint and up, 1200px from the lg breakpoint and up and 1200px from the xl breakpoint and up.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 1200px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775@2x.jpg 2x" />
  <source media="(min-width: 992px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-1200x775@2x.jpg 2x" />
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-992x640.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-992x640@2x.jpg 2x" />
  <source media="(min-width: 576px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-768x496.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-768x496@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-576x372.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-576x372@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full width image example" />
</picture>
Full width image example

Custom image widths

When your image is not in a normal container or column layout, you can also use custom image widths:

<?= ResponsivePics::get(1, 'xs:500, sm:725, md:950'); ?>

This method will output a <picture> element of 500px from the xs breakpoint and up, 725px from the sm breakpoint and up and 950px from the md breakpoint and up.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633-center-top.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633-center-top@2x.jpg 2x" />
  <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483-center-top.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483-center-top@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333-center-top.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333-center-top@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image sizes example" />
</picture>
Custom image sizes example

Mixed image widths

You can also mix container column image widths with custom image widths:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-12">
      <?= ResponsivePics::get(1, 'xs-12, md-6, lg:800, xl:1024'); ?>
    </div>
  </div>
</div>

This method will output a <picture> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up, 800px from the lg breakpoint and up and 1000px from the xl breakpoint and up.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-1000x666-center-top.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-1000x666-center-top@2x.jpg 2x" />
  <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533-center-top.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533-center-top@2x.jpg 2x" />
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-330x220-center-top.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-330x220-center-top@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-546x364-center-top.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-546x364-center-top@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Combined image sizes example" />
</picture>
Combined image sizes example

Custom breakpoints

When your picture needs to change size on a non-default breakpoint, you can also use custom breakpoints:

<?= ResponsivePics::get(1, '400:200, 800:400'); ?>

This method will output a <picture> element that spans 200px from 400px breakpoint and up and 400px from 800px breakpoint and up.

Since we didn’t define any image size before breakpoint 400px, the image won’t be resized from breakpoint 0px to 400px which will be bad for performance.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 800px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284-center-top.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284-center-top@2x.jpg 2x" />
  <source media="(min-width: 400px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142-center-top.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142-center-top@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash.jpg" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom breakpoints example" />
</picture>
Custom breakpoints example

Custom image heights

When you want to limit the height of your image without cropping it, you can set the image height:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-lg-12">
      <?= ResponsivePics::get(1, 'xs-12 800, md-8 500, lg:400 400, xl:600/0.75'); ?>
    </div>
  </div>
</div>

This method will output a <picture> element that spans 12 columns and a max height of 800px from the xs breakpoint and up, 8 columns and a max height of 500px from the md breakpoint and up, 400px and a max height of 400px from the lg breakpoint and up and 600px and a max height of 600px * 0.75 (= 450px) from the xl breakpoint and up.

When setting a height, ResponsivePicture will try to resize the image to the desired height only if the resulting image width will be smaller than the calculated column class width or fixed pixel width.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450@2x.jpg 2x" />
  <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400@2x.jpg 2x" />
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" />
</picture>
Custom image heights example

Image cropping

When you want full control over your image dimensions, you can enable cropping:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-lg-12">
      <?= ResponsivePics::get(1, 'xs-12 800|c, md-8 500|c, lg:400 400|l t, xl:600/0.75|r b'); ?>
    </div>
  </div>
</div>

This method will output a <picture> element that spans 12 columns and with a height of 800px cropped from the center from the xs breakpoint and up, 8 columns and a height of 500px cropped from the center from the md breakpoint and up, 400px and a height of 400px cropped from the left top from the lg breakpoint and up and 600px and a height of 600px * 0.75 (= 450px) cropped from the right bottom from the xl breakpoint and up.

When setting a height and a crop, ResponsivePicture will try to resize and crop the image to the desired width and height only if the original image dimensions allow it. Otherwise it will show the original image for that breakpoint.

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<picture>
  <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-right-bottom.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-right-bottom@2x.jpg 2x" />
  <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-left-top.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-left-top@2x.jpg 2x" />
  <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500-center-center@2x.jpg 2x" />
  <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800-center-center@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" />
</picture>
Custom image heights example

Lazyloading

To enable lazy loading your responsive picture, pass true as the 4th parameter:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-lg-10 col-xl-8">
      <?= ResponsivePics::get(1, 'xs-12, lg-10, xl-8', 'lazyload-effect', true); ?>
    </div>
  </div>
</div>

Now your responsive image will only load when it’s in the viewport and thus will increase performance on your website!

Additionally you could even add a fade-in css effect once the image is lazyloaded:

picture.lazyload-effect {
	img {
		&.lazyload,
		&.lazyloading {
			opacity: 0;
			transition: opacity .75s ease;
		}

		&.lazyloaded {
			opacity: 1;
		}
	}
}

Depending on the maximum size of the uploaded image with ID 1, the output with special lazyload markup will be something like:

show result
<picture class="lazyload-effect">
  <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460@2x.jpg 2x" />
  <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-770x513.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-770x513@2x.jpg 2x" />
  <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460@2x.jpg 2x" />
  <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-510x340.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-510x340@2x.jpg 2x" />
  <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-546x364.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-546x364@2x.jpg 2x" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Lazyloading example" class="lazyload" />
</picture>
Lazyloading example

Intrinsic Aspectratio

To enable intrinsic aspect ratio for your responsive picture, pass true as the 4th parameter:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-lg-10 col-xl-8">
      <?= ResponsivePics::get(1, 'xs-12, lg-10, xl-8', true, true); ?>
    </div>
  </div>
</div>

When you installed the Lazysizes aspectratio extension, it will try to calculate each picture’s image element’s height based upon each data-aspectratio attribute and set the height as an inline style. This way the image already takes up space in your layout.

Additionally you could even add some placeholder styling when the image is not loaded yet, but does have a height already:

picture.intrinsic {
	position: relative;
	display: block;
	margin: 0;
	width: 100%;
	background: #e4e4e4 url('../images/icon.svg') no-repeat center;
	background-size: 50px 50px;

	&__item {
		display: block;
		width: 100%;
	}
}

Depending on the maximum size of the uploaded image with ID 1, the output with special intrinsic markup will be something like:

show result
<picture class="intrinsic">
  <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035@2x.jpg 2x" data-aspectratio="0.66666666666667" />
  <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-770x1155.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-770x1155@2x.jpg 2x" data-aspectratio="0.66666666666667" />
  <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035@2x.jpg 2x" data-aspectratio="0.66666666666667" />
  <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-510x765.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-510x765@2x.jpg 2x" data-aspectratio="0.66666666666667" />
  <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-546x819.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-546x819@2x.jpg 2x" data-aspectratio="0.66666666666667" />
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-aspectratio="" alt="Intrinsic example" class="lazyload intrinsic__item" style="width:100%;" />
</picture>
Intrinsic example

Background Image

When you want to create a responsive background image, you can use the get_background function. In this example, we will be creating a full-width banner background image with a responsive aspect ratio:

<?= ResponsivePics::get_background(1, 'xs-full/0.65|c, sm-full/0.5|c, md-full|c, lg-full/0.5|c, xl:1500/0.35|c, 1500:1750/0.35|c, 1750:2000/0.3|c, 2000:2500/0.25|c', 'my-hero-bg-example'); ?>

When you pass a class as the 3rd parameter, you can style the div that contains the background image:

.my-hero-bg-example {
	display: block;
	width: 100%;
	height: 65vw;
	background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: background-image .75s ease;

	@include media-breakpoint-up(sm) {
		height: 50vw;
	}

	@include media-breakpoint-up(lg) {
		height: 40vw;
	}

	@include media-breakpoint-up(xl) {
		height: 35vw;
	}

	@media (min-width: 1600px) {
		height: 30vw;
	}

	@media (min-width: 2000px) {
		height: 25vw;
	}
}

Depending on the maximum size of the uploaded image with ID 1, the output will be something like:

show result
<style scoped="scoped" type="text/css">
  @media (min-width: 0px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 0px), only screen and (min-resolution: 192dpi) and (min-width: 0px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x0-center-center@2x.jpg");}
  }
  @media (min-width: 576px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), only screen and (min-resolution: 192dpi) and (min-width: 576px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x0-center-center@2x.jpg");}
  }
  @media (min-width: 992px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px), only screen and (min-resolution: 192dpi) and (min-width: 992px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x0-center-center@2x.jpg");}
  }
  @media (min-width: 1200px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), only screen and (min-resolution: 192dpi) and (min-width: 1200px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x0-center-center@2x.jpg");}
  }
  @media (min-width: 1500px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1500px), only screen and (min-resolution: 192dpi) and (min-width: 1500px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x0-center-center@2x.jpg");}
  }
  @media (min-width: 1750px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1750px), only screen and (min-resolution: 192dpi) and (min-width: 1750px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x0-center-center@2x.jpg");}
  }
  @media (min-width: 2000px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x0-center-center.jpg");}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 2000px), only screen and (min-resolution: 192dpi) and (min-width: 2000px) {
  #responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x0-center-center@2x.jpg");}
  }
  }
</style>
<div class="my-hero-bg-example" id="responsive-pics-background-581"></div>

Support

Issues

Please submit any issues you experience with the ResponsivePics library over at Github:
New Issue

Maintainers

ResponsivePics is developed and maintained by:

@monokai (creator)
@twansparant (collaborator)