Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kvendrik/responsive-images.js

Lightweight plugin for easy responsive images replacement
https://github.com/kvendrik/responsive-images.js

Last synced: about 2 months ago
JSON representation

Lightweight plugin for easy responsive images replacement

Host: GitHub
URL: https://github.com/kvendrik/responsive-images.js
Owner: kvendrik
Created: 2013-11-07T14:08:28.000Z (almost 11 years ago)
Default Branch: master
Last Pushed: 2019-10-27T10:17:32.000Z (almost 5 years ago)
Last Synced: 2024-05-23T06:01:36.064Z (4 months ago)
Language: JavaScript
Size: 2.91 MB
Stars: 311
Watchers: 17
Forks: 52
Open Issues: 6
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        Responsive image replacement

============================

Check out the example [here](http://kvendrik.github.io/responsive-images.js).

resonsive-img.js is a lightweight plugin for fast, clean and easy responsive image replacement using to the viewport your visitor's browser. 

This way you can reduce the payload for your users by only letting them download the appropriate images for their device.

Have a look at the blog post [here](http://davidwalsh.name/responsive-design) for a more in-depth description.

Usage

-----

####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.

	

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.

Let's also create a fallback for non-javascript browsers:

	

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 |

Browser support

---------------

There are no known unsupported browsers. The plugin has currently been tested in the following browsers:

####Desktop

| Browser                   		 | Status | 

| ---------------------------------- | ------ |

| IE 11 Desktop                		 | Works! |

| IE 11 Release Preview     		 | Works! |

| IE 10   			        		 | Works! |

| IE 9   			        		 | Works! |

| IE 8                    			 | Works! |

| IE 7                    			 | Works! |

| IE 6                         		 | Works! |

| IE 5 (IE 10 desktop documentmode)  | Works! |

| Opera 10.6                		 | Works! |

| Opera 12.16               		 | Works! |

| Opera 15.0                		 | Works! |

| Opera 18.0 dev            		 | Works! |

| Safari 4.0                		 | Works! |

| Safari 5.0                		 | Works! |

| Safari 5.1                		 | Works! |

| Firefox 3                 		 | Works! |

| Firefox 12                		 | Works! |

| Firefox 24                		 | Works! |

| Firefox 26 aurora         		 | Works! |

| Chome 14                		     | Works! |

| Chome 19                		     | Works! |

| Chome 30                		     | Works! |

| Chome 31 dev            		     | Works! |

####Mobile

| OS               								  | Status |

| ----------------------------------------------- | ------ |

|  Windows Phone 8.0 (IE 10 desktop documentmode) | Works! |

|  Windows Phone 7.0 (IE 10 desktop documentmode) | Works! |

|  Android 1.5     							      | Works! |

|  Android 1.6     								  | Works! |

|  Android 2.2     								  | Works! |

|  Android 2.3     								  | Works! |

|  Android 4.0     								  | Works! |

|  Android 4.0 (tablet) 				          | Works! |

|  Android 4.1     							      | Works! |

|  Opera Mobile    							      | Works! |

|  iOS 3.0         							      | Works! |

|  iOS 3.2 (tablet) 							  | Works! |

|  iOS 4.0         							      | Works! |

|  iOS 4.3.2 (tablet) 						      | Works! |

|  iOS 5.1         								  | Works! |

|  iOS 6.0         								  | Works! |

|  iOS 7.0         								  | Works! |

####Notes

######iOS

Without meta `width=device-width;` some mobile devices will apply a standard width to it's viewport of 960px and return this to the javascript. This might cause the script to load an image which is to big for your visitors screen. Make sure to set a meta tag with `width=device-width;` in your website's head.

Comments

--------

Let me know if you have idea’s or notice something, I would love to hear your feedback!