"html":"<h1>Jekyll Responsive Images</h1>\n<p>Jekyll Responsive Images is a <a href=\"http://jekyllrb.com/\">Jekyll</a> plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Specifications\"><code>srcset</code></a> or <a href=\"https://github.com/BBC-News/Imager.js/\">Imager.js</a>.</p>\n<p><a href=\"https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image\"></a>\n<a href=\"https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master\"></a>\n<a href=\"https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images\"></a></p>\n<h2>Installation</h2>\n<p>First, install the gem:</p>\n<pre>$ gem <span class=\"hljs-keyword\">install</span> jekyll-responsive_image</pre><p>Then you can either add it to the <code>gems</code> section of your <code>_config.yml</code>:</p>\n<pre><span class=\"hljs-attr\">gems:</span> [jekyll-responsive-image]</pre><p>Or you can copy the contents of <a href=\"lib/jekyll-responsive-image.rb\"><code>responsive_image.rb</code></a> into your <code>_plugins</code> directory.</p>\n<h2>Configuration</h2>\n<p>An example configuration is below.</p>\n<pre><span class=\"hljs-attr\">responsive_image:</span>\n <span class=\"hljs-comment\"># [Required]</span>\n <span class=\"hljs-comment\"># Path to the image template.</span>\n<span class=\"hljs-attr\"> template:</span> _includes/responsive-image.html\n\n <span class=\"hljs-comment\"># [Optional, Default: 85]</span>\n <span class=\"hljs-comment\"># Quality to use when resizing images.</span>\n<span class=\"hljs-attr\"> default_quality:</span> <span class=\"hljs-number\">90</span>\n\n <span class=\"hljs-comment\"># [Optional, Default: []]</span>\n <span class=\"hljs-comment\"># An array of resize configuration objects. Each object must contain at least</span>\n <span class=\"hljs-comment\"># a `width` value.</span>\n<span class=\"hljs-attr\"> sizes:</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">480</span> <span class=\"hljs-comment\"># [Required] How wide the resized image will be.</span>\n<span class=\"hljs-attr\"> quality:</span> <span class=\"hljs-number\">80</span> <span class=\"hljs-comment\"># [Optional] Overrides default_quality for this size.</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">800</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">1400</span>\n<span class=\"hljs-attr\"> quality:</span> <span class=\"hljs-number\">90</span>\n\n <span class=\"hljs-comment\"># [Optional, Default: assets]</span>\n <span class=\"hljs-comment\"># The base directory where assets are stored. This is used to determine the</span>\n <span class=\"hljs-comment\"># `dirname` value in `output_path_format` below.</span>\n<span class=\"hljs-attr\"> base_path:</span> assets\n\n <span class=\"hljs-comment\"># [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]</span>\n <span class=\"hljs-comment\"># The template used when generating filenames for resized images. Must be a</span>\n <span class=\"hljs-comment\"># relative path.</span>\n <span class=\"hljs-comment\">#</span>\n <span class=\"hljs-comment\"># Parameters available are:</span>\n <span class=\"hljs-comment\"># %{dirname} Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)</span>\n <span class=\"hljs-comment\"># %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)</span>\n <span class=\"hljs-comment\"># %{filename} Basename without the extension (assets/some-file.jpg => some-file)</span>\n <span class=\"hljs-comment\"># %{extension} Extension of the file (assets/some-file.jpg => jpg)</span>\n <span class=\"hljs-comment\"># %{width} Width of the resized image</span>\n <span class=\"hljs-comment\">#%{height}Heightoftheresizedimage</span>\n<s