Optymalizacja obrazów za pomocą Thumbor

Za pomocą Thumbor można bezpłatnie zmieniać rozmiar, kompresować i przekształcać obrazy na żądanie.

Katie Hempenius
Katie Hempenius
X

Thumbor to bezpłatna sieć CDN z obrazami typu open source, która ułatwia kompresowanie, zmianę rozmiaru i przekształcanie obrazów. Dzięki temu postowi możesz wypróbować Thumbor bez konieczności instalowania czegokolwiek. Skonfigurowaliśmy tryb piaskownicy serwera Thumbor, możesz go wypróbować na http://34.67.235.246:8888. Obraz, z którym weźmiesz udział w eksperymencie, jest dostępny na stronie http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Wymagania wstępne

W tym poście zakładamy, że wiesz, jak sieci CDN z obrazami mogą zwiększyć wydajność wczytywania. Jeśli tak nie jest, przeczytaj artykuł Korzystanie z sieci CDN z obrazami do optymalizowania obrazów. Zakładamy też, że masz już utworzone podstawowe witryny.

Format adresu URL miniaturki

Jak wspomnieliśmy w artykule Korzystanie z sieci CDN z obrazami do optymalizacji obrazów, każda sieć CDN na potrzeby obrazów używa nieco innego formatu adresu URL obrazów. Rysunek 1 przedstawia format Thumbor.

Adres URL miniatury składa się z tych komponentów: źródło, klucz bezpieczeństwa, rozmiar, filtry i obraz.
Format adresu URL Thumbor

Punkt początkowy

Tak jak w przypadku wszystkich elementów origins, źródło adresu URL Thumbor składa się z 3 części: schematu (prawie zawsze http lub https), hosta i portu. W tym przykładzie host jest identyfikowany na podstawie adresu IP, ale jeśli korzystasz z serwera DNS, może on wyglądać tak: thumbor-server.my-site.com. Domyślnie Thumbor używa portu 8888 do wyświetlania obrazów.

Klucz bezpieczeństwa

Część adresu URL unsafe wskazuje, że używasz Thumbor bez klucza bezpieczeństwa. Klucz bezpieczeństwa zapobiega wprowadzaniu nieautoryzowanych zmian w adresach URL obrazów. Gdy zmieniasz adres URL obrazu, użytkownik może użyć Twojego serwera (i Twojego rachunku za hosting), aby zmienić rozmiar swoich obrazów lub, bardziej złośliwie, przeciążyć serwer. W tym przewodniku nie omawiamy konfigurowania funkcji klucza bezpieczeństwa Thumbor.

Rozmiar

Ta część adresu URL określa wymagany rozmiar obrazu wyjściowego. Możesz ją pominąć, jeśli nie chcesz zmieniać rozmiaru obrazu. Aby uzyskać pożądany rozmiar, w zależności od innych parametrów adresu URL, Thumbor zastosuje różne podejścia, takie jak przycinanie czy skalowanie. W następnej sekcji tego posta znajdziesz bardziej szczegółowe informacje o tym, jak zmienić rozmiar obrazów.

Wypróbuj tę funkcję już teraz:

  1. Kliknij ten adres URL, by w nowej karcie wyświetlić obraz w pierwotnym rozmiarze: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Obraz w oryginalnym rozmiarze
    Oryginalne zdjęcie

  2. Zmień rozmiar obrazu na 100 x 100 pikseli: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

Obraz w rozmiarze 100 x 100 pikseli
Rozmiar obrazu został zmieniony na 100 x 100 pikseli

Filtry

Filtry zmieniają obraz. Część filtrów w segmencie adresów URL zaczyna się od ciągu filters:, po którym następuje lista filtrów rozdzielonych dwukropkiem. Tę opcję można pominąć, jeśli nie są używane żadne filtry. Składnia poszczególnych filtrów przypomina wywołanie funkcji (np. grayscale()) zawierające 0 lub więcej argumentów.

Wypróbuj tę funkcję już teraz:

  1. Zastosuj jeden filtr: efekt rozmycia gaussowskiego o promieniu 25 pikseli: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Rozmyty obraz
    Niewyraźny obraz

  2. Zastosuj wiele filtrów. Przekonwertuj obraz na skalę szarości i obróć obraz o 90 stopni: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Obraz w skali szarości obrócony o 90 stopni
Skala szarości, obrócony obraz

Przekształcanie obrazów

W tej sekcji skupimy się na funkcjach Thumbor, które najlepiej sprawdzają się w kontekście wydajności: kompresja, zmiana rozmiaru i konwersja między formatami plików.

Kompresja

Filtr jakości kompresuje obrazy JPEG do żądanego poziomu jakości (1–100). Jeśli nie podasz poziomu jakości, Thumbor kompresuje obraz do poziomu jakości 80. To dobre ustawienie domyślne: poziomy jakości 80–85 zwykle mają niewielki wpływ na jakość obrazu, ale zwykle zmniejszają rozmiar obrazu o 30–40%.

Wypróbuj tę funkcję już teraz:

  1. Skompresuj obraz do jakości 1 (bardzo złej): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Niska jakość obrazu
    Obraz niskiej jakości

  2. Skompresuj obraz, korzystając z domyślnych ustawień kompresji Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Skompresowany obraz bez wyraźnych problemów z jakością
Skompresowany obraz

Zmieniam wielkość

Aby zmienić rozmiar obrazu przy zachowaniu jego pierwotnych proporcji, użyj formatu $WIDTHx0 lub 0x$HEIGHT we fragmencie size ciągu adresu URL.

Wypróbuj tę funkcję już teraz:

  1. Zmień rozmiar obrazu do szerokości 200 pikseli, zachowując oryginalne proporcje: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Obraz o szerokości 200 pikseli
    Obraz został zmieniony do szerokości 200 pikseli

  2. Zmień rozmiar obrazu do wysokości 500 pikseli przy zachowaniu pierwotnych proporcji: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Obraz o wysokości 500 pikseli
Obraz zmieniony do wysokości 500 pikseli

Możesz też zmienić rozmiar obrazów, aby odpowiadały procentowemu rozmiarowi oryginału, używając filtra proporcje. Jeśli podasz rozmiar w połączeniu z filtrem proporcji, zmieni się rozmiar obrazu i zostanie zastosowany filtr proporcji.

Wypróbuj tę funkcję już teraz:

  1. Zmień rozmiar obrazu na 50% oryginału: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    obraz o rozmiarze 50% rozmiaru oryginału;
    Rozmiar obrazu został zmieniony na 50% rozmiaru oryginału

  2. Zmień rozmiar obrazu na 1000 pikseli, a następnie zmniejsz go do 10% bieżącego rozmiaru: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

Obraz o szerokości 100 pikseli
Obraz zmieniony do szerokości 100 pikseli

Te metody to tylko kilka z wielu opcji przycinania i zmiany rozmiaru dostępnych w Thumbor. Informacje o innych opcjach znajdziesz w artykule Użycie.

Formaty plików

Filtr formatu konwertuje obrazy na jpeg, webp, gif lub png. Pamiętaj, że jeśli optymalizujesz wydajność pod kątem wydajności, używaj formatu JPEG lub WebP, ponieważ pliki PNG i GIF są znacznie większe i się nie kompresują.

Wypróbuj tę funkcję już teraz:

  1. Przekonwertuj obraz na WebP. Jeśli otworzysz panel Network (Sieć) w Narzędziach deweloperskich, w nagłówku odpowiedzi Content-Type dokumentu pojawi się informacja, że serwer zwrócił obraz WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Zrzut ekranu z Narzędzi deweloperskich przedstawiający typ treści (WebP) obrazu.
Nagłówek odpowiedzi content-type wyświetlany w Narzędziach deweloperskich

Dalsze kroki

Wypróbuj inne filtry i przekształcenia na obrazie hero.jpg.

Jeśli stosujesz własną instalację aplikacji Thumbor, przeczytaj załącznik poniżej, w którym wyjaśniamy, jak i dlaczego warto korzystać z pliku thumbor.conf.

Dodatek: thumbor.conf

Wiele z opcji konfiguracyjnych omówionych w tym poście oraz wiele innych można ustawić jako domyślne, konfigurując plik konfiguracji thumbor.conf i używając go. Ustawienia z pliku thumbor.conf będą stosowane do wszystkich obrazów, chyba że zastąpią je parametry ciągu adresu URL.

  1. Uruchom polecenie thumbor-config, aby utworzyć nowy plik thumbor.conf.

    thumbor-config > ./thumbor.conf

  2. Otwórz nowy plik thumbor.conf. Polecenie thumbor-config wygenerowało plik zawierający listę i objaśnienie wszystkich opcji konfiguracji Thumbor.

  3. Skonfiguruj ustawienia, usuwając komentowanie wierszy i zmieniając wartości domyślne. Warto skonfigurować te ustawienia:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH i MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Uruchom Thumbor z flagą --conf, aby użyć ustawień thumbor.conf.

    thumbor --conf /path/to/thumbor.conf