Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript CSS Ruby
Branch: master

Put width: 100% into a silent selector

Signed-off-by: Ralf Koller <r.koller@gmail.com>
latest commit 56d23f49a0
@rpkoller rpkoller authored
Failed to load latest commit information.
demo
.gitignore Add DS_Store, codekit-config.json and .sass-cache to .gitignore
README.md
bower.json
config.rb
pictureserve.js
pictureserve.min.js

README.md

Pictureserve

An easy to maintain responsive vanilla Javascript image solution.

About

There are already many responsive image solutions out there, especially Scott Jehls Picturefill plugin is worth a look; even native support in browsers is on the horizon. All these solutions are tiny, fast and sementically well laied out, but each shares one major flaw - maintainability. For pages with just a few pictures these are more than viable approaches but with a rising number of objects the amount of time to create markup and image versions increases exponentially. The same with adding new images, with all the different version of them necessary or just the change of existing markup, images and breakpoints. That is where Pictureserve steps in by offering a tiny, fast, semantic as well as maintainable solution.

Setup and usage

You have to place the script call of pictureserve.js within the head.

<script type="text/javascript" src="pictureserve.js"></script>

Right before the body tag is closed a second script call is placed. Extend your existing JS file at the end of the document or add a new one and name it as you like (e.g. script.js).

<script type="text/javascript" src="js/script.js"></script>

At the top of the pictureserve.js file the plugins default settings are defined. The default stack of breakpoints, the name of the class Pictureserve is looking for within the HTML and the basic retina settings are set. Per default retina images are disabled.

defaults: {
    breakpoints: [400, 800, 1200],
    hook: "pserve",
    retina: {
        retina: false,
        retina_suffix: "_x", // or _@
        retinaDensities: [1.5, 2, 3]
    }
}

Within the script.js file you could create a simple Pictureserve instance based on the default settings.

var ps_basic = new Pictureserve();
ps_basic.init();

If you enter your own settings the default values are overridden. You can specify the stack of your desired breakpoints, a custom HTML hook class and in case you set retina to true a custom suffix as well as the desired retina densities.

var retina = {
    retina: true,
    retina_suffix: "_x",
    retinaDensities: [1.5, 2]
};

var pserveOptions_general = {
    breakpoints: [420, 650, 1000, 1200],
    hook: "psBase",
    retina: retina
};

var ps_general = new Pictureserve();
ps_general.init(pserveOptions_general);

HTML markup wise the only visible trace of Pictureserve is the hook class you've chosen (pserve by default). But aside that it doesn't matter where your images are placed - they can stay within the root directory but subdirectories are applicable as well.

<img src="images/myImage.gif" alt="" class="pserve" />
<img src="images/subdirectory/yourImage.gif" alt="" class="pserve" />

One instance of Pictureserve

Let's assume the following scenario:

<img src="images/myImage.gif" alt="my very own image" class="psGeneral" />
var retina = {
    retina: true,
    retina_suffix: "_x",
    retinaDensities: [1.5, 2]
};

var pserveOptions_general = {
    breakpoints: [420, 650, 1000, 1200],
    hook: "psGeneral",
    retina: {
            retina: true,
            retina_suffix: "_x",
            retinaDensities: [1.5, 2]
        }
};

It would require you to prepare the following set of images.

myImage_420.gif            //covers a width between 420 and 649px
myImage_420_x1.5.gif
myImage_420_x2.gif
myImage_650.gif            //covers a width between 650 and 999px
myImage_650_x1.5.gif
myImage_650_x2.gif
myImage_1000.gif           //covers a width between 1000 and 1199px
myImage_1000_x1.5.gif
myImage_1000_x2.gif
myImage_1200.gif           //covers a width between 1200 px and maximum container width
myImage_1200_x1.5.gif
myImage_1200_x2.gif
myImage.gif                //covers a width between the minimum container width and 419px
myImage_x1.5.gif
myImage_x2.gif

The naming conventions for images are:

  • First your unique filename (myImage)
  • Followed by an underscore and the breakpointvalue (e.g. _420)
  • At last you add an _x as the suffix, or the format you have specified, paired with the pixel density (e.g. _x2)

More than one instance of Pictureserve

You aren't limited to just one stack of breakpoints. You are able to create as many instances hence breakpoint stacks as necessary.

var retina = {
    retina: true,
    retina_suffix: "_x",
    retinaDensities: [1.5, 2]
};

var pserveOptions_col3 = {
    breakpoints: [420, 750, 1300],
    hook: "psCol3",
    retina: {
            retina: true,
            retina_suffix: "_x",
            retinaDensities: [1.5, 2]
        }
};

var pserveOptions_col5 = {
    breakpoints: [420, 750, 950, 1000, 1200],
    hook: "psCol5",
    retina: {
            retina: true,
            retina_suffix: "_x",
            retinaDensities: [1.5, 2]
        }
};

var ps_col3 = new Pictureserve();
ps_col3.init(pserveOptions_col3);

var ps_col5 = new Pictureserve();
ps_col5.init(pserveOptions_col5);

Pictureserve and other plugins

There aren't any known issues with other plugins which use images like sliders (e.g. Flexslider) or lightboxes (e.g. Colorbox). In the case you run into any, please let us know. Thanks!

Pictureserve used in an iFrame within a lightbox plugin

The only thing to mind is that you need to have the Pictureserve script call in the head and the script initialisation call right before the body tag closes within the HTML file you are loading inside the iFrame. A word of advice - if you use only one breakpoint stack within the loaded HTML it would be reasonable to alter the default settings within the picturesserve.js file to save a few bits of text.

How things work

The programmatic logic behind every Pictureserve instance initialisation. You define your preferences within the script.js file; if there aren't any, Pictureserve uses its default values. Then Pictureserve gets all the images assigned to the "pserve" class, or the one you've chosen. The parts of the filename between the unique name and the fileextension get stripped and Pictureserve is choosing, based on the innerWidth viewport, which of the files in the declared location is used. No extra markup is necessary for non mediaquery browsers as well as for no-js situations. The former is covered since Pictureserve isn't using any mediaqueries at all, neither in the markup, nor in the script itself. The latter couldn't happen neither because the browser just falls back to the filename initially declared in the HTML file. That approach ensures two things:

  • Graceful degradation without Javascript - In the case Javascript isn't available the visitor is still served with the smallest initial images.
  • A mobile first approach to save bandwidth - The smallest versions of the images get loaded first, larger versions get served on wider viewports.

Roadmap

  • Refactor and shrink the codebase for maximum performance
  • Provide an option to scale and name different versions of a large input image automatically based on the given settings

Changelog

Version 1.1.1 (15-11-2013)

  • A quick fix for the layout of the simple and complex example

Version 1.1.0 (15-11-2013)

  • Added the option to choose the name of the HTML hook
  • Added a second, more complex, demo

Version 1.0.0 (05-11-2013)

  • Initial release

License

The MIT License (MIT)

Copyright (c) [2013] Andreas Geibert, Ralf Koller

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credits

Something went wrong with that request. Please try again.