How to auto compress images on my Laravel/OctoberCMS site?

- 1 answer


I've developed some OctoberCMS sites (a CMS built on Laravel) but I have a huge issue in images on the sites. The sites are very slow because of the images on it.

So tried to minify all the css and js files but still very slow. So I'm wondering is there a package that I can use that can compress every image uploaded to site?

What's the best solution? I searched a lot but got nothing useful.




Best way to optimise you image is to use the right size in the frontend. OctoberCMS provide you a build in thumbnail generator.

<img src="{{ image.thumb(200, 200, {mode:'auto',quality:85}) }}" title="{{ image.title }}" alt="{{ image.description }}">

with this function you can set the size, the quality of compression and the mode : mode auto, exact, portrait, landscape, crop. Default: auto

Also do not forget to add expiration to your image

# BEGIN Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript A2592000
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# END Expire headers

This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.

These HTTP headers are an instruction to the client about the document's validity and persistence. If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered "expired" and invalid, and a new copy must be obtained from the source. This speed up the site because the browser don't have to load again and again the same images.

more info :