123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main>

  <article>

    <h1>progressive-image.js</h1>

    <p><a href="https://github.com/craigbuckler/progressive-image.js"><strong>GitHub</strong></a> | <a href="https://www.npmjs.com/package/progressive-image.js"><strong>npm</strong></a> | <a href="https://gum.co/vIjey"><strong>donate</strong></a> | <a href="https://twitter.com/craigbuckler">@craigbuckler</a> | <a href="https://craigbuckler.com/">craigbuckler.com</a></p>

    <p><code>progressive-image.js</code> implements a lazy-loading progressive image similar to those seen on <a href="https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/">Facebook</a> and <a href="https://jmperezperez.com/medium-image-progressive-loading-placeholder/">Medium</a>. A very small, blurred image is replaced with the full-resolution equivalent when the element is scrolled into view.</p>

    <p>Please use the code as you wish. <a href="https://twitter.com/craigbuckler">Tweet me @craigbuckler</a> if you find it useful and <a href="https://gum.co/vIjey">donate toward development</a> if you use it commercially.</p>

    <a href="https://ucarecdn.com/1b73ebf8-b2d6-40cc-abd6-945d4df883c9/mountain.jpg" data-srcset="https://ucarecdn.com/1b73ebf8-b2d6-40cc-abd6-945d4df883c9/-/resize/400x/mountain.jpg 400w, https://ucarecdn.com/1b73ebf8-b2d6-40cc-abd6-945d4df883c9/-/resize/800x/mountain.jpg 800w, https://ucarecdn.com/1b73ebf8-b2d6-40cc-abd6-945d4df883c9/mountain.jpg 1600w" class="primary progressive replace">
      <img src="https://ucarecdn.com/1b73ebf8-b2d6-40cc-abd6-945d4df883c9/-/resize/32x/-/grayscale/-/quality/lightest/mountain.jpg" class="preview" alt="mountain" />
    </a>

    <a href="https://ucarecdn.com/b86e2dd6-fb4d-49bb-93ff-86b596a69fcb/-/resize/500x/cave.jpg" class="boxout2 progressive replace">
      <img src="https://ucarecdn.com/b86e2dd6-fb4d-49bb-93ff-86b596a69fcb/-/resize/32x/-/quality/lightest/cave.jpg" class="preview" alt="cave" />
    </a>

    <ul>
      <li>saves unnecessary bandwidth</li>
      <li>fast loading, high performance, images loaded on view</li>
      <li>supports any image type (JPEG photographs are most appropriate)</li>
      <li>supports responsive images (<code>srcset</code> and <code>sizes</code> attributes)</li>
      <li>supports CSS background images</li>
      <li>small: 1,350 bytes of JavaScript, 440 bytes of CSS (minified)</li>
      <li>any CSS reveal effect can be applied</li>
      <li>no external dependencies - works with any framework</li>
      <li>makes up to three attempts if images fail to download</li>
      <li>works in all modern browsers (IE10+)</li>
      <li>progressively-enhanced to work in older browsers</li>
      <li>easy to use</li>
    </ul>

    <a href="https://unsplash.com/" data-href="https://ucarecdn.com/dc3dad83-e7b5-44cd-841a-dbf4000005d6/-/resize/500x/party.jpg" class="boxout1 progressive replace">
      <img src="https://ucarecdn.com/dc3dad83-e7b5-44cd-841a-dbf4000005d6/-/resize/32x/-/quality/lightest/party.jpg" class="preview" alt="party" />
    </a>

    <p>The preview image can be very small - perhaps 20px in width and saved with high JPEG compression. This typically results in an image less than 500 bytes in size. It be added to the page directly or inlined as a base-64 data URI.</p>

    <p>The large image can be any size but it must match the preview image's aspect ratio. For example, a preview image of 20x15 could be used for large image sizes including 200x150, 400x300, 1600x1200, etc. The page layout will jump if differing aspect ratios are used.</p>


    <h2>Basic example</h2>

    <p>The page must load the CSS and JavaScript. It can be placed anywhere on the page but, typically, the CSS is loaded in the <code>&lt;head&gt;</code> and the JS is loaded just before the closing <code>&lt;/body&gt;</code> tag:</p>

    <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.js&quot;&gt;&lt;/script&gt;</code></pre>

    <p>CDN URLs are shown above but you can also <code>npm i progressive-image.js</code> to install via npm and use a bundler.</p>

    <p>Create a link to the full-size image from the preview <code>img</code>. Add <code>progressive</code> and <code>replace</code> classes to the link and a <code>preview</code> class to the image:</p>

    <pre><code>&lt;a href=&quot;full.jpg&quot; class=&quot;progressive replace&quot;&gt;
  &lt;img src=&quot;tiny.jpg&quot; class=&quot;preview&quot; alt=&quot;image&quot; /&gt;
&lt;/a&gt;</code></pre>

    <p><strong>The preview and full-size images must have the same aspect ratio</strong>, e.g. 40x30 and 800x600.</p>

    <p>The full image is revealed when the preview is scrolled into view. CSS3 effects are used to fade and zoom the image:</p>

    <a href="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/500x/man.jpg" class="full progressive replace">
      <img src="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/32x/man.jpg" class="preview" alt="man" />
    </a>

    <p>After replacement, link-clicking is disabled and the HTML becomes:</p>

    <pre><code>&lt;a href=&quot;full.jpg&quot; class=&quot;progressive&quot;&gt;
  &lt;img src=&quot;full.jpg&quot; alt=&quot;image&quot; /&gt;
&lt;/a&gt;</code></pre>

    <p>If JavaScript or image loading fails, a blurred version of the preview image can be clicked to view the full image:</p>

    <a href="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/500x/man.jpg" class="full progressive">
      <img src="https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/32x/man.jpg" class="preview" alt="man" />
    </a>


    <h2>Retain the link</h2>

    <p>If you require a responsive image to remain a real link, use the <code>href</code> for the link address and add a <code>data-href</code> attribute with the large image URL:</p>

    <pre><code>&lt;a href=&quot;http://site.com/&quot;
   data-href=&quot;full.jpg&quot;
   class=&quot;progressive replace&quot;&gt;
     &lt;img src=&quot;tiny.jpg&quot; class=&quot;preview&quot; alt=&quot;image&quot; /&gt;
&lt;/a&gt;</code></pre>

    <p>Note that users will not be able to view the full image if downloading or JavaScript fails.</p>


    <h2>Alternative container elements</h2>

    <p>If necessary, any HTML element can be used with a <code>data-href</code> attribute rather than a link, e.g.</p>

    <pre><code>&lt;figure data-href=&quot;full.jpg&quot; class=&quot;progressive replace&quot;&gt;
  &lt;img src=&quot;tiny.jpg&quot; class=&quot;preview&quot; alt=&quot;image&quot; /&gt;
&lt;/figure&gt;</code></pre>

    <p>Note that users will not be able to view the full image if downloading or JavaScript fails.</p>


    <h2>Responsive images</h2>

    <p><a href="https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/">Responsive images</a> of differing sizes and resolutions can be defined in the container link/element using <code>data-srcset</code> and <code>data-sizes</code> attributes which map to the standard <code>srcset</code> and <code>sizes</code> attributes, e.g.</p>

    <pre><code>&lt;a href=&quot;small.jpg&quot;
   data-srcset=&quot;small.jpg 800w, large.jpg 1200w&quot;
   data-sizes=&quot;100vw&quot;
   class=&quot;progressive replace&quot;&gt;
     &lt;img src=&quot;preview.jpg&quot; class=&quot;preview&quot; alt=&quot;image&quot; /&gt;
&lt;/a&gt;</code></pre>

    <p><em>(carriage returns added to aid legibility)</em></p>

    <p>On replacement, the image code is transformed to:</p>

    <pre><code>&lt;img src=&quot;small.jpg&quot;
     srcset=&quot;small.jpg 800w, large.jpg 1200w&quot;
     sizes=&quot;100vw&quot;
     alt=&quot;image&quot; /&gt;</code></pre>

    <p>Modern browsers will load large.jpg when the viewport width is 800px or greater.</p>

    <h2>CSS background images</h2>

    <p><code>progressive-image.js</code> can replace CSS backgrounds.</p>

    <div class="full bgimg progressive replace">CSS background image</div>

    <p>Example HTML:</p>

    <pre><code>&lt;div class=&quot;bgimg progressive replace&quot;&gt;content&lt;/div&gt;</code></pre>

    <p>Any CSS selector can be used - a <code>bgimg</code> class has been added in this example. Set the full-size image in your CSS as normal, e.g.</p>

    <pre><code>.bgimg {
  background: url(large.jpg) 50% 50% no-repeat;
  background-size: cover;
}</code></pre>

    <p>then add a <code>.replace</code> definition with the smaller preview image:</p>

    <pre><code>.bgimg.replace {
  background-img: url(tiny.jpg);
}</code></pre>

    <p><code>tiny.jpg</code> is replaced with <code>large.jpg</code> as soon as the element appears in the viewport. Media queries can be used to load images of appropriate sizes.</p>

    <p>No CSS3 animation effects can be applied to background images. If effects are required, use a real image, set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">CSS <code>object-fit: cover</code></a>, and ensure it is rendered below other content in the container.</p>


    <h2>Usage notes</h2>

    <ol>
      <li><code>progressive-image.js</code> works in all browsers from IE10 and above. IE10/11 will not blur the preview image. Older browsers fallback to click-to-view.</li>

      <li>Only vertical scrolling is checked. All images in the horizontal plane will be loaded.</li>

      <li>Progressive images dynamically added to the page using JavaScript are loaded if the browser supports <code>MutationObserver</code> or when the viewport is scrolled/resized.</li>

      <li>Actual or perceived performance may be improved using an SVG preview image, <a href="https://css-tricks.com/data-uris/">inlined data URIs</a>, or <a href="http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/">intrinsic placeholders</a>.</li>
    </ol>


    <h2>Image credit</h2>

    <p>Images in this demonstration have been sourced from <a href="https://unsplash.com/">unsplash.com</a> and are credited to Alex Blăjan, Philippe Toupet, James Padolsey, Ashim D'Silva, and Levi Guzman.</p>

    <a href="https://ucarecdn.com/0ece37a9-3e7e-4692-9f95-d8dd0401345b/bridge.jpg" data-srcset="https://ucarecdn.com/0ece37a9-3e7e-4692-9f95-d8dd0401345b/-/resize/400x/bridge.jpg 400w, https://ucarecdn.com/0ece37a9-3e7e-4692-9f95-d8dd0401345b/-/resize/800x/bridge.jpg 800w, https://ucarecdn.com/0ece37a9-3e7e-4692-9f95-d8dd0401345b/bridge.jpg 1600w" class="primary progressive replace">
      <img src="https://ucarecdn.com/0ece37a9-3e7e-4692-9f95-d8dd0401345b/-/resize/32x/-/grayscale/-/quality/lightest/bridge.jpg" class="preview" alt="bridge" />
    </a>
  </article>

</main>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console