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.

Get Exif data in json from an image

To get Exif data from an image you can use the exif request. Note: you will need a paid plan to use this feature.

The following request will get all Exif data from the given image and return it in Json format:

http://api.rethumb.com/v1/exif/all/http://images.rethumb.com/image_exif_1.jpg

Output:

{
"FILE": {
"FileName": "image_exif_1.jpg",
"FileDateTime": "1409958035",
"FileSize": "62411",
"FileType": "2",
"MimeType": "image/jpeg",
"SectionsFound": "ANY_TAG, IFD0, THUMBNAIL, EXIF, GPS, INTEROP"
},
"COMPUTED": {
"html": "width="500" height="375"",
"Height": "375",
"Width": "500",
"IsColor": "1",
"ByteOrderMotorola": "0",
"ApertureFNumber": "f/5.9",
"UserComment": "",
"UserCommentEncoding": "UNDEFINED",
"Thumbnail.FileType": "2",
"Thumbnail.MimeType": "image/jpeg"
},
...
"GPS": {
"GPSVersion": "u0002u0003",
"GPSLatitudeRef": "N",
"GPSLatitude": [
"41/1",
"53/1",
"23487/1000"
],
"GPSLongitudeRef": "E",
"GPSLongitude": [
"12/1",
"29/1",
"10362/1000"
],
"GPSAltitudeRef": "",
"GPSAltitude": "56819/1000",
"GPSTimeStamp": [
"15/1",
"7/1",
"33998/1000"
],
"GPSStatus": "A",
"GPSMeasureMode": "3",
"GPSDOP": "13552/10000",
"GPSSpeedRef": "K",
"GPSSpeed": "955/1000",
"GPSTrackRef": "T",
"GPSTrack": "34442/100",
"GPSImgDirectionRef": "M",
"GPSImgDirection": "4775/100",
"GPSMapDatum": "WGS-84",
"GPSDateStamp": "2011:12:31",
"GPSDifferential": "0"
},
"INTEROP": {
"InterOperabilityIndex": "R98",
"InterOperabilityVersion": "0100"
}
}

It is also possible to get a specific Exif tag by passing the key in hexadecimal (more about tags at http://www.exiv2.org/tags.html):

http://api.rethumb.com/v1/exif/110/http://images.rethumb.com/image_exif_1.jpg

Output:

{
"Model": "DSC-HX9V"
}

Documentation is online here.

New parameter: version

This new parameter will offer the chance to create a new thumbnail from the same URL. This is useful if an image change over time but the URL stay the same.

Example, without version parameter:

http://api.rethumb.com/v1/width/100/http://factor45.org/images/beach.jpg

With version parameter:

http://api.rethumb.com/v1/width/100/version/v2/http://factor45.org/images/beach.jpg

This version (v2) will create a fresh thumbnail. If the image changed, each rethumb URL will have a different thumbnail, like a snapshot in time.

The version parameter have a maximum of 16 characters and accepts A-Z, a-z and 0-9.

Website Changes

On the past months we have been working on a few changes in our website that we’ll release soon (better documentation and tutorials).

We are also making some improvements on our engine, preparing it for new features in the near future.

Paid plans are coming, starting at 15$/year.