Sitenize gelen bir ziyaretçi WebP biçimini destekleyen bir tarayıcı kullanıyorsa, CDN ona görüntülerin tam olarak WebP sürümlerini verir (WebP sürümleri otomatik olarak CDN tarafı).
WebP kullanmaya neden değer?
Webp'yi kullanmak, Google Pagespeed Insights'taki "Modern Resim Biçimlerini Kullan" sorununu çözer.
Kısacası, WebP, diğer her şey eşitken, dosyayı eski biçimlere (png ve jpeg) göre daha iyi sıkıştırır - bu, barındırmada daha az yer kapladığı ve sayfayı görüntülerken tarayıcıda daha hızlı yüklendiği anlamına gelir.
WebP'nin uygulanması Google tarafından aktif olarak desteklenir - şu istatistikleri sağlarlar:
Ziyaretçinin tarayıcısı Webp'yi desteklemiyorsa, ziyaretçiye resimler orijinal formatta (png / jpeg) ancak önceden sıkıştırılmış / optimize edilmiş olarak verilir.
Ziyaretçi siteyi bir cep telefonundan açarsa, resimler yalnızca otomatik olarak sıkıştırılmakla veya Webp'ye dönüştürülmekle kalmaz, aynı zamanda genişlikleri de otomatik olarak küçülür (görüntülerin mobil İnternet'te indirilmesini daha da hızlandırmak için)
Görüntüler, her istekte anında dönüştürülmeyecek, optimize edilmeyecek ve sıkıştırılmayacaktır. İstenen görüntü için tüm bu işlemler CDN tarafından bir kez yapılacaktır. Arka planda, görüntülerin sitenizin ziyaretçisine teslimini yavaşlatmamak için.
.htaccess
veya php.ini
dosyanıza 1 satır eklemeniz yeterlidir..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
— CDN OptiPic hesabınızdaki sitenizin kimliğinginx -t
. nginx -s reload
.htaccess
üzerinden bağlantı (Apache proxy'si)#--------------------------------------- # 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
— CDN OptiPic hesabınızdaki sitenizin kimliği.htaccess
üzerinde değişiklik yapmadan önce, dosyanın yedeğini almanızı ve dosyaya FTP erişiminizin olduğundan emin olmanızı şiddetle tavsiye ederiz.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— CDN OptiPic hesabınızdaki sitenizin kimliği