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

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

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 Concrete5 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.

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

; 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;
}

#---------------------------------------
# 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>
#----------------------------------------