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=""></script>;
<img src=""
srcset=" 400w, 800w, 999w"
sizes="100vw" />;

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

$image_url = "";
$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=""></script>;
<img src="{$small_width}/{$image_url}"
srcset="{$small_width}/{$image_url} {$small_width}w,{$large_width}/{$image_url} {$large_width}w,
{$image_url} {$image_width}w"
sizes="100vw" />;

Find this and more at Our documentation is online here.