Responsive images with rethumb

You can use rethumb to create multiple versions of an image and use them in a responsive way.

The following HTML example shows how to have two extra versions of a larger image. The original image have 999px of width, but the use rethumb to create two smaller versions with 400px and 800px for smaller screens.

<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" />;

Using PHP you can automate the HTML generation, passing only the original image an the new widths.

<?php
$image_url = "http://images.rethumb.com/image_coimbra_999x999.jpg";
$small_width = 400; // Image width for small resolutions (less than 400px).
$large_width = 800; // Image width for medium resolutions (less than 800px).
$image_width = 999; // Image original width (used for resolutions larger than 800px).
echo <<<END
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/2.3.1/picturefill.min.js"></script>;
<img src="http://api.rethumb.com/v1/width/{$small_width}/{$image_url}"
srcset="http://api.rethumb.com/v1/width/{$small_width}/{$image_url} {$small_width}w,
http://api.rethumb.com/v1/width/{$large_width}/{$image_url} {$large_width}w,
{$image_url} {$image_width}w"
sizes="100vw" />;
END;
?>;

Find this and more at http://rethumb.com/tutorials. Our documentation is online here.