Jak przekonwertować do WebP wszystkie obrazy w Slim

CDN OptiPic — proste rozwiązanie problemu „Wyświetlaj obrazy w formatach nowej generacji”
Inteligentna konwersja WebP w locie
Co robi OptiPic CDN, gdy próbuje zażądać od niego obrazu:
  • Zwraca wersję WebP obrazu.
    jeżeli przeglądarka obsługuje format WebP
  • Zwraca skompresowaną wersję bez webp
    jeśli przeglądarka nie obsługuje WebP
  • Sprawia, że reaguje na ekrany telefonów komórkowych
    jeśli obraz jest otwierany z telefonu komórkowego
  • Cache i przyspiesza ładowanie
    zmniejszenie obciążenia z hostingu
  • Chroni
    twoje obrazy
    zachowanie praw autorskich poprzez tagi EXIF i IPTC
  • Użyj własnej
    nazwy domeny
    aby załadować obrazy z img.domain.com itp.
  • Leniwe ładowanie
    obrazów
    Obrazy ładują się podczas przewijania stron
Konwersja do Webp i kompresja obrazu odbywa się w tle i nie spowalnia otwierania obrazów w przeglądarce.
Jeśli zoptymalizowana wersja nie jest jeszcze gotowa w momencie żądania obrazu, oryginalna wersja jest zwracana bez żadnego przetwarzania.
Co uzyskuje optymalizację obrazów w witrynie
  • Przyspieszenie
    strony
  • Poprawa
    SEO
  • Zwiększanie
    konwersji
  • Zwiększenie
    Pagespeed Insights Google

Dlaczego warto używać WebP dla Slim?

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

Jak podłączyć OptiPic CDN do Slim?

Opcja #1: Uniwersalne połączenie przez PHP (biblioteka GitHub)

Adresy URL obrazów w witrynie zmieniają się automatycznie. Wystarczy dodać 1 linię do pliku .htaccess lub php.ini.

Przykład połączenia za pośrednictwem .htaccess

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

Przykład połączenia za pośrednictwem 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
Biblioteka na GitHub
bezpłatna integracja na życzenie

Opcja #2: Uniwersalne połączenie przez proxy Nginx

Adresy URL obrazów na stronie nie ulegają zmianie. Właśnie teraz cały ruch związany z obrazami jest automatycznie kierowany 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 — Identyfikator Twojej witryny na koncie CDN OptiPic
Zdecydowanie zalecamy sprawdzenie poprawności nowej wersji konfiguracji przed ponownym uruchomieniem nginx. Możesz to zrobić za pomocą polecenia nginx -t.
Miękkie przeładowanie (ponowne odczytanie konfiguracji) Nginx może być za pomocą polecenia nginx -s reload

Dokumentacja proxy Nginx
Uzyskaj bezpłatną pomoc w łączeniu
Sprawdź, czy obraz jest ładowany przez OptiPic CDN
Uzyskaj bezpłatną integrację
nawet na bezpłatnej taryfie

Opcja #3: Połączenie przez .htaccess (proxy Apache)

Adresy URL obrazów na stronie nie ulegają zmianie. Właśnie teraz cały ruch związany z obrazami jest automatycznie kierowany 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 — Identyfikator Twojej witryny na koncie CDN OptiPic
Przed modyfikacją .htaccess zdecydowanie zalecamy wykonanie kopii zapasowej pliku i upewnienie się, że masz dostęp do pliku przez FTP.
Uzyskaj bezpłatną pomoc w łączeniu
Sprawdź, czy obraz jest ładowany przez OptiPic CDN
Uzyskaj bezpłatną integrację
nawet na bezpłatnej taryfie

Opcja #4: Po prostu zmień adres URL obrazów w swojej witrynie!

Nie był
zoptymalizowany

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

Stało się
automatycznie zoptymalizowane

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — Identyfikator Twojej witryny na koncie CDN OptiPic

Zacznij już teraz z DARMOWYM pakietem

Płatność jednorazowa — brak opłat miesięcznych

Zakupiony pakiet nie wypala się pod koniec miesiąca – korzystnie jest go kupić z kilkumiesięcznym wyprzedzeniem
Płacisz za wyświetlenia z obrazów CDN. Całkowity koszt użytkowania zależy od natężenia ruchu w Twojej witrynie. Średnio wynosi to od 1,5 USD za 1 000 000 wyświetleń obrazu.
Pierwsza demonstracja wyświetleń 10,000 jest bezpłatna.
10,000
wyświetlenia

bezpłatny

1,000,000
wyświetlenia

10,00 USD 7,00 USD

2,000,000
wyświetlenia

14,00 USD 10,00 USD

5,000,000
wyświetlenia

24,00 USD 18,00 USD

10,000,000
wyświetlenia

40,00 USD 30,00 USD

20,000,000
wyświetlenia

74,00 USD 55,00 USD

50,000,000
wyświetlenia

165,00 USD 123,00 USD

80,000,000
wyświetlenia

235,00 USD 176,00 USD

100,000,000
wyświetlenia

282,00 USD 211,00 USD

Czemu wybrać nas?

189 recenzje

OptiPic łatwo integruje się z innymi platformami

?