Fresh Images

Image manipulation and optimization for Fresh.

Install Documentation

Examples

Featuring Carrots the Cat!

Hotlink protection test

Hotlink protection test. This should only be visible on the Fresh Images demo page.
It's also an <img> tag, not a JSX component.

Custom transformer demo

This image has a placeholder. (Its placeholder is also transformed!)

Custom transformer demo

This is an example of the custom transformation function. It has also been resized to 400px wide.

This is an example of a transformer that has registered its own route.

Caption example

This example uses the custom caption transformation.

Cropped to 100px by 100px starting at 100px by 100px. Then resized to 200px by 200px.

This example shows multiple transformations being applied. The image is cropped to 100px by 100px, then resized to 200px by 200px.

Resized to 100px wide

Image resized to 100px wide

Resized to 100px tall

Image resized to 100px high

Resized to 100px by 100px

Image resized to 100px by 100px

Rotated 270 degrees

Image rotated 270°

Rotated 90 degrees

Image rotated 90°

Rotated -45 degrees

Image rotate -45°

Psst, these images may have been served from a cache! Look for the x-fresh-image-cache-hit and x-fresh-image-kv-hit headers in your browser's developer tools.