pixmo-responsive-img

Responsive images converter

Usage no npm install needed!

<script type="module">
  import pixmoResponsiveImg from 'https://cdn.skypack.dev/pixmo-responsive-img';
</script>

README

pixmo-responsive-img

Usage

Based on responsive-images.js by kvendrik

Setting it up

To start using the plugin we only have to include the script in the footer of our document.

HTML Structure

In the data-src attribute we specify the different breakpoints in combination with the image source it should use. In the data-src-base(optional) attribute we specify the base of our source urls.

<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg, <768:small.jpg, <960:medium.jpg, >960:big.jpg' />

Using the HTML above the browser would load demo/images/smallest.jpg if the size of the viewport is below 480 pixels, demo/images/small.jpg if the size of the viewport is above 480 pixels and below 768 pixels, demo/images/medium.jpg if the size of viewport above 768 pixels and below 960 pixels and demo/images/big.jpg if the size of viewport above 960 pixels.

That's all! We're up and running! ;)

Options

The only required option is the data-src attribute. All of the options below can be used additionally.

Name Type Description
data-src-base attribute Adds a specified path before every image source path
data-src2x attribute Can be used instead of data-src if devicePixelRatio is above 1.2 (retina displays). Syntax is the same as data-src.
data-src-base2x attribute Can be used instead of data-src-base to specify a custom base path for devices were devicePixelRatio is above 1.2 (retina displays). Can be used in combination with both data-src and data-src-base or either one