Best Practice to Cache Images with .htaccess – Site Optimization Tutorial

Cache website images can speed up our website, in this tutorial, we will introduce an easy way to do this: Using a .htaccess file to cache our site images.

How to cache images with .htaccess?

To make browse cache our images, we should send a cache-control response header. Here is an example for Cache-Control:

To cache images, we should be sure:

1. What types of images you plan to cache?

We can cache images, such as jpg, jpeg, png, gif and webp etc al.

2. How long you want to browser cache images?

One day? One week or month?

Here is an example to use .htaccess to ask browser to cache our images.

​# One month for image files
<filesMatch ".(jpg|jpeg|png|gif|ico|webp)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

filesMatch: Tell browser to cache what types of images.

max-age: set how long time brower will cache.

For example:

One day: 24 * 60 *60 = 86400

One week: 7 * 86400 = 604800

One month: 30 * 86400 = 2592000

Here is a result after using code above.