Fix broken headings in Markdown files

CHANGELOG.md

@@ -1,25 +1,25 @@
 # 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
 * use lqip pattern also in browsers, which support image abortion (improves speedindex)
 * 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,28 +50,28 @@
 * 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)
 * make respimage lazier on resize
 * 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

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,27 +30,27 @@ 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``
 
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 ```
 
-####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. <br />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. <br />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){
 </script>
 ```
 
-###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
 <img
@@ -279,10 +279,10 @@ In case the currently set source candidate is not perfect (or perfect of course)
 
 * Media queries support in old IEs (IE8/IE9) are limited to ``min-width``, ``max-width``, ``max-height`` and ``min-height``. For IE9 it is possible to extend support by including a [``matchMedia`` polyfill](https://github.com/paulirish/matchMedia.js).
 
-##Responsive images and lazy loading
+## Responsive images and lazy loading
 Beside the fact, that lazy loading improves performance, there is an interesting side effect. Due to delayed image loading the sizes attribute can be dynamically calculated with JS and makes integrating responsive images in any environment therefore easy. We recommend [lazysizes](https://github.com/aFarkas/lazysizes).
 
-##Setting options
+## Setting options
 
 respimage uses the asynchronous push syntax for configuration. Simply create a global ``respimgCFG`` array if it doesn't exist already and push your options:
 
@@ -294,7 +294,7 @@ respimgCFG.push(['lazyFactor', 0.6]);
 
 Also Note: respimage is a drop-in polyfill solution and you normally shouldn't need to configure anything. But in case you want to play around with respimage's options here is a [small testing zone for you](https://afarkas.github.io/respimage/cfg/index.html).
 
-###The ``maxX`` option (default: ``2``)
+### The ``maxX`` option (default: ``2``)
 Due to the fact that reliable bandwidth detection is nearly impossible and 3x image density means 9x image data respimage constraints the maximum considered ``devicePixelRatio`` to ``2``. In case you want to serve 3x images to 3x devices even with possibly lower bandwidth set this option to 3:
 
 ```js
@@ -305,7 +305,7 @@ respimgCFG.push(['maxX', 2]);
 
 Note: This only affects polyfilled browsers. In case you want to constrain the maximum dpi for all browser you can try [lazySizes - optimumx extension](https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/optimumx).
 
-###The ``lazyFactor`` option (default: ``0.4``)
+### The ``lazyFactor`` option (default: ``0.4``)
 In case an image already has a source candidate (either initially set as ``src`` attribute or on resize) respimage becomes lazy changing the source. The higher the ``lazyFactor`` the more respimage honors your fallback ``src``. Reasonable values are between 0.1 and 1.5.
 
 ```js
@@ -320,7 +320,7 @@ respimgCFG.push(['lazyFactor', 0.8]);
 
 Wether this option has an impact depends also heavily on your fallback ``src`` strategy.
 
-##Building a production ready respimage.js version from the *.dev.js file
+## Building a production ready respimage.js version from the *.dev.js file
 
 The respimage.js or the respimage.min.js files are production ready versions of respimage while the respimage.dev.js file includes some informativ extra checks (For example, it checks wether your markup or the content of your ``sizes`` is reasonable.). Therefore the dev version is not only bigger but also a lot slower. In case you want to use the dev version inside your dev enviroment and want to automatically build a production ready version, you can do so by using the dead code removal feature of uglify. Here is a simple grunt config example:
 
@@ -359,10 +359,10 @@ grunt.initConfig({
 });
 ```
 
-##Authors
+## Authors
 * Authors of the original work: Scott Jehl, Mat Marquis, Shawn Jansepar (2.0 refactor lead)
 * Authors of the improved **respimage** script: Alexander Farkas
 * and many more: see [Authors.txt](Authors.txt)
 
-##Contributing
+## Contributing
 Fixes, PRs and issues are always welcome, make sure to create a new branch from the **dev** (not the stable branch), validate against JShint and test in all browsers. In case of an API/documentation change make sure to also document it here in the readme.md.

how-respimg-works.md

@@ -1,9 +1,9 @@
-#How ``respimage`` works internally
+# How ``respimage`` works internally
 In case you want to know how to use ``respimage``, simply go to the [readme](README.md). This document describes some internal core concepts of ``respimage``.
 
 ``respimage`` uses several techniques to increase perceived performance or reduce bandwidth:
 
-##Polyfill vs. graceful degradation / progressive enhancement and "image data trashing"
+## Polyfill vs. graceful degradation / progressive enhancement and "image data trashing"
 Polyfilling responsive images with a fallback ``src`` can lead to a wasted / trashed double request in non-supporting browsers and therefore some polyfills recommend to fully omit the src attribute, which antagonizes the natively and [specified](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:attr-img-src-2) build-in graceful degradation support in responsive images. As it turns out it's also [not the](http://lists.w3.org/Archives/Public/public-respimage/2014Sep/0028.html) [best thing to do](https://twitter.com/grigs/status/327429827726561280) [performancewise](http://www.stevesouders.com/blog/2013/04/26/i/). As also a problem for search engine/bot visibility and the general validity of the document.
 
 While ``respimage`` also supports omitting the ``src`` attribute, ``respimage`` plays nicely with your progressive enhancement strategy (your valid markup) and does not waste an already started image download. respimage automatically adapts to your own ``src`` strategy by implementing various techniques:
@@ -18,7 +18,7 @@ As it turns out, the LQIP pattern works so nice, that it could also be used as a
 
 It's worth noting, that you must not use the smallest image in your fallback ``src`` to take advantage of this technique you can also use a medium sized image.
 
-##The ~~smart~~ or the "not-so-stupid" resource selection
+## The ~~smart~~ or the "not-so-stupid" resource selection
 Finding the best source for an image is simple math. In case a browser finds a ``srcset`` attribute with ``w`` descriptors. The browser needs to calculate the pixel density for each source candidate. Here is an example of the calculation:
 
 ```html

plugins/intrinsic-dimension/README.md

@@ -1,8 +1,8 @@
-#respimage - Intrinsic dimension / size /scaling plugin
+# respimage - Intrinsic dimension / size /scaling plugin
 
 The very lightweight 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. This scaling can be of course simply overwritten by any CSS selector.
 
-##Download and embed
+## Download and embed
 Simply download the ``ri.intrinsic.min.js`` and include it after the respimage script:
 
 ```html

plugins/mutation/README.md

@@ -1,8 +1,8 @@
-#respimage - Mutation plugin
+# respimage - Mutation plugin
 
 The mutation plugin extends ``respimage`` to automatically detect new responsive images in the document and additionally detects relevant attribute changes / mutations for responsive images. It also re-normalizes the ``getAttribute`` method in conjunction with the ``src`` and the ``srcset`` attribute. And adds getter and setter support for ``sizes`` and ``srcset`` as also getter support for the ``currentSrc`` property.
 
-##Download and embed
+## Download and embed
 Simply download the ``ri.mutation.min.js`` and include it after the respimage script:
 
 ```html

plugins/oldie/README.md

@@ -1,4 +1,4 @@
-#respimage - oldie plugin
+# respimage - oldie plugin
 
 This simple plugin adds support for IE6 and IE7. While **respimage** supports IE8 in strict/normal mode. This plugin is also needed in case IE8 is rendering a page in compatibility view or quirks mode. It depends on jQuery.
 

plugins/perfselection/README.md

@@ -1,14 +1,14 @@
-#respimage - perfselection plugin
+# respimage - perfselection plugin
 
 This plugin was removed.
 
-##perceived performance vs. perceived quality on retina devices
+## perceived performance vs. perceived quality on retina devices
 
 Use one or the combination of the following techniques:
 
-###constraining markup patterns via the ``picture`` element
+### constraining markup patterns via the ``picture`` element
 
-####Limitting high resolution candidates due to (max-width) fragmenting
+#### Limitting high resolution candidates due to (max-width) fragmenting
 ```html
 <picture>
     <!--[if IE 9]><video style="display: none;"><![endif]-->
@@ -38,7 +38,7 @@ Use one or the combination of the following techniques:
         alt="picture but without artdirection" />
 </picture>
 ```
-####Serve higher compressions to retina devices
+#### Serve higher compressions to retina devices
 ```html
 <picture>
 <!--[if IE 9]><video style="display: none;"><![endif]-->
@@ -66,8 +66,8 @@ Use one or the combination of the following techniques:
 </picture>
 ```
 
-###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