TomatoCart üzerindeki tüm resimler WebP'ye nasıl dönüştürülür

CDN OptiPic — "Görüntüleri yeni nesil formatlarda sunun" sorununa basit çözüm
Anında akıllı WebP görüşmesi
OptiPic CDN, ondan bir görüntü istemeye çalışırken ne yapar:
  • Resmin WebP sürümünü döndürür.
    tarayıcı WebP biçimini destekliyorsa
  • Webp olmadan sıkıştırılmış bir sürüm döndürür
    tarayıcı WebP'yi desteklemiyorsa
  • Mobil ekranlara duyarlı hale getirir
    görüntü bir cep telefonundan açılırsa
  • Önbelleğe alır ve yüklemeyi hızlandırır
    hostinginizden gelen yükü azaltmak
  • Resimlerinizi
    korur
    EXIF ve IPTC etiketleriyle telif hakkını korumak
  • Usa il tuo
    nome di dominio
    per caricare immagini da img.domain.com, ecc
  • Tembel yükleme
    resimler
    Sayfalar arasında gezinirken resimler yüklenir
Webp'ye dönüştürme ve görüntü sıkıştırma arka planda gerçekleşir ve tarayıcıda görüntülerin açılmasını yavaşlatmaz.
Optimize edilmiş sürüm, görüntü talebi sırasında henüz hazır değilse, herhangi bir işlem yapılmadan orijinal sürüm döndürülür.
Sitedeki resimlerin optimizasyonunu sağlayan şey
  • Siteyi
    hızlandırma
  • İyileştirme
    SEO
  • Dönüşümün
    artırılması
  • Google Pagespeed Insights'ın
    Artırılması

Neden TomatoCart için WebP kullanmaya değer mi?

Webp'yi kullanmak, Google Pagespeed Insights'taki "Görüntüleri yeni nesil biçimlerde sunun" sorununu çözer.

Kısacası, WebP, diğer her şey eşit olmak üzere, 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 desteklenmektedir - şu istatistikleri sağlarlar:

  • WebP, görüntüleri kayıpsız bir şekilde PNG'den %26 daha iyi sıkıştırır.
  • WebP, aynı yapısal benzerlik indeksi (SSIM) ile kayıplı görüntüleri JPEG'den %25-34 daha iyi sıkıştırır
  • WebP, yalnızca %22'lik bir boyut artışıyla kayıpsız şeffaflığı (alfa olarak bilinir) destekler.

Ziyaretçinin tarayıcısı WebP'yi desteklemiyorsa, CDN eski formatı (png / jpeg) ancak sıkıştırılmış (Web için optimize edilmiş) döndürür

Görüntü sıkıştırma nedir

Görüntü optimizasyonu, görsel kalite kaybı olmadan boyutunu en aza indirmek için bir grafik dosyasının özel olarak işlenmesidir.

Bu prosedürü gerçekleştirmek için çok sayıda oldukça karmaşık algoritma vardır. Ancak, hepsi aynı temele dayanmaktadır - oradaki tüm hizmet verileri (örneğin, dosyayı depolayan programın adı vb.) grafik dosyasından kaldırılmalı ve ayrıca özel programlar kullanılarak birleştirme / pürüzsüz benzer renkler.

Sonuç olarak, görsel olarak değişmeyen aynı görüntüyü elde ederiz. Ancak, bu dosyanın bayt cinsinden hacmi (ağırlığı) orijinalinden çok daha az olacaktır. Bu işlem doğru yapılırsa, görüntü kalitesinden ödün vermeden görüntü dosyası %98'e düşürülebilir.

Bu, sitenin sayfalarındaki resimlerin optimizasyondan sonra çok daha hızlı yükleneceği anlamına gelir.

Siteniz için resimleri ne optimize edecek

  • Disk alanından tasarruf edin.
  • Sayfa yüklemeyi hızlandırın.
  • Minimum sunucu yükü.
  • Dönüşümünü artırın.
  • Arama sonuçları için daha iyi site sıralaması.

Web sitesi hızlandırmanın davranışsal faktörleri iyileştirebileceği ve web sitesi dönüşümünü artırabileceği (satışları artırabileceği) kanıtlanmıştır. Sitenin sayfası ne kadar uzun yüklenirse, oradaki belirli hedef eylemleri o kadar az müşteri gerçekleştirebilir. İnternetteki siteniz yeterince hızlı çalışmıyorsa, potansiyel gelirinizi kaçırmak için her şansınız var. Çevrimiçi kaynağın hızlandırılması, dönüşümü iyileştirme fırsatı sağlayacak ve bu nedenle geliri önemli ölçüde artıracak ve daha fazla müşteri çekecektir.

OptiPic Avantajları

  • Aylık ödeme yoktur.
  • Tam Otomasyon.
  • Ücretsiz bağlantı yardımı.
  • Hizmeti bağlamak ve kullanmak için programlama veya yönetim konusunda özel becerilere sahip olmanız gerekmez.
  • Sistemde görüntü boyutuyla ilgili herhangi bir kısıtlama yoktur.
  • Güler yüzlü teknik destek.

Resimleri TomatoCart için optimize etmek bir siteyi nasıl hızlandırabilir?

Herhangi bir sitenin sayfası çoğunlukla şunlardan oluşur:

  • görüntüler;
  • html kodu (metin içeriği, düzen, işaretleme);
  • video;
  • tarayıcıdan çalıştırılan mantıkla javascript betikleri;
  • sayfa stillerine sahip css dosyaları.

Resim gibi bir öğe, site sayfalarındaki tüm hacmin çoğunu kaplar ve sayfaların "en ağır" kısmıdır. Görüntülerin azaltılması (optimizasyonu) şüphesiz herhangi bir çevrimiçi kaynağı indirmeyi önemli ölçüde hızlandıracaktır.

 

Buna göre, resimlerin boyutunu değiştirirseniz (azaltırsanız), sitenin tüm sayfaları çok daha hızlı yüklenmeye başlar.

Sitedeki resimleri sıkıştırmak, görsel kalitelerini kaybetmeden hacimlerini %75-98'e düşürmeyi mümkün kılacaktır.

OptiPic CDN nasıl bağlanır TomatoCart?

Seçenek #1: PHP üzerinden evrensel bağlantı (GitHub kitaplığı)

Sitedeki görsellerin URL'leri otomatik olarak değişir. .htaccess veya php.ini dosyanıza 1 satır eklemeniz yeterlidir.

Bağlantı örneği .htaccess

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

Bağlantı örneği 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
GitHub'da kitaplık
istek üzerine ücretsiz entegrasyon

Seçenek #2: Nginx proxy üzerinden evrensel bağlantı

Sitedeki görsellerin URL'leri değişmez. Şu anda tüm görüntü trafiği otomatik olarak OptiPic CDN'ye geçiyor
# 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ği
Nginx'i yeniden başlatmadan önce yapılandırmanın yeni sürümünün doğruluğunu kontrol etmenizi şiddetle tavsiye ederiz. Bunu komutla yapabilirsiniz nginx -t.
Yumuşak yeniden yükleme (yapılandırmaları yeniden okuyun) Nginx komutla olabilir nginx -s reload

Nginx proxy belgeleri
Bağlanmak için ücretsiz yardım alın
Görüntünün OptiPic CDN aracılığıyla yüklenip yüklenmediğini kontrol edin
Ücretsiz entegrasyon alın
ücretsiz tarifede bile

Seçenek #3: .htaccess üzerinden bağlantı (Apache proxy'si)

Sitedeki görsellerin URL'leri değişmez. Şu anda tüm görüntü trafiği otomatik olarak OptiPic CDN'ye geçiyor
#---------------------------------------
# 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.
Bağlanmak için ücretsiz yardım alın
Görüntünün OptiPic CDN aracılığıyla yüklenip yüklenmediğini kontrol edin
Ücretsiz entegrasyon alın
ücretsiz tarifede bile

Seçenek #4: Sadece sitenizdeki resimlerin URL'sini değiştirin!

Optimize edilmemiş

<img src="/upload/foo/bar/image.png">

otomatik olarak optimize edildi

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — CDN OptiPic hesabınızdaki sitenizin kimliği

ÜCRETSİZ paketle şimdi başlayın

Tek seferlik ödeme — aylık ücret yok

Satın alınan paket ay sonunda yanmaz - birkaç ay önceden satın almak avantajlıdır
CDN görüntülerinden görüntülemeler için ödeme yaparsınız. Toplam kullanım maliyeti, sitenize gelen trafik miktarına bağlıdır. Ortalama olarak, bu 1.000.000 resim görüntülemesi başına 1,5 ABD dolarıdır.
10,000 görüntülemelerinin ilk demosu ücretsizdir.
10,000
görünümler

özgür

1,000,000
görünümler

$10,00 $7,00

2,000,000
görünümler

$14,00 $10,00

5,000,000
görünümler

$24,00 $18,00

10,000,000
görünümler

$40,00 $30,00

20,000,000
görünümler

$74,00 $55,00

50,000,000
görünümler

$165,00 $123,00

80,000,000
görünümler

$235,00 $176,00

100,000,000
görünümler

$282,00 $211,00

Tavsiye ediliriz

189 yorumlar

OptiPic diğer platformlarla kolayca entegre olur

?