Wenn ein Besucher Ihrer Site einen Browser verwendet, der das WebP-Format unterstützt, dann liefert ihm das CDN genau die WebP-Versionen der Bilder (WebP-Versionen werden automatisch auf dem CDN-Seite).
Warum lohnt es sich, WebP zu verwenden?
Die Verwendung von Webp behebt das Problem "Moderne Bildformate verwenden" in Google Pagespeed Insights.
Kurz gesagt, WebP komprimiert die Datei bei ansonsten gleichen Bedingungen besser als ältere Formate (png und jpeg) - was bedeutet, dass es weniger Platz auf dem Hosting benötigt und beim Anzeigen der Seite im Browser schneller geladen wird.
Die Implementierung von WebP wird von Google aktiv gefördert - sie liefern solche Statistiken:
Wenn der Browser des Besuchers Webp nicht unterstützt, erhält der Besucher die Bilder im Originalformat (png / jpeg), aber vorkomprimiert / optimiert.
Wenn der Besucher die Site von einem Mobiltelefon aus öffnet, werden die Bilder nicht nur automatisch komprimiert oder in Webp konvertiert, sondern auch automatisch in der Breite reduziert (um den Download von Bildern im mobilen Internet noch zu beschleunigen)
Bilder werden nicht bei jeder Anfrage im Handumdrehen konvertiert, optimiert und komprimiert. Alle diese Verfahren werden vom CDN einmal für das angeforderte Image durchgeführt. Im Hintergrund, um die Lieferung von Bildern an den Besucher Ihrer Website nicht zu verlangsamen.
.htaccess
oder php.ini
hinzuzufügen..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
— ID Ihrer Website in Ihrem CDN OptiPic-Kontonginx -t
. nginx -s reload
.htaccess
(Apache-Proxying)#--------------------------------------- # 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
— ID Ihrer Website in Ihrem CDN OptiPic-Konto.htaccess
ändern, empfehlen wir Ihnen dringend, eine Sicherungskopie der Datei zu erstellen und sicherzustellen, dass Sie über FTP-Zugriff auf die Datei verfügen.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— ID Ihrer Website in Ihrem CDN OptiPic-Konto