Za pomocą Thumbor można bezpłatnie zmieniać rozmiar, kompresować i przekształcać obrazy na żądanie.
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.
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:
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
Zmień rozmiar obrazu na 100 x 100 pikseli: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
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:
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
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
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:
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
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
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:
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
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
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:
Zmień rozmiar obrazu na 50% oryginału: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
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
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:
- 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
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.
Uruchom polecenie
thumbor-config
, aby utworzyć nowy plikthumbor.conf
.thumbor-config > ./thumbor.conf
Otwórz nowy plik
thumbor.conf
. Poleceniethumbor-config
wygenerowało plik zawierający listę i objaśnienie wszystkich opcji konfiguracji Thumbor.Skonfiguruj ustawienia, usuwając komentowanie wierszy i zmieniając wartości domyślne. Warto skonfigurować te ustawienia:
QUALITY
AUTO_WEBP
MAX_WIDTH
iMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Uruchom Thumbor z flagą
--conf
, aby użyć ustawieńthumbor.conf
.thumbor --conf /path/to/thumbor.conf