Optymalizacja zdjęć na Wordpressie
Optymalizacja zdjęć
Czy przyglądałeś się kiedyś zakładce „transfer” na swoim hostingu? Na ilość miesięcznie zużywanego łącza wpływają 2 główne czynniki, czyli ilość i waga przesyłanych plików na serwer oraz ogólna waga strony, która musi zostać pobrana, gdy ktoś odwiedzi Twoją witrynę. W tym artykule przedstawimy Ci, jak ograniczyć zużywany transfer, dzięki optymalizacji zdjęć i plików graficznych. Ostateczna ilość zaoszczędzonego transferu jest zależna od ilości grafik obecnych na Twoim hostingu, jednakże polecamy wykonanie optymalizacji nawet dla stron z małą ilością zdjęć. Czyńmy internet szybszym!
Optymalizacja zdjęć to skuteczny sposób na ograniczenie zużywanego transferu oraz przyśpieszenie Twojej strony internetowej. Ponieważ mniejsze obrazy to szybsza transmisja, a szybsza transmisja to szczęśliwszy odwiedzający, któremu oszczędzasz czas poprzez szybsze załadowanie się witryny. Proste? Tak samo jak wykonanie optymalizacji – kilka kliknięć i gotowe.
Plugin LiteSpeed
Plugin LiteSpeed Cache dla Wordpressa zapewnia dostęp do centralnego serwera www, który odpowiada za zmniejszenie wagi obrazków. Poniżej przedstawimy Ci jak to działa:
- Naciskasz przycisk „Wyślij żądanie optymalizacji” w zakładce „Optymalizacja obrazów”
- Serwer centralny akceptuje lub odmawia żądanie po tzw. callbacku, czyli weryfikacji zwrotnej.
- Serwer centralny rozdziela żądanie na serwer podrzędny.
- Serwer podrzędny pobiera Twoje obrazki.
- Serwer podrzędny przetwarza Twoje obrazki.
- Serwer podrzędny powiadamia Wordpressa, że obrazki są gotowe.
- Zadanie cron aktywuje się i nadpisuje reguły Wordpress.
Możliwe, że zastanawiasz się nad krokiem 5 i nad tym, co on dokładnie oznacza? Nic innego niż szczęście! Przy wykorzystaniu bibliotek LS, serwer używa techniki Imagick, aby zachować 85-90% jakości oryginalnego zdjęcia (tzw. optymalizacja stratna, z angielskiego: lossy optimization).
Podczas tego procesu generowane są trzy wersje każdego pliku:
- bk.jpg: oryginalna wersja obrazu
- jpg: zoptymalizowana wersja obrazu, która będzie używana
- jpg.webp: wersja zapisana w formacie o 25-34% mniejszym niż jpg (przeczytaj więcej tutaj)
Jeżeli zdjecie.jpg nie zostało z jakiegoś powodu zoptymalizowane (bo np. było już optymalne), zdjecie.bk.jpg również nie zostanie zapisane – serwer doda jedynie format WebP.
Korzystanie z wielu wtyczek optymalizacyjnych
Zanim przejdziemy dalej, zwróć uwagę na to, że nie powinieneś używać więcej niż jednej wtyczki do optymalizacji obrazu w tym samym czasie. Może to spowodować dziwne zachowanie strony i problemy, które z reguły nie są proste do rozwiązania.
Oczywiście nie w każdym przypadku użycie dwóch lub więcej wtyczek będzie katastrofą. Ważnym jest, by pluginy te nie powielały poszczególnych funkcji optymalizacyjnych (dla laików Wordpressowych polecamy zatem użycie jednej wtyczki).
LiteSpeed jest dostępny na: hosting WordPress oraz hosting Ecommerce.
Optymalizacja zdjęć na Wordpressie
Wytłumaczymy wszystko po kolei. Z pulpitu Wordpress przejdź do LiteSpeed Cache > Ustawienia > Media. Zjedź na dół, aż zobaczysz 4 ustawienia związane z optymalizacją.
Opcja „Wyłącz optymalizację wysyłania” wyłącza zadanie cron, które służy do pobierania zoptymalizowanych obrazów z serwera centralnego zamiast z biblioteki mediów Wordpress. Jeśli włączysz tę funkcję, nie będziesz w stanie odzyskać wcześniej zoptymalizowanych zdjęć (w większości przypadków użycie tej opcji nie będzie potrzebne).
Pamiętasz format pliku .webp, o którym wspomnieliśmy wcześniej? Jeśli chcesz użyć obrazów WebP zamiast plików JPG i PNG, włącz opcję „Zamiennik obrazów WebP”. Nie wszystkie przeglądarki obsługują powyższy format, więc w pamięci podręcznej zapisane będą dwie wersje stron: jedna z obrazkami WebP i jedna z innymi formatami obrazu. Tym samym, jeżeli zmienisz zdanie to w dowolnym momencie możesz wyłączyć WebP.
Jak poprawnie wykonać optymalizację
Przejdź do Cache LiteSpeed > Optymalizacja obrazów, gdzie podczas pierwszej wizyty zobaczysz przycisk z żądaniem klucza. Naciśnij „Zażądaj klucz”, aby uzyskać klucz z centralnego serwera, który będzie używany do przetworzenia wszystkich przyszłych procesów optymalizacji. Po uzyskaniu klucza, otrzymasz również dostęp do danych o optymalizacji, w formie liczników, m.in. o tym ile miejsca na dysku zaoszczędził serwer do tej pory, ile zdjęć zostało zoptymalizowanych itp. Owe liczniki nie są automatycznie aktualizowane, dlatego aby uzyskać najnowszy status, kliknij w przycisk „Zaktualizuj status redukcji”.
W sekcji „Podsumowanie optymalizacji”, widoczny jest poziom, na którym się aktualnie znajdujesz oraz ilość kredytów, czyli ilość grup mediów, które możesz przesłać za jednym razem (odnawia się przy każdym udanym wysłaniu). Poniżej znajdują się informacje o obrazie oraz magiczny przycisk, którym przesyłasz żądanie optymalizacji.
- „Wszystkie grupy obrazków”: liczba obrazków obecnych na stronie Wordpressowej.
- „Grupy obrazów, które jeszcze nie zostały zainicjowane”: liczba niezoptymalizowanych obrazków.
- „Wyślij żądanie optymalizacji”: wysyła żądanie, po którym
niezoptymalizowane pliki zostaną przesłane do serwera centralnego.
Dolna sekcja tej podstrony pokazuje, co dzieje się aktualnie z Twoją prośbą.
- „Zainicjowane grupy obrazów”: liczba zdjęć oczekujących w kolejce.
- „Grupy obrazków, których optymalizacja się nie powiodła”
- „Grupy obrazków powiadomione o wysłaniu”: liczba zdjęć oczekujących na odebranie przez Wordpress.
- „Grupy obrazowe zoptymalizowane i wysłane”: liczba ukończonych procesów optymalizacji.
Wszystko to dzieje się za kulisami jednego przycisku! A co więcej, możesz na bieżąco odświeżać stronę, aby aktualizować powyższe liczniki, albo ją opuścić w trakcie trwania optymalizacji, jeśli masz do zrobienia coś innego. Brzmi fajnie, co?
Jak przywrócić obrazki po optymalizacji
Jeżeli nie jesteś zadowolony ze sposobu, w jaki obraz został zoptymalizowany, masz możliwość przywrócenia go do wersji pierwotnej. Z pulpitu Wordpress przejdź do Media > Biblioteka, wybierz widok listy, znajdź pożądaną grafikę, a następnie kliknij w ikonę rozwijanej listy i wybierz \”Restore backup\”.
Jeśli zdecydowałeś się na użycie formatu WebP, możesz wyłączyć go dla pojedynczych zdjęć za pomocą ikony aparatu, tj. „Wyłącz WebP”.
Porównywanie stron Wordpress przed i po optymalizacji
Dla przykładu możemy użyć obszerny blog z dużą ilością postów i zdjęć o różnych rozmiarach. Bez żadnej optymalizacji, waga i transfer całego folderu multimediów wynosiły przeszło 14,07 GB. Natomiast po optymalizacji, ilość zajmowanego miejsca wynosiła już tylko 9,47 GB, z którego zrobiło się niecałe 7,25 GB przy włączeniu WebP. Tym samym, sama optymalizacja zdjęć zaoszczędziła połowę wykorzystywanego do tej pory miejsca i obniżyła w dużym stopniu ilość zużywanego transferu. Najlepszą część zostawiliśmy jednak na koniec. Waga zmniejszyła się o blisko 7GB bez widocznej utraty jakości zdjęć! Mówimy całkiem serio.
Efekt optymalizacji będzie różnił się w zależności od tego, jak dobrze (i czy w ogóle) Twoje obrazki były wcześniej optymalizowane. Jeśli jesteś fotografem i dokładasz wszelkich starań, aby zmniejszyć wagę plików przy eksportowaniu poprzez np. Photoshopa lub Lightroom, nie zobaczysz efektu, który uzyska osoba niezwracająca w ogóle uwagi na rozmiar wrzucanych obrazków. Nie zapominaj jednak o WebP, które z góry zapewnia dodatkową oszczędność miejsca, nawet dla bardzo dobrze zoptymalizowanych zdjęć.
Odbieramy telefony, odpisujemy na maile, nie ukrywamy kosztów, a dodatkowo oferujemy najszybsze pakiety hostingowe na rynku. Uważasz, że to zwroty marketingowe? Sprawdź sam/a!
Jeśli nie będziesz zadowolony/a, zwrócimy Ci pieniądze.
Twoje strony i sklepy przeniesiemy za darmo!
Jeżeli masz jakiekolwiek pytania, skontaktuj się z nami! Kliknij tutaj.
Chcesz dowiedzieć się o nas trochę więcej? Przejdź na stronę JCHost.pl.