jQuery smart_images Plugin Demos

The image below does not use the above markup, but a variant with more breakpoints. Inspect source to learn more. It is split into three slices to demonstrate the various downsize settings (always, never, loaded), in that order.

Theory/Concept

For simplicity let's divide the horizontal plane in half, with a single breakpoint at 768px. In media queries we would write the following:

    // this targets "mobile"
    h1 {
      font-size: 12px;
    }

    // this targets "desktop"
    @media only screen and (min-width: 768px) {
      h1 {
        font-size: 18px;
      }
    }

We can talk about this in terms of two ranges of x values:

  1. 0 - 767px
  2. 768+

Since we are talking about responsive images, and following the above layout, we need two (2) versions of the image:

  1. The first image needs to be 767px wide; to be displayed in our "mobile" context we just defined.
  2. The last image needs to have a sensible width that is greater than 768px. The size depends on your application, but might--for a standard website--be 1366px or 1080px, say.
Except for the last and widest breakpoint, the image width MUST match the `(max-width:...` in the `data-si-media` declaration. The last will NEVER match; the `data-si-srcset` will always be somewhat larger than the `data-si-media`.

jquery.smart_images is brought to you by In the Loft Studios