We will take a closer look at the script by Matt Wilcox. You can download the recent version from the following website:
This script relies on redirecting all requests for files (jpeg/gif/png) to adaptive-images.php
. To use it, we need to set up at least three things:
Resolutions in
adaptive-images.php
—set values in the array as follows:$resolutions = array(1200, 800, 480, 320);
This is the same as your media queries. Actually, you can add more if necessary. As we have media query stops only at 320px and 800px, I added 1200px and 480px, which allows for resizing full-width images to this resolution.
Another variable in
adaptive-images.php
worthy of some thought is:$cache_path = "ai-cache";
This sets the path for generating resized images and has to be specified relative to the document root.
As we have images inside the assets directory, we need to either comment it out in the file
.htaccess
, as shown in the following line of...