caching dynamic images with Laravel Intervention l

Question

I am using Laravel 5 at the moment and taking advantage of the intervention image integration: http://image.intervention.io/

I am using it dynamically so images have a URL like this:

http://example.org/media/1600x340/2/image_name.jpg

So all working, but im noticing these images will not cache. Other do, but not my dynamic ones.

This is my htaccess

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl)$">
    Header set Cache-Control "max-age=31536050"
</FilesMatch>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

If I actually connect via FTP and look at the cached images, they are stored like this:

/storage/framework/cache/55/ba/0245f7453543100cf0aaa4709eca82f4

What is the point in caching if it has to reload it every time? I suspect the problem is that the browser doesn't know what these files are (they have no extension) so it doesn't cache them.

Here is some example laravel code:

$cache_image = Image::cache( function ( $image ) use ( $size, $name ) {
    return $image->make( url( '/uploads/' . $name ) )->resize( $size[0], $size[1], function ( $constraint ) {
        $constraint->aspectRatio();
        $constraint->upsize();
    } );
}, $cache_length )->sharpen(5);

...

return Response::make( $cache_image, 200, [ 'Content-Type' => 'image' ] );

Header in chrome looks like this:

GET /media/1600x340/2/img_0033-copy.jpg HTTP/1.1
Host: mywebsite.com.au
Connection: keep-alive
Accept: image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36 FirePHP/4Chrome
Referer: http://mywebsite.com.au/functions
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Cookie: __cfduid=d4fee20f7753d88962b94c880cec57f981435071761; _gat=1; _ga=GA1.3.1903752380.1435076392; XSRF-TOKEN=eyJpdiI6IkFpMHJDTDZtTTVoczVaSkxaZ1hjNmc9PSIsInZhbHVlIjoiVlVRSk1ibCtCWHpZNW5SQkl0NTA2bVN2Tmh4c0N6aW5TWGZ1Njk1WG1Gb05XXC91dW5DYjdLNWpGXC9kSWFsYXZ6bDZMQ0NmZE15UlVvMFV3OEN1bWJPZz09IiwibWFjIjoiZGI1OTYwM2IwZTNhYWFlM2I5NGExNTkzNTlkN2YxNGI4Y2IzNjI5ODU5Y2RjNTRkODYxMWIxNDJiMDM3NGI5YyJ9; laravel_session=eyJpdiI6Ikc5a3ZibmZraG9aZElnYWFKUG5CWHc9PSIsInZhbHVlIjoiblRWcDRxQW9ORGl0RFdubDJ3NTdXR3lNdUcyWmtnSkEyXC9sZFI3VWQ2NkVBdUxJNWVpZU5ubEZ2RG1HbVF6SHdYNFhob21UOEVjOVZxMklKdndxQ3dBPT0iLCJtYWMiOiIwMThlMGZkMTdlNWM5MDQ4OWYxNzIwMzE2NzhhMzEzMjg1MGM4NjI2NzRkMmJhMWEzNmUzN2MyNjJhYzdjNjQ1In0%3D
X-FirePHP-Version: 0.0.6
X-Wf-Max-Combined-Size: 261120

Any ideas? Hopefully I can sort this out with the htaccess file

Answer 1

you can cache it at browser side. simply add header to response as below,

return Response::make( $cache_image, 200, [ 'Content-Type' => 'image' ] )
       ->setMaxAge(604800) //seconds
       ->setPublic();