Optymalizacja obrazu

1. Znaczenie optymalizacji Cześć W jednym z poprzednich artykułów dokonałem przeglądu i porównania...
2. Porównywanie wyników zoptymalizowanych obrazów
3. Krótki wywiad z autorem

Znaczenie optymalizacji

Cześć

W jednym z poprzednich artykułów dokonałem przeglądu i porównania darmowej funkcjonalności. najlepsze wtyczki optymalizacji obrazu .

Oczywiście każdy z nich zyskał popularność, zyskał stabilność i poradził sobie z głównym zadaniem. Niemniej jednak, możliwość najwyższej kompresji jakości jest zazwyczaj otwierana po opłaconych stawkach.

Ludzie są zadowoleni z utraty dziesiątek kilobajtów i obniżenia szacunków w PageSpeed ​​Insigths lub zakupu pakietów premium do przetwarzania obrazu.

Maksymalna kompresja i zapisywanie stron są szczególnie ważne dla:

• sklepy internetowe, dla których każde opóźnienie jest katastrofalne;
• odwiedzane portale informacyjne i informacyjne ;
• inne witryny z dużą ilością treści multimedialnych .

Niedawno otrzymałem e-maila od autor i twórca stron internetowych , z prośbą o przetestowanie i napisanie recenzji nowej wtyczki stworzonej przez niego, która jest całkowicie bezpłatna i zapewnia najbardziej efektywną kompresję .

do treści ↑

Wybór enkodera i wygodny sposób

Kluczowymi pomysłami dla Igora (autora wtyczki) jest wykorzystanie najlepszych dotychczasowych koderów, możliwość wyboru spośród nich, ustawienie niezbędnych opcji, a także wykonanie przetwarzania na zewnętrznym serwerze w celu przyspieszenia procesu.

Możesz pobrać wtyczkę z repozytorium.

Opti MozJpeg Guetzli WebP

Niedawno pojawił się w repozytorium, podczas gdy nie ma nawet zatwierdzonego tłumaczenia. Ale to nie jest straszne. Ponieważ cała dokumentacja i pytania dotyczące korzystania z wtyczki są dostępne na oficjalnej stronie internetowej w co najmniej trzech językach.

Pobierz, wypróbuj, napisz do autora pytania i pomysły, jest osobą odpowiadającą (już się ustosunkowałem i otrzymałem odpowiedź). Igor wkłada wiele pracy w rozwój wtyczki, aktualizuje i monitoruje trafność.

Tak więc podstawowe cechy wtyczki.

Dostępne są 3 kodery (można dodawać nowe w przyszłości):

• mozjpeg - najpopularniejszy dzisiaj koder obrazu, zapewnia doskonałą kompresję przy dość wysokiej wydajności;
• guetzli - Nowy algorytm optymalizacji obrazów z Google ze zmniejszeniem masy o 20-30% i zachowanie wysokiej jakości obrazu. Minusem jest bardzo długi proces przetwarzania i wysokie zużycie zasobów;
• webp - Format kompresji obrazu zaproponowany przez Google w 2010 r., Zoptymalizowany pod kątem internetu. Ale nie jest obsługiwany przez wszystkie przeglądarki, dlatego witryny zazwyczaj przechowują kilka kopii obrazów w różnych formatach;

Czy to oznacza, że ​​musisz pobrać i zainstalować te biblioteki samodzielnie? Nie Wtyczka jest dość elastyczna i autor udostępnił trzy opcje jej użycia:

Oczywiście techniczny poziom wykorzystania jest nieco wyższy niż w innych podobnych wtyczkach. Ale dzięki wysokiej jakości instrukcjom i doskonałym wynikom wtyczka staje się opłacalnym rozwiązaniem, szczególnie przy wielokrotnym i długotrwałym użytkowaniu.

do treści ↑

Porównywanie wyników zoptymalizowanych obrazów

Do testów zainstalowałem wtyczkę na czystym WordPressie i wygenerowałem 150 wpisów ze zdjęciami z magazynu medialnego unsplash.com.

W tym czasie mozjpeg przetwarzał 160 obrazów w dwóch równoczesnych strumieniach w około 10 minut (na moim raczej słabym procesorze do notebooków). Guetzli zajmuje dużo czasu i zasobów, więc nie uruchomiłem za jego pośrednictwem wszystkich mediów.

Zoptymalizowany i porównany jeden losowy obraz.

Szczerze mówiąc, nie zauważam szczególnie różnicy. Być może zobaczysz to na wysokiej jakości macierzy, jeśli ją zauważysz, napisz. Rozdzielczość jest taka sama dla wszystkich 254x300 (generowanych przez medium rozmiaru WordPress)

1. Oryginał (u góry po lewej) - waga: 25,3 kb.
2. Optymalizator obrazu ewww (w prawym górnym rogu wybrałem tę wtyczkę do porównania zewnętrznego, ponieważ aktywnie z niej korzystam i uważam ją za jedną z najlepszych) - Waga: 23,4 kb.
3. mozjpeg (u dołu po lewej) - Waga: 23,9 kb.
4. guetzli (prawy dolny róg) - waga: 19,4 kb.

Oczywiście jedno zdjęcie w małej rozdzielczości to za mało. Im większa rozdzielczość, tym większy zysk i luka.

Na przykład w oryginalnej rozdzielczości (1500 x 1200) wyniki optymalizacji są następujące:

1. oryginał - 389,6 kb.
2. ewww - 364,6 kb.
3. mozjpeg - 332,6 kb.
4. guetzli - 284,4 kb.

Wyciągnij wnioski. Podsumowałem to Wtyczka Igora Bardzo przydatne narzędzie, które pomaga uzyskać najlepsze wyniki przetwarzania obrazu przy zachowaniu wysokiej jakości, tam gdzie jest to szczególnie pożądane, i za darmo.

Poprosiłem również Igora, aby zadał mu kilka pytań dotyczących rozwoju wtyczki. Mam nadzieję, że zainteresuje cię czytanie.

do treści ↑

Krótki wywiad z autorem

1. Jak wpadł na pomysł utworzenia wtyczki z tą funkcjonalnością?

Google PageSpeed ​​Insights zwraca szczególną uwagę na SEO. W 2017 r. Google odpowiadało za około 75% wszystkich zapytań na świecie, więc SEO jest teraz głównie ulepszaniem strony dla Google. PageSpeed ​​Insights to mechanizm szacowania prędkości ładowania stron. Im szybciej ładuje się strona, tym wyższy jest jej ranking w wynikach wyszukiwania Google.

Jednym z kluczowych punktów poprawy indeksu PageSpeed ​​Insights jest optymalizacja obrazu. W przypadku obrazów niezoptymalizowanych podejmowanych jest wiele punktów. Jesienią 2017 roku otrzymałem kilka zamówień na SEO PageSpeed ​​dla witryn. Potrzebna była optymalizacja zdjęć na nich.

Najpierw kupiłem płatną wtyczkę EWWW Image optimizer. Wrzuciłem mu 50 dolarów, pomyślałem, że to powinno wystarczyć z marginesem. Włączona optymalizacja.
Proces dotarł do pierwszej lokalizacji do 40% i utknął w martwym punkcie. Zacząłem rozumieć, okazuje się, że pieniądze się skończyły. Wtyczka pobiera pieniądze za optymalizację każdej miniatury.
A na jednym zdjęciu jest ich dziesięć.

Postanowiłem umieścić WP Smush, darmową wersję. Optymalizuje 50 obrazów za darmo, a następnie kliknij przycisk w panelu administracyjnym.
Zoptymalizowane niektóre obrazy. Przetestowany w Google Pagespeed, ale nadal pokazuje, że obrazy nie są zoptymalizowane.
Jeśli wcześniej było to 30-40% więcej niż norma, to po zastosowaniu darmowej wersji WP Smush o 10-15%.

Zdecydowałem się pobrać wszystkie obrazy przez ftp i zoptymalizować za pomocą konsoli, używając kodera Mozilla MozJpeg.
Próbowałem kilka razy, aż do momentu, gdy Google Pagespeed usunął roszczenia do obrazów. Ale jakość obrazów stała się bardzo zła.
Okazało się, że od jesieni 2017 r. Google PageSpeed ​​zmieniło zasady określania optymalizacji obrazów, a teraz wymaga, aby obrazy były mniejsze niż webp o jakości 75 + 10% marży. Webp kompresuje obrazy o 40% lepiej niż jakikolwiek koder jpeg, więc uzyskanie zoptymalizowanych obrazów dla Google bez użycia webp nie zadziała.

Po przeanalizowaniu sytuacji doszedłem do wniosku: nie jest racjonalne używanie płatnych wtyczek do optymalizacji obrazów.
Są zbyt drogie, zwłaszcza gdy często trzeba generować różne rozmiary miniatur.

Wtedy narodził się pomysł stworzenia własnej wtyczki do optymalizacji obrazu, skupionej przede wszystkim na optymalizacji Google PageSpeed ​​Insights.
Głównym problemem optymalizacji obrazu w witrynach WordPress jest często brak możliwości zainstalowania dodatkowych programów na serwerze z witryną. Większość witryn używa hostingu, a nie oddzielnego serwera. To tutaj przyszło rozwiązanie - stworzyć wtyczkę, która będzie działać nie tylko z lokalnie zainstalowanymi koderami, ale także zdalnie. Najłatwiejszym sposobem zdalnego uruchomienia programu w świecie Linuksa jest połączenie przez ssh. Dlatego w moim pluginie osadziłem klienta ssh i może on zdalnie korzystać z koderów.

Działa bardzo elastycznie: na przykład, musisz zoptymalizować witrynę swojego klienta, który pracuje nad hostingiem. Umieściłeś moją wtyczkę na stronie, a następnie:
a) Jeśli masz komputer z Linuksem, zainstaluj na nim serwer ssh i kodery, a następnie podłącz wtyczkę do pulpitu. Wtyczka automatycznie przeniesie obrazy na pulpit Linuksa przez ssh, zoptymalizuje je i wróci na serwer.
b) Jeśli masz pulpit systemu Windows, możesz zainstalować na nim bezpłatny emulator wirtualnego komputera Oracle VirtualBox.
Zacznij w nim specjalnie stworzoną maszynę wirtualną z Linuxem, serwerem ssh i niezbędnymi koderami. Podłącz wtyczkę do tej maszyny wirtualnej.

2. Dlaczego bezpłatnie?

Chcę mieć mój projekt dla zwierząt. I dzieli się nim z innymi programistami. Sam używam ogromnej liczby darmowych programów, na przykład tego samego Linuksa, VirtualBox, WordPress. Mogę więc wnieść niewielki wkład w świat wolnego oprogramowania.

Ponadto wszystkie płatne wtyczki do optymalizacji obrazu w WordPressie mają własne serwery, które są optymalizowane.
Serwery są drogie. Dlatego cena takich wtyczek nie jest mała. Udało mi się zaimplementować mechanizm, za pomocą którego komputer jest serwerem optymalizacji obrazu. Dlatego, aby moja wtyczka działała, nie muszę tworzyć serwerów optymalizacji opartych na chmurze i wydawać na nie dużych pieniędzy.
W rozwoju wtyczki inwestuję tylko swój czas.

3. Czy planujesz uzupełnić funkcjonalność wzrostem popularności i co?

Oczywiście tak, pierwszą funkcją dodaną do wtyczki jest automatyczna optymalizacja podczas dodawania obrazu do biblioteki multimediów.
Ta funkcja jest potrzebna po tym, jak programista dokona optymalizacji strony i przekaże kolejność. Klient będzie pracował z witryną, dodawał obrazy i powinny być automatycznie optymalizowane. Programista może utworzyć darmowy serwer wirtualny na Amazon AWS, zainstalować w nim Linux, kodery i ssh. I połącz ich klientów z tym po zakończeniu pracy.

Planowane jest również dodanie połączonych trybów „Mozilla MozJpeg + Google Web” i „Google Guetzli + Google Web”

4. W ilu projektach korzystałeś i jakie są wyniki / stopień oceny / zadowolenie klienta?

Moja wtyczka działała na kilku dużych stronach. Także inni programiści używają wtyczki. Regularnie otrzymuję od nich listy z pytaniami, więc ostatnio zacząłem prowadzić stronę
„Często zadawane pytania” przez wtyczkę. Jeśli chodzi o właścicieli witryn, interesuje ich tylko wynik. Ile punktów otrzyma ich strona w PageSpeed ​​Insights. A jeśli w PageSpeed ​​nie ma komentarzy do obrazów, wtyczka działała doskonale.

5. W twojej opinii, w jaki sposób twoja wtyczka różni się od innych istniejących rozwiązań i dlaczego jej używanie jest korzystne.

Wtyczka umożliwia niezależne i bardzo elastyczne tworzenie serwerów mini-optymalizacji. Jest to jedyna darmowa wtyczka, która działa na hostingu i nie wymaga serwerów w chmurze.

Dziękuję Igorowi za świetną wtyczkę i odpowiedzi na pytania! Użyję i polecę wtyczkę. Życzę mu dalszego przyspieszonego rozwoju i wzrostu popularności.

Podobny