Przypuszczam, że części z Was bardzo dobrze jest znana usługa TinyPNG, za pomocą której z poziomu przeglądarki możemy dokonać kompresji obrazków w formacie jpg i png. Jest to jedna z lepszych usług tego typu i nic nie stoi na przeszkodzie aby z niej korzystać przy wgrywaniu obrazków w WordPressie i w Drupalu. A dzięki dostępnym dodatkom integracyjnym, podpięcie strony pod usługę TinyPNG nie wymaga znajomości API WordPressa/Drupala.

Zanim sięgniemy po integracyjną wtyczkę do WordPressa i integracyjny moduł do Drupala, wpierw warto zacząć od samej usługi TinyPNG.

Ile to kosztuje?

Cena jest uzależniona od wykorzystywania usługi, nie ma tu odgórnie przygotowanych planów cenowych, a rozliczani jesteśmy w cyklu miesięcznym. Kompresję pierwszych 500 obrazków w każdym miesiącu mamy gratis. Po przekroczeniu tego progu dopiero naliczana jest opłata – przy obecnym kursie dolara wychodzi 4 grosze per obrazek, a po przekroczeniu progu 10.000 obrazków, cena zmniejsza się do 1 grosza per obrazek.

Ale bez obaw, po przekroczeniu progu 500 obrazków opłaty są naliczane tylko, gdy podaliśmy dane karty kredytowej, w przeciwnym razie do końca danego miesiąca kolejne obrazki po prostu nie będą kompresowane.

Cena odpowiada lub limit 500 obrazków styknie? No to lecimy dalej!

Zakładamy konto na TinyPNG

Na stronie usługi w zakładce Developer API wypełniamy dostępny tam formularz podając Imię/Nick i adres e-mail.

tinypng api key form

Wraz z wysłaniem formularza, nasze konto na TinyPNG zostaje założone, a drogą mailową (na ogół zaraz po wysłaniu formularza) otrzymujemy powitalny e-mail z wygenerowanym adresem URL dostępu do naszego konta, który klikamy lub jeżeli nie jest klikalny, przekopiowujemy do paska adresu przeglądarki.

=== === === === ===

TinyPNG nie oferuje stałego dostępu do konta via login i hasło, tylko via generowane adresy url, których ważność wygasa wraz z wyczyszczeniem pamięci przeglądarki oraz przy zamknięciu przeglądarki. Gdy będziemy chcieli później dostać się do naszego konta musimy wysłać żądanie dostępu – na stronie głównej TinyPNG po prawej jest mini formularz…

tinypng access account

…, wpisujemy adres e-mail, który podaliśmy podczas rejestracji i wysyłamy formularz, po chwili na maila dostajemy adres URL dostępu do konta. I tak każdorazowo, gdy będziemy chcieli dostać się konta a poprzedni wygenerowany adres URL „wygaśnie”.

=== === === === ===

Klucz API, płatności, powiadamianie o limicie

Kliknęliśmy wygenerowany adres URL w odebranym mailu, wyświetliła się strona naszego konta, co tu mamy?
W pierwszej sekcji mamy podany klucz API, który będzie potrzebny do powiązania naszej strony z usługą TinyPNG. Oraz mamy obecny stan wykorzystania usługi.

tinypng panel key

W kolejnych dwóch formularz na dane karty kredytowej oraz przelicznik ceny kompresji obrazków przy różnych pułapach.

W następnej sekcji mamy coś co nas może zainteresować – włączenie wysyłania powiadomień drogą mailową, gdy wykorzystanie naszego konta osiągnie podany przez nas próg. Warto to włączyć!.

tinypng panel limit notification

Ostatnia sekcja to faktury.

To tyle, przechodzimy (wedle wyboru) do instalacji wtyczki do WordPressa lub modułu do Drupala. Obecnie otwartej zakładki nie zamykamy, bo będziemy potrzebować później przekopiować klucz API.

Instalujemy wtyczkę do WordPressa

Wtyczek jest kilka, ja zasugeruję oficjalną wtyczkę, bo taka jest dostępna. Jej nazwa to Compress JPEG & PNG images i dostępna jest w oficjalnym repozytorium wtyczek – https://wordpress.org/plugins/tiny-compress-images/.

Instalacja standardowa.

=== === === === ===

Nie instalowałeś/aś jeszcze wtyczki?

W kokpicie po lewej -> Wtyczki -> następnie Dodaj nową -> w polu Szukaj wtyczek wklejasz nazwę wtyczki, w tym przypadku Compress JPEG & PNG images i klikasz przycisk Instaluj.

wordpress add tinypng plugin

Rusza proces pobrania i wgrania paczki z wtyczką na serwer, po jego zakończeniu pojawi się przycisk Włącz wtyczkę, klikasz i gotowe.

=== === === === ===

Konfiguracja

Wtyczka zainstalowana, wbijamy na jej stronę konfiguracyjną: Kokpit -> Ustawienia -> Media i przechodzimy w dół do sekcji PNG and JPEG compression.

TinyPNG API key wklejamy klucz API i zapisujemy ustawienia klikając na dole Zapisz zmiany.

wordpress tinypng settings api key

File compression wybieramy dla których obrazków ma być stosowana kompresja, pierwszy na liście to oryginał, pozostałe to style miniatur. Kompresja styli miniatur podobnie jak oryginału jest wliczana w miesięczne wykorzystanie usługi.

wordpress tinypng settings image style select

Resize original opcjonalnie włączamy scalanie w dół, gdy określone wymiary zostaną przekroczone. Przykładowo obrazek o wymiarach 4000 x 4000 pikseli zostanie przeskalowany na 1300 x 1300 pikseli. Każde przeskalowanie jest liczone tak jak skompresowany obrazek.

wordpress tinypng settings resize

W Connection status mamy aktualny stan wykorzystania usługi oraz status połączenia z usługą.

wordpress tinypng settings info

A w Savings ile zaoszczędziliśmy na kompresji obrazków.

Dodatkowe opcje

Możemy skompresować wcześniej wgrane obrazki: Kokpit -> Media -> Compress JPEG & PNG Images. I klikamy Compress All Images.

wordpress tinypng bulk compress

Jeżeli na skompresowanie wszystkich obrazków nie pozwala nam limit konta w TinyPNG to możemy tylko wybrane obrazki poddać kompresji. Wchodzimy do biblioteki mediów, przełączamy widok z siatki na listę (patrz strzałka na poniższym obrazku) i zaznaczamy wybrane obrazki, a następnie w Masowe działania wybieramy Compress Images.

wordpress tinypng media library compress

Instalujemy moduł do Drupala

Podobnie jak w przypadku WordPressa i do Drupala znajdziemy więcej niż jeden integracyjny dodatek. Ale tylko nieoficjalne. Polecę ten z którego sam korzystam – TinyPNG On Upload.

Instalacja standardowa.

=== === === === ===

Nie instalowałeś/aś jeszcze modułu?

Na stronie modułu, na dole w sekcji Downloads prawym przyciskiem myszki/touchpada na tar.gz (12.76 KB) obok 7.x-1.0 i z menu wybierasz Kopiuj adres linku. Następnie Panel zarządzania stroną -> Moduły -> u góry obok tytułu klikasz Instalacja nowego modułu.

Instalacja z adresu URL wklejasz skopiowany wcześniej adres URL i klikasz Instaluj. Rozpoczyna się proces wgrania paczki z modułem na serwer Twojej strony. Po zakończeniu tej operacji wyświetli się strona z informacją, że gotowe i odnośnikami do instalacji kolejnego modułu, włączenia wgranego modułu i przejścia na stronę główną panelu zarządzania. Wybierasz ten środkowy. Następnie na liście szukasz TinyPNG On Upload, zaznaczasz checkbox obok nazwy i na samym dole klikasz Zapisz konfigurację. I gotowe.

=== === === === ===

Konfiguracja

Moduł zainstalowany, wbijamy na jego stronę konfiguracyjną: Panel zarządzania -> Konfiguracja -> sekcja Media -> TinyPNG On Upload.

W Enter your API key wklejamy klucz API i zapisujemy ustawienia klikając na dole Zapisz konfigurację.

drupal tinypng settings

Dodatkowe opcje

Możemy włączyć debugowanie podczas wgrywania obrazków, które zdradzi ile zaoszczędziliśmy na kompresji – zaznaczamy checkbox obok Enable debug mode i na dole klikamy Zapisz konfigurację.

drupal tinypng settings 2

Możemy skompresować wcześniej wgrane obrazki. W sekcji Unprocessed images mamy listę pól poprzez które wgrywane są obrazki oraz ile zostało wgranych dotychczas. Przez zaznaczenie checkboxa obok nazwy wybieramy wszystkie lub wybrane tylko pola i klikamy przycisk Queue Images for cron processing lub Manually batch process images. Pierwszy uruchomi kompresowanie plików w tle podczas kolejnego uruchomienia zadań CRON, a drugi zaraz po kliknięciu. Nic Ci to nie mówi? Wybierz ten pierwszy.

 

📣 Obserwuj nas na Facebooku!

1 Comment

Dodaj komentarz