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.


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