Base : https://blog.lael.be/post/7605
Blog post : https://marshallku.com/web/tips/캐시-서버-구축하기
- Cache Images, Videos (png, jpg, jpeg, gif, webp, mp4, webm, svg)
- Create WebP Images, and cache them
Just place .webp
after the image's url to convert them in webp files.
eg. https://example.com/src/images/tmp.png.webp
You might use PHP lower than 8.0
Replace example.com
to your domain.
You should update both nginx.conf and index.php.
Create your own nginx configuration file with nginx.conf file in /etc/nginx/sites-available
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
and link that file in /etc/nginx/sites-available
Place every files in www folder in /home/cdn/www
sudo systemctl nginx restart
sudo systemctl php8.0-fpm restart
function imgToPicture($content)
{
preg_match_all('/<img(.+?)(src=\"(.+?)\")(.+?)(srcset="(.+?)")? ?\/?>/', $content, $matches);
$i = 0;
foreach ($matches[0] as &$image) {
// Replace domain to cache server domain
// Replaces https://example.com/img.png to https://img.example.com/img.png
$src = str_replace('//example', '//img.example', $matches[3][$i]);
$srcset = $matches[6][$i] ?? '';
$srcset = $srcset != '' ? preg_replace('/\/\/example/', '//img.example', $srcset) : '';
$webpSrcset = $srcset != '' ? preg_replace('/\.(png|jpe?g)/', '.$1.webp', $srcset) : '';
$tmp = "<picture><source type=\"image/webp\" srcset=\"{$src}.webp 1x,{$webpSrcset}\"></source><source srcset=\"{$src} 1x,{$srcset}\"></source><img{$matches[1][$i]}src=\"{$src}\"{$matches[4][$i]}srcset=\"{$srcset}\"></picture>";
$content = str_replace($image, $tmp, $content);
$i++;
}
return $content;
}
add_filter('the_content', 'imgToPicture');
Simple example with the code that I used for my wordpress theme.