Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
An experiment in client-side responsive imagery
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

An experiment in clientside responsive imagery

I'm trying to come up with a solution which:

  • Shows content without js
  • Entirely clientside
  • Keeps the media queries in CSS
  • Fast enough to work on resize

However, this solution is dirty as hell, but it works, here's an example.


First, surround your image, or set of images with some dirty-magic script elements:

<script class="responsive-gallery">document.write('<' + '!--')</script><noscript>
    <a href="">
        <img src="" alt="">
</noscript -->

Dirty isn't it? Anyway, then include responsiveGallery.js, and initialise your gallery:

    scriptClass: 'responsive-gallery',
    testClass: 'responsive-test',
    initialSuffix: '_t.jpg',
    suffixes: {
        '1': '_t.jpg',
        '2': '_m.jpg',
        '3': '.jpg'

This will create a test element on the page with class "responsive-test". When that element has a width of 1px, your images will have a suffix of "_t.jpg", when it has a width of 2px, your images will have a suffix of "_m.jpg". As you can see, you can change those to whatever you want.

Then in your CSS:

.responsive-test {
    width: 1px;
@media all and (min-width: 640px) {
    .responsive-test {
        width: 2px;

Ohh it's so dirty. Yum yum.

Something went wrong with that request. Please try again.