Categories
Optimize cached images
Caching rocks!
Caching images is a well-known practice for website optimization. After the first visit, the browser downloads images and stores them in the cache. When the page is visited again, images are taken out from the cache. Therefore, the browser makes fewer HTTP requests. So page loads faster.
Why to avoid query string
When an image is changed or replaced, we have to inform the browser to download the new image. So we have to change the filename. Some developers append a random string or file version after the filename. That works in most cases. Note that some proxies refuse to cache files with query string. To overcome this drawback use a file modification time in a filename. Let's see how in details.
Optimize Cached Images in 5 steps
- Set cache policy for image requests:
<IfModule mod_headers.c> <FilesMatch "\.(jpe?g|png|gif|webp)$"> Header set Cache-Control "public, no-transform, max-age=31536000" </FilesMatch> </IfModule>
- Set a far-future
expires
header:<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/webp "access plus 1 year" </IfModule>
- Use a file modification time in filename
<?php function getImage($filename) { if (!file_exists($filename)) { return FALSE; } # Gets file extension $arr = explode('.', $filename); $extension = strtolower($arr[count($arr) - 1]); # Gets file modification time clearstatcache(); $time = filemtime($filename); $position = strripos($filename, '.'.$extension); return sprintf('%s-%s.%s', substr($filename, 0, $position), $time, $extension); } ?> <img src="<?php echo getImage('image.png'); ?>"> <!-- The above code will produce: <img src="image-1461525283.png"> -->
- Rewrite new filename to match the file on server
<IfModule mod_rewrite.c> RewriteRule ^(.*)-\d{10}\.(jpe?g|png|gif|webp)$ $1.$2 [L,NC] </IfModule>
- Remove
etag
header<IfModule mod_headers.c> Header unset ETag </IfModule> FileETag none
Conclusion
Using a htaccess to rewrite the image filename is a bit slower than serving a file from disk. However, the overall improvement of speed is much bigger.
If you have questions about image optimization, please leave a comment below. Thanks so much for reading!
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed