Add this line to your application's Gemfile:

gem 'progressive_loading'

And then execute:

$ bundle

Add this option to an image_tag progressive: thumbnail_path where image_path is the path to this image's thumbnail.

Example: <%= image_tag "image.jpg", class: "img-thumbnail", progressive: "image-tiny.jpg" %>

If you are rendering multiple images without a fixed dimension, you can see the content flashing when rendering the High Quality version of image. You can add the options size: :fixed, to the force the image dimension to the element.

Example: <%= image_tag "image.jpg", class: "img-thumbnail", width: 260, height: 170, progressive: {src: "image-tiny.jpg", size: :fixed} %>

Instead of an image placeholder, you can use a solid color, replace the src option with a color like so:

Example: <%= image_tag "image.jpg", class: "img-thumbnail", width: 260, height: 170, progressive: {color: "#dcdcdc", size: :fixed} %>