Jeśli odwiedzający Twoją witrynę korzysta z przeglądarki obsługującej format WebP, CDN przekazuje mu dokładnie wersje WebP obrazów (wersje WebP są generowane automatycznie na stronie CDN).
Dlaczego warto korzystać z WebP?
Korzystanie z Webp rozwiązuje problem „Użyj nowoczesnych formatów obrazów” w Google Pagespeed Insights.
Krótko mówiąc, WebP kompresuje plik lepiej, wszystkie inne rzeczy są takie same, niż starsze formaty (png i jpeg) - co oznacza, że zajmuje mniej miejsca na hostingu i szybciej ładuje się w przeglądarce podczas przeglądania strony.
Wdrożenie WebP jest aktywnie promowane przez Google - dostarczają takie statystyki:
Jeśli przeglądarka odwiedzającego nie obsługuje Webp, odwiedzający otrzymuje obrazy w oryginalnym formacie (png / jpeg), ale wstępnie skompresowane / zoptymalizowane.
Jeśli odwiedzający otworzy witrynę z telefonu komórkowego, obrazy są nie tylko automatycznie kompresowane lub konwertowane do Webp, ale także automatycznie zmniejszane w szerokości (aby jeszcze bardziej przyspieszyć pobieranie obrazów w mobilnym Internecie)
Obrazy nie będą konwertowane, optymalizowane i kompresowane w locie za każdym razem przy każdym żądaniu. Wszystkie te procedury zostaną wykonane przez CDN raz dla żądanego obrazu. W tle, aby nie spowalniać dostarczania obrazów odwiedzającemu Twoją witrynę.
.htaccess lub php.ini..htaccessphp_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 — Identyfikator Twojej witryny na koncie CDN OptiPicnginx -t. nginx -s reload.htaccess (proxy 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 — Identyfikator Twojej witryny na koncie CDN OptiPic.htaccess zdecydowanie zalecamy wykonanie kopii zapasowej pliku i upewnienie się, że masz dostęp do pliku przez FTP.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — Identyfikator Twojej witryny na koncie CDN OptiPic