🚨 rethumb will shutdown on September 4th, 2021 🚨 (Twitter)

<< More Tutorials

How to make an image responsive in HTML using rethumb?

The following code prints HTML with responsive images support. It's ready to use and defines three levels of resolution: 400px, 800px and original image.

Adapt and start using the following code in HTML (we use Picturefill as polyfill):

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/2.3.1/picturefill.min.js"></script>

<img src="http://api.rethumb.com/v1/width/400/http://images.rethumb.com/image_coimbra_999x999.jpg"

     srcset="http://api.rethumb.com/v1/width/400/http://images.rethumb.com/image_coimbra_999x999.jpg 400w,
             http://api.rethumb.com/v1/width/800/http://images.rethumb.com/image_coimbra_999x999.jpg 800w,
             http://images.rethumb.com/image_coimbra_999x999.jpg 999w"

     sizes="100vw" />

Start using this example now

Use the following commands to get started:

$ git clone https://github.com/rethumb/rethumb-html-examples.git
$ cd rethumb-html-examples
$ open responsive-images.html

More examples using HTML