diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a375ea..918a336 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,17 +1,17 @@
# CHANGELOG
-###1.4.0/1.4.1
+### 1.4.0/1.4.1
* renamed ``reparse`` option to ``reevaluate`` (better compatibility with picturefill)
* Changed candidate selection for more quality especially on lower resolution devices
* added video/vnd.mozilla.apng and video/x-apng types for apng in typesupport plugin (only 1.4.1)
-###1.3.1
+### 1.3.1
* fix intrinsic dimension plugin in IE11 in conjunction with SVG images
* allow complex combined media conditions in ``sizes`` attribute
-###1.2.1
+### 1.2.1
* fixes intrinsic sizes plugin sometimes disconnects MutationObserver
* improve media attribute order in conjunction with type attribute
@@ -19,7 +19,7 @@
* improve mutation performance for browsers without MuationObserver support
* be more memory efficient
-###1.2.0
+### 1.2.0
* improved performance for upcoming FF 36+
* decoupled intrinsic sizing from resource selection (makes [intrinsic size plugin smoother](http://jsfiddle.net/trixta/gs3p14pr/embedded/result/))
@@ -29,16 +29,16 @@
* simplified and improved smart source selection
* modification to the lqip pattern. The time to the onload event is now more often increased, but perceived performance is much better.
-###1.1.6
+### 1.1.6
* changed viewport calculation for IE8 to correspond to respondjs
* added experimental print extension plugin
-###1.1.5
+### 1.1.5
* improved viewport width/height detection
-###1.1.4
+### 1.1.4
* improved intrinsic sizes plugin
* improved ``currentSrc`` property and moved it to the [mutation plugin](plugins/mutation).
@@ -50,11 +50,11 @@
* implemented ``srcset`` and ``src`` getter/setters into mutation plugin.
* removed perfselection plugin. (Non-biased part is now directly included into the main script. For the "biased" part [use some other x-browser techniques](plugins/perfselection).)
-###1.1.1-1.1.3
+### 1.1.1-1.1.3
* no script changes, only adjustments to the package.json (sorry for the release noise)
-###1.1.0
+### 1.1.0
* improve [intrinsic scaling and move it to a plugin](plugins/intrinsic-dimension)
* allow use of h descriptor (allow futureproof markup)
@@ -62,16 +62,16 @@
* improve image abortion for trident
* tests tests tests ;-)
-###1.0.0
+### 1.0.0
* CSS calc function in the ``sizes`` attribute in conjunction with em/vw is now 100% precise and works even in IE8
* massive network performance improvement for the Trident engine (IE) if a ``src`` fallback attribute is specified
-###0.9.6
+### 0.9.6
* improve addSize option
-###0.9.5
+### 0.9.5
* improve memory usage
* add type support plugin
diff --git a/README.md b/README.md
index b9613eb..012a0a0 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-#respimage
+# respimage
**respimage** is a fast, lightweight and robust [responsive images](http://picture.responsiveimages.org/) polyfill, that saves the users bandwidth by [utilizing smart resource selection algorithm](how-respimg-works.md). It implements the ``srcset``/``sizes`` attributes as also the ``picture`` element. Unlike other responsive images polyfills ``respimage`` plays nicely with your graceful degradation / progressive enhancement and image SEO strategy.
-##Download and Embed
+## Download and Embed
Simply [download the respimage.min.js](respimage.min.js) script and add it to your website or bundle it in your normal JS.
```html
@@ -30,7 +30,7 @@ document.createElement('picture');
Also note, that only IE8 in strict mode is supported. In case you need to support IE8 compatibility view or IE7, please use the [oldie plugin](plugins/oldie).
-###Mobile support
+### Mobile support
For mobile support it is crucial to set the viewport ``meta`` tag to ``device-width``
@@ -38,19 +38,19 @@ For mobile support it is crucial to set the viewport ``meta`` tag to ``device-wi
```
-####Install via bower
+#### Install via bower
```
$ bower install respimage --save
```
-####Install via npm
+#### Install via npm
```
$ npm install respimage --save
```
-##Markup Examples
+## Markup Examples
Responsive images can be technically differentiated between 2 types.
* ``srcset`` with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
@@ -59,7 +59,7 @@ Responsive images can be technically differentiated between 2 types.
* and the ``picture`` element with its ``source[media]`` children (gives the author control about what ``srcset`` should be chosen by the browser depending on specific media queries)
-###``srcset`` with the density ``x`` descriptor
+### ``srcset`` with the density ``x`` descriptor
The ``x`` descriptor is natively supported in [Firefox 38, Chrome 34+ and Safari 7.1+](http://caniuse.com/#feat=srcset). All other browsers will be polyfilled.
Note: You must not mix the ``w`` and the ``x`` descriptor in one ``srcset`` attribute!
```html
@@ -72,7 +72,7 @@ The ``x`` descriptor is natively supported in [Firefox 38, Chrome 34+ and Safari
[load example](http://codepen.io/aFarkas/pen/qEBOEq)
-###``srcset`` with the width ``w`` descriptor and the ``sizes`` attribute
+### ``srcset`` with the width ``w`` descriptor and the ``sizes`` attribute
The ``w`` descriptor is in [Firefox 38 and Chrome 38+](http://caniuse.com/#feat=srcset). All other browsers will be polyfilled.
Note: You must not mix the ``w`` and the ``x`` descriptor in one ``srcset`` attribute!
```html
@@ -87,7 +87,7 @@ The ``w`` descriptor is in [Firefox 38 and Chrome 38+](http://caniuse.com/#feat=
```
[load example](http://codepen.io/aFarkas/pen/KwKdpY)
-###The ``picture`` element
+### The ``picture`` element
The ``picture`` element is currently only supported in [Firefox 38 and Chrome 38+](http://caniuse.com/#search=picture). All other browsers will be polyfilled. To support IE9 all source elements have to be wrapped inside of an ``audio`` or hidden ``video`` element:
```html
@@ -136,8 +136,8 @@ The art direction approach of the picture element and the descriptor approach ca
```
[load example](http://codepen.io/aFarkas/pen/RNwRzq)
-##API
-###``respimage`` function
+## API
+### ``respimage`` function
In case new responsive images are created and dynamically added to the DOM simply invoke the ``respimage`` method.
```js
@@ -181,12 +181,12 @@ In case you are not supporting IE8 we recommend to use the [Mutation plugin](plu
## Browser Support
**respimage** supports a broad range of browsers and devices. It is actively tested in the following browsers and devices IE8+, Firefox (ESR and current), Safari 7.0+, Chrome, Opera, Android 4.1+ and IOS 7+, but should work in a lot more browsers/devices. IE6 and IE7 are only supported with the [oldIE plugin](plugins/oldie).
-##Troubleshooting and bug reporting
+## Troubleshooting and bug reporting
In case of any problems include the **respimage.dev.js** into your project and open your JS console. In case you think you have found a bug, please create a testcase and then report your issue. Note: You should not use the dev build inside your production environment, because it is a lot slower.
**Note: It is highly recommended to test with the *.dev.js file, especially if you are using responsive images the first time or you start a new project setup.** The **respimage.dev.js** file can give you some useful hints in the console. About 80% of all tutorials suggest wrong markup examples! Also note: That our respimg debugger can't check every possible error.
-##Plugins
+## Plugins
respimage has some really nice extensions/plugins to improve standards support even more. In case you want to use a CDN, you can use the combohandler service provided by jsDelivr:
@@ -202,23 +202,23 @@ if(!window.HTMLPictureElement){
```
-###The [intrinsic sizes / dimensions - Plugin](plugins/intrinsic-dimension)
+### The [intrinsic sizes / dimensions - Plugin](plugins/intrinsic-dimension)
The intrinsic dimension plugin extends ``respimage`` to add the intrinsic dimension based on the descriptor (and the sizes attribute) and the density of the source candidate to the width content attribute of the image element.
-###The [Mutation - Plugin](plugins/mutation)
+### The [Mutation - Plugin](plugins/mutation)
This plugin automatically detects new responsive images and also any changes to ``srcset``/``media`` and ``sizes`` attributes. It also implements the corresponding DOM properties for those attributes.
-###The [typesupport - Plugin](plugins/typesupport)
+### The [typesupport - Plugin](plugins/typesupport)
The type support plugin adds type support detection for the following image file types: apng, JPEG 2000, JPEG XR, WEBP
-###The [oldie - Plugin](plugins/oldie)
+### The [oldie - Plugin](plugins/oldie)
Respimage supports IE8+ (including) out of the box. In case you need to support IE6/7 or any IE in compatibility view or quirksmode use the oldie plugin.
-##Known issues/caveats/
+## Known issues/caveats/
* Browsers without picture and srcset support and disabled JS will either show the image specified with the ``src`` attribute or - if omitted - show only the ``alt`` text. In case a ``src`` attribute is used non-supporting browser might download a wasted addtional image. For workarounds and markup patterns to improve this problem see below.
* **respimage** implements [different JS techniques](how-respimg-works.md) to automatically adapt to your ``src`` strategy. This yields among other things to the fact, that using an inital ``src`` attribute in conjunction with respimage can improve perceived performance (although an additional request is generated:
-###low quality image source
+### low quality image source
In case JS off is a concern. Use a low quality source as the fallback ``src``. As soon as an image has already a source respimage will not simply switch the image ``src`` but will implement the low quality image placeholder pattern. While the lquip technique can often increase the time until the onload event and the transferred image data, it **improves perceived performance**:
@@ -237,7 +237,7 @@ Due to the fact, that the lqip ``src`` attribute can be optimized by the browser
This technique can be combined with [lazyLoading](https://github.com/aFarkas/lazysizes), which will also additionally decrease the time until onload event and gives you the possibility to implement the improved perceived performance also for native supporting browsers.
-###Omit the ``src``
+### Omit the ``src``
In case JS disabled legacy browsers are no concern and you can't provide an lquip source or you are using client side rendering (No preload parser optimization advantage), use a one pixel ``src`` or better a data URI.
@@ -247,7 +247,7 @@ In case JS disabled legacy browsers are no concern and you can't provide an lqui
alt="my image" />
```
-###Simply live with it and use either the most often used or the smallest source candidate as the fallback ``src``
+### Simply live with it and use either the most often used or the smallest source candidate as the fallback ``src``
```html
@@ -38,7 +38,7 @@ Use one or the combination of the following techniques:
alt="picture but without artdirection" />
```
-####Serve higher compressions to retina devices
+#### Serve higher compressions to retina devices
```html
@@ -66,8 +66,8 @@ Use one or the combination of the following techniques:
```
-###Use [lazyloading via lazysizes](https://github.com/aFarkas/lazysizes)
+### Use [lazyloading via lazysizes](https://github.com/aFarkas/lazysizes)
-####Use the [``data-optimumx`` extension for lazysizes](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/optimumx)
+#### Use the [``data-optimumx`` extension for lazysizes](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/optimumx)
-####Use [lazysizes responsive image service extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias) with a third party or self hosted responsive image service
+#### Use [lazysizes responsive image service extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias) with a third party or self hosted responsive image service
diff --git a/plugins/print/README.md b/plugins/print/README.md
index 92688da..7255690 100644
--- a/plugins/print/README.md
+++ b/plugins/print/README.md
@@ -1,9 +1,9 @@
-#respimage - print plugin
+# respimage - print plugin
respimage also includes a simple print plugin, which boosts the image quality as also allows re-runs the source selection for ``source`` elements with the ``media="print"``.
-##Download and embed
+## Download and embed
Download the ``ri.print.min.js`` and include it after the respimage script:
```html
@@ -26,5 +26,5 @@ if(!window.HTMLPictureElement){
Of course it is recommended to combine your scripts.
-##Browser support
+## Browser support
This extension only works in IE9+ and Firefox. Also note, that current versions of the native implementations do not yet support this feature.
diff --git a/plugins/typesupport/README.md b/plugins/typesupport/README.md
index ad4e18e..e3503c4 100644
--- a/plugins/typesupport/README.md
+++ b/plugins/typesupport/README.md
@@ -1,4 +1,4 @@
-#respimage - type[support] plugin
+# respimage - type[support] plugin
While respimage includes type detection for the most used images (png, jpeg, gif and svg), this tiny plugin extends the type detection to the following formats:
@@ -9,7 +9,7 @@ While respimage includes type detection for the most used images (png, jpeg, gif
Note: This is not a polyfill, this is simply a type detection.
-##Download and embed
+## Download and embed
Download the ``ri.type.min.js`` and include it after the respimage script:
```html