Webpを使用すると、GooglePagespeedInsightsの「次世代フォーマットで画像を提供する」問題が解決されます。
つまり、WebPはファイルをより適切に圧縮し、他のすべての条件は古い形式(pngおよびjpeg)よりも優れています。つまり、ホスティングで占めるスペースが少なく、ページを表示するときのブラウザーでの読み込みが速くなります。
WebPの実装はGoogleによって積極的に推進されており、そのような統計を提供します:
画像の最適化は、視覚的な品質を損なうことなくサイズを最小化するためのグラフィックファイルの特別な処理です。
この手順を実行するには、かなり複雑なアルゴリズムが多数あります。ただし、これらはすべて同じ基準に基づいています。そこにあるすべてのサービスデータ(たとえば、ファイルを格納するプログラムの名前など)をグラフィックファイルから削除する必要があります。また、特別なプログラムを使用して、merge /滑らかな同様の色。
その結果、視覚的に変化のない同じ画像が得られます。ただし、このファイルのバイト単位のボリューム(重み)は、元のファイルよりもはるかに少なくなります。この処理が正しく行われていれば、画質を損なうことなく画像ファイルを98%に減らすことができます。
これは、サイトのページ上の画像が最適化後に何倍も速く読み込まれることを意味します。
Webサイトの高速化により、行動要因が改善されるだけでなく、Webサイトのコンバージョンが増加する(売上が増加する)ことが証明されています。サイトのページが長く読み込まれるほど、そこで特定のターゲットアクションを実行できる顧客は少なくなります。インターネット上のサイトが十分に速く機能しない場合は、潜在的な収入を逃す可能性があります。オンラインリソースの加速は、コンバージョンを改善する機会を提供し、これにより収益が大幅に増加し、より多くの顧客を引き付けることができます。
ほとんどの場合、サイトのページは次のもので構成されます。
画像などのアイテムは、サイトのページのボリューム全体の大部分を占め、ページの「最も重い」部分です。 画像の縮小(最適化)により、間違いなくオンラインリソースのダウンロードが大幅に高速化されます。
したがって、画像のサイズを変更(縮小)すると、サイトのすべてのページの読み込みがはるかに速くなります。
サイト上の画像を圧縮すると、視覚的な品質を損なうことなく、ボリュームを75〜98%に減らすことができます。
.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