Jak przekonwertować do WebP wszystkie obrazy w Kirby

Dlaczego warto używać WebP dla Kirby?

Korzystanie z Webp rozwiązuje problem „Wyświetlaj obrazy w formatach nowej generacji” w Google Pagespeed Insights.

W skrócie, WebP lepiej kompresuje plik, wszystkie inne rzeczy są takie same, niż starsze formaty (png i jpeg) – co oznacza, że zajmuje mniej miejsca na hostingu i szybciej ładuje się w przeglądarce podczas przeglądania strony.

Wdrożenie WebP jest aktywnie promowane przez Google - dostarczają takie statystyki:

• WebP kompresuje obrazy bezstratnie o 26% lepiej niż PNG.
• WebP kompresuje stratne obrazy lepiej niż JPEG o 25-34% przy tym samym wskaźniku podobieństwa strukturalnego (SSIM)
• WebP obsługuje bezstratną przezroczystość (znaną jako alfa) przy wzroście rozmiaru tylko o 22%.

Jeśli przeglądarka odwiedzającego nie obsługuje WebP, CDN zwróci stary format (png / jpeg), ale skompresowany (zoptymalizowany pod kątem sieci)

Co to jest kompresja obrazu

Optymalizacja obrazu to specjalne przetwarzanie pliku graficznego w celu zminimalizowania jego rozmiaru bez utraty jakości wizualnej.

Aby przeprowadzić tę procedurę, istnieje wiele dość złożonych algorytmów. Jednak wszystkie są oparte na tej samej podstawie - wszystkie dane serwisowe (na przykład nazwa programu przechowującego plik itp.) muszą zostać usunięte z pliku graficznego, a także za pomocą specjalnych programów scalić / gładkie podobne kolory.

W efekcie otrzymujemy ten sam obraz, który wizualnie się nie zmienił. Jednak objętość (waga) tego pliku w bajtach będzie znacznie mniejsza niż oryginału. Jeśli to przetwarzanie zostanie przeprowadzone prawidłowo, plik obrazu można zmniejszyć do 98% bez utraty jakości obrazu.

Oznacza to, że po optymalizacji zdjęcia na stronach witryny będą ładowane wielokrotnie szybciej.

Co zoptymalizuje obrazy dla Twojej witryny

• Oszczędzaj miejsce na dysku.
• Przyspiesz ładowanie strony.
• Minimalne obciążenie serwera.
• Zwiększ konwersję.
• Lepsza pozycja witryny w wynikach wyszukiwania.

Udowodniono, że przyspieszenie strony internetowej może poprawić czynniki behawioralne, a także zwiększyć konwersję witryny (zwiększyć sprzedaż). Im dłużej ładuje się strona witryny, tym mniej klientów będzie mogło wykonać tam określone działania docelowe. Jeśli Twoja witryna w Internecie nie będzie działać wystarczająco szybko, masz wszelkie szanse na utratę potencjalnego dochodu. Przyspieszenie zasobu internetowego zapewni możliwość poprawy konwersji, a dzięki temu znacznie zwiększy przychody i przyciągnie więcej klientów.

Korzyści OptiPic

• Nie ma płatności miesięcznych.
• Pełna automatyzacja.
• Bezpłatna pomoc w połączeniu.
• Aby połączyć się i korzystać z usługi, nie musisz posiadać specjalnych umiejętności programistycznych lub administracyjnych.
• W systemie nie ma ograniczeń dotyczących rozmiaru obrazu.
• Przyjazna pomoc techniczna.

W jaki sposób optymalizacja obrazów pod kątem Kirby może przyspieszyć działanie witryny?

Strona dowolnej witryny składa się najczęściej z:

• obrazy;
• kod HTML (treść tekstowa, układ, znaczniki);
• wideo;
• skrypty javascript z logiką uruchamiane z przeglądarki;
• pliki css ze stylami stron.

Taki element, jak obraz, zajmuje większość całej objętości stron witryny i jest „najcięższą” częścią stron. Redukcja (optymalizacja) obrazów niewątpliwie znacznie przyspieszy pobieranie dowolnego zasobu online.

 

W związku z tym, jeśli zmienisz (zmniejszysz) rozmiar obrazów, wszystkie strony witryny zaczną się ładować znacznie szybciej.

Skompresowanie obrazów na stronie umożliwi zmniejszenie ich objętości do 75-98%, bez utraty jakości wizualnej.

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