Jak převést na WebP všechny obrázky na SilverStripe

CDN OptiPic — jednoduché řešení problému "Poskytovat obrázky ve formátech nové generace"
184 recenze
Podle doporučení
Google PageSpeed Insights
Snadné připojení
během 5 minut
Bezplatná technická podpora
+ pomoc s instalací
Inteligentní převod WebP za běhu
Co dělá OptiPic CDN, když se z něj pokouší vyžádat obrázek:
  • Returns the WebP version of the image.
    pokud prohlížeč podporuje formát WebP
  • Vrátí komprimovanou verzi bez webp
    pokud prohlížeč nepodporuje WebP
  • Reaguje na obrazovky mobilních zařízení
    pokud je obrázek otevřen z mobilu
  • Ukládá do mezipaměti a zrychluje načítání
    snížení zátěže z vašeho hostingu
  • Chrání
    vaše snímky
    zachování autorských práv EXIF a IPTC tagů
  • Použijte svůj vlastní
    název domény
    k načtení obrázků z img.domain.com atd
  • Líné zatížení
    obrázky
    Obrázky se načítají při procházení stránkami
Převod na Webp a komprese obrázků probíhá na pozadí a nezpomaluje otevírání obrázků v prohlížeči.
Pokud optimalizovaná verze v době požadavku na obrázek ještě není připravena, vrátí se původní verze bez jakéhokoli zpracování.
Co získá optimalizaci obrázků na webu
  • Zrychlení
    stránky
  • Zlepšení
    SEO
  • Zvyšování
    konverze
  • Rozšíření Google
    Pagespeed Insights

Proč se vyplatí používat WebP pro SilverStripe?

Použití Webp řeší problém „Poskytovat obrázky ve formátech nové generace“ v Google Pagespeed Insights.

Stručně řečeno, WebP komprimuje soubor lépe, všechny ostatní věci jsou stejné, než starší formáty (png a jpeg) – což znamená, že zabírá méně místa na hostingu a načítá se rychleji v prohlížeči při prohlížení stránky.

p>

Implementace WebP je aktivně propagována společností Google – poskytuje tyto statistiky:

  • WebP komprimuje obrázky bezeztrátově o 26 % lépe než PNG.
  • WebP komprimuje ztrátové obrázky lépe než JPEG o 25–34 % se stejným indexem strukturní podobnosti (SSIM)
  • WebP podporuje bezztrátovou transparentnost (známou jako alfa) s nárůstem velikosti pouze o 22 %.

Pokud prohlížeč návštěvníka nepodporuje WebP, CDN vrátí starý formát (png / jpeg), ale komprimovaný (optimalizovaný pro web)

Co je komprese obrazu

Optimalizace obrazu je speciální zpracování grafického souboru za účelem minimalizace jeho velikosti bez ztráty vizuální kvality.

Pro provedení tohoto postupu existuje velké množství poměrně složitých algoritmů. Všechny jsou však založeny na stejném základě - všechna servisní data tam (například název programu, který ukládá soubor atd.) musí být z grafického souboru odstraněna a také pomocí speciálních programů sloučit / hladké podobné barvy.

V důsledku toho získáme stejný obrázek, který se vizuálně nezměnil. Objem (váha) tohoto souboru v bajtech však bude mnohem menší než původní. Pokud je toto zpracování provedeno správně, obrazový soubor lze zmenšit na 98 % bez ztráty kvality obrazu.

To znamená, že obrázky na stránkách webu se po optimalizaci načítají mnohonásobně rychleji.

Co bude optimalizovat obrázky pro váš web

  • Ušetřete místo na disku.
  • Urychlete načítání stránky.
  • Minimální zatížení serveru.
  • Zvyšte konverzi.
  • Lepší hodnocení stránek ve výsledcích vyhledávání.

Bylo prokázáno, že zrychlení webových stránek může zlepšit faktory chování a také zvýšit konverzi webových stránek (zvýšit prodej). Čím déle se stránka webu načítá, tím méně zákazníků tam bude moci provádět určité cílové akce. Pokud vaše stránky na internetu nebudou fungovat dostatečně rychle, máte šanci propásnout svůj potenciální příjem. Zrychlení online zdroje poskytne příležitost zlepšit konverzi a díky tomu výrazně zvýšit příjmy a přilákat více zákazníků.

Výhody OptiPic

  • Neexistují žádné měsíční platby.
  • Plná automatizace.
  • Bezplatná pomoc s připojením.
  • Abyste se mohli připojit a používat službu, nemusíte mít speciální znalosti programování nebo administrace.
  • V systému nejsou žádná omezení velikosti obrázku.
  • Přátelská technická podpora.

Jak může optimalizace obrázků pro SilverStripe urychlit web?

Stránka jakéhokoli webu se nejčastěji skládá z:

  • obrázky;
  • html kód (obsah textu, rozvržení, označení);
  • video;
  • javascriptové skripty s logikou spouštěnou z prohlížeče;
  • soubory css se styly stránek.

Položka, jako je obrázek, zabírá většinu celého objemu na stránkách webu a je tou „nejtěžší“ částí stránek. Redukce (optimalizace) obrázků nepochybně výrazně zrychlí stahování jakéhokoli online zdroje.

 

Pokud tedy změníte (snížíte) velikost obrázků, všechny stránky webu se začnou načítat mnohem rychleji.

Komprese obrázků na webu umožní snížit jejich objem na 75–98 %, aniž by došlo ke ztrátě jejich vizuální kvality.

Jak připojit OptiPic CDN k SilverStripe?

Volba #1: Univerzální připojení přes PHP (knihovna GitHub)

Adresy URL obrázků na webu se automaticky mění. Stačí přidat 1 řádek do vašeho .htaccess nebo php.ini.

Příklad připojení přes .htaccess

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

Příklad připojení přes 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
Knihovna na GitHubu
bezplatná integrace na vyžádání

Volba #2: Univerzální připojení přes Nginx proxy

Adresy URL obrázků na webu se nemění. Právě teď je veškerý přenos snímků automaticky přenesen do OptiPic CDN
# 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 vašeho webu ve vašem CDN OptiPic účtu
Důrazně doporučujeme, abyste před restartováním nginx zkontrolovali správnost nové verze konfigurace. Můžete to udělat pomocí příkazu nginx -t.
Soft reload (re-read configs) Nginx může být příkazem nginx -s reload

Nginx proxy dokumentace
Získejte bezplatnou pomoc s připojením
Zkontrolujte, zda se obrázek načítá přes OptiPic CDN
Získejte bezplatnou integraci
i na bezplatný tarif

Volba #3: Připojení přes .htaccess (Apache proxy)

Adresy URL obrázků na webu se nemění. Právě teď je veškerý přenos snímků automaticky přenesen do OptiPic CDN
#---------------------------------------
# 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 vašeho webu ve vašem CDN OptiPic účtu
Před úpravou .htaccess důrazně doporučujeme vytvořit zálohu souboru a ujistit se, že máte k souboru přístup přes FTP.
Získejte bezplatnou pomoc s připojením
Zkontrolujte, zda se obrázek načítá přes OptiPic CDN
Získejte bezplatnou integraci
i na bezplatný tarif

Volba #4: Stačí změnit adresy URL obrázků na vašem webu!

Nebyl
optimalizován

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

Stalo se
automaticky optimalizováno

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — ID vašeho webu ve vašem CDN OptiPic účtu

Začněte hned teď s balíčkem ZDARMA

Jednorázová platba — žádné měsíční poplatky

Zakoupený balíček na konci měsíce nevyhoří - je výhodné jej zakoupit několik měsíců dopředu
Platíte za zobrazení z obrázků CDN. Celkové náklady na používání závisí na objemu návštěvnosti vašich stránek. V průměru je to od 1,5 USD za 1 000 000 zobrazení obrázku.
První ukázka 100,000 zobrazení je zdarma.
100,000
pohledy

bezplatná

1,000,000
pohledy

$ 10.00 $ 7.00

2,000,000
pohledy

$ 14.00 $ 10.00

5,000,000
pohledy

$ 24.00 $ 18.00

10,000,000
pohledy

$ 40.00 $ 30.00

20,000,000
pohledy

$ 74.00 $ 55.00

50,000,000
pohledy

$ 165.00 $ 123.00

80,000,000
pohledy

$ 235.00 $ 176.00

100,000,000
pohledy

$ 282.00 $ 211.00

Proč vybrat si nás?

184 recenze

OptiPic se snadno integruje s jinými platformami

?