サイトへの訪問者がWebP形式をサポートするブラウザを使用している場合、CDNは画像のWebPバージョンを正確に提供します(WebPバージョンはCDN側)。
WebPを使用する価値があるのはなぜですか?
Webpを使用すると、GooglePagespeedInsightsの「UseModernImageFormats」の問題が解決されます。
要するに、WebPはファイルをよりよく圧縮し、他のすべての条件は古い形式(pngおよびjpeg)よりも優れています。つまり、ホスティングで占めるスペースが少なく、ページを表示するときのブラウザーでの読み込みが速くなります。
WebPの実装はGoogleによって積極的に推進されており、次のような統計を提供します。
訪問者のブラウザがWebpをサポートしていない場合、訪問者には元の形式(png / jpeg)の画像が提供されますが、事前に圧縮/最適化されています。
訪問者が携帯電話からサイトを開くと、画像は自動的に圧縮またはWebpに変換されるだけでなく、幅も自動的に縮小されます(モバイルインターネットでの画像のダウンロードをさらに高速化するため)
画像は、リクエストごとに毎回その場で変換、最適化、圧縮されるわけではありません。 これらの手順はすべて、要求された画像に対してCDNによって1回実行されます。 バックグラウンドで、サイトの訪問者への画像の配信を遅くしないようにします。
.htaccess
またはphp.ini
に1行追加するだけで十分です。.htaccess
php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"
php.ini
; Automatically add files before PHP document. ; http://php.net/auto-prepend-file auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php
# OptiPic CDN: insert it into the Server structure location ~* \.(png|jpg|jpeg)$ { resolver 8.8.8.8; # Google DNS set $cdn_host_value "cdn.optipic.io"; set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value if ($arg_no_optipic) { set $from_optipic "no"; set $cdn_host_value $host; } proxy_redirect off; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $cdn_host_value; if ($from_optipic = "yes") { rewrite ^/(.*) /site-XXXXXX/$1 break; proxy_pass http://$cdn_host_value; } # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic) try_files $uri 404; }
XXXXXX
— CDNOptiPicアカウントにあるサイトのIDnginx -t
. nginx -s reload
.htaccess
を介した接続(Apacheプロキシ)#--------------------------------------- # OptiPic CDN # Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module` # Add new 'IfModule mod_rewrite.c' block or inject into exist one # Get support: https://optipic.io/get-free-help/?cdn=1 <IfModule mod_rewrite.c> RewriteEngine On SSLProxyEngine On RewriteCond %{QUERY_STRING} !no_optipic= RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P] </IfModule> #----------------------------------------
XXXXXX
— CDNOptiPicアカウントにあるサイトのID .htaccess
を変更する前に、ファイルのバックアップを作成し、ファイルへのFTPアクセス権があることを確認することを強くお勧めします。<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— CDNOptiPicアカウントにあるサイトのID