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