Optymalizacja zdjęć to kluczowy element każdej efektywnej strategii związanej z tworzeniem i zarządzaniem stronami internetowymi opartymi na WordPress.
Wydajność strony oraz jej szybkość ładowania mają ogromne znaczenie dla doświadczenia użytkownika i wyników SEO. Jednym z najczęstszych źródeł wolniejszych czasów ładowania witryn internetowych są duże i niewłaściwie zoptymalizowane zdjęcia.
Dzisiaj chciałbym przedstawić wam moją sprawdzoną metodę na maksymalną kompresję wykorzystywanych przez nas grafik na naszym blogu.
Co będzie nam potrzebne do optymalizacji obrazów ?
W tym celu wykorzystamy GIMP, wtyczkę Imagify oraz darmową witrynę tinypng.com. Oczywiście zamiast GIMP możecie korzystać z dowolnego innego programu graficznego. Ważne tylko, by miał możliwość zapisu do formatu WebP.
Format obrazów WebP to nowoczesny standard kompresji obrazów stworzony przez firmę Google. Jest to format graficzny, który oferuje doskonałą jakość przy minimalnym rozmiarze plików. Oznacza to, że obrazy zapisane w formacie WebP zajmują mniej miejsca na dysku niż obrazy w innych popularnych formatach, takich jak JPEG czy PNG, przy zachowaniu wysokiej jakości wizualnej.
Imagify to najlepszy znany mi optymalizator obrazów dla WordPress. Wtyczka kompresuje nasze obrazy „w locie” i na dodatek potrafi skonwertować nasze zdjęcia do formatu WebP.
Konfiguracja Imagify
Konfiguracja Imagify jest banalna, wystarczy pobrać i zainstalować wtyczkę. Następnie musimy się zarejestrować, by w ten sposób dostać swój unikalny klucz API.
Po wklejeniu klucza API do wtyczki możemy przejść do jej konfiguracji. Tak właściwie musimy jedynie zdecydować, w jaki sposób wtyczka będzie zarządzać obrazami skonwertowanymi do WebP.
Do wyboru są tylko dwie pozycje:
- Use rewrite rules – opcja idealna dla osób, które mają dostęp do pliku
.htaccessna swoim serwerze. - Use <picture> tags – opcja dla osób posiadających hosting współdzielony.
W każdym bądź razie wtyczka Imagify w darmowej wersji pozwala na konwersję tylko 20 megabajtów zdjęć na miesiąc. Dlatego też koniecznie musimy coś wymyślić, aby nasz blog korzystał z tej wtyczki naprawdę w ostateczności.
Moja metoda na optymalizację zdjęć w WordPress z wykorzystaniem wtyczki Imagify:
Proces optymalizacji obrazów w formacie WebP z którego ja korzystam można podzielić na kilka kroków, które pomogą zmniejszyć rozmiar plików graficznych bez utraty jakości.
- Konwersja do formatu WebP: Pierwszym krokiem jest zapisanie swojego zdjęcia w formacie WebP za pomocą programu graficznego, który obsługuje ten format.
- Dodatkowa optymalizacja: Zapisanie obrazu w formacie WebP zapewnia już lepszą kompresję, nadal istnieją możliwości dalszej optymalizacji. Za pomocą darmowej strony TinyPNG kompresujemy (a właściwie próbujemy) skompresować nasze grafiki jeszcze bardziej.
Jak widzicie na screenie powyżej udało mi się „zdusić” moje grafiki zapisane w *.png naprawdę mocno. WebP kompresują się trochę słabiej, jednak i w tym przypadku każdy zaoszczędzony kilobajt jest na wagę złota.
- Upload na serwer: Kiedy masz już zoptymalizowany plik WebP, możesz go przesłać na swój serwer.
W tym momencie oczekujemy na „cuda” naszej optymalizacji. Jeżeli wtyczka Imagify stwierdzi, że nie jest już w stanie bardziej skompresować naszych zdjęć to zostawi je w spokoju, a my nie stracimy żadnych kilobajtów ze wspomnianego wcześniej limitu:
W ten sposób, korzystając z programu graficznego, narzędzi do kompresji online oraz wtyczki Imagify, możemy zoptymalizować obrazy w formacie WebP, zminimalizować rozmiar plików i przyspieszyć ładowanie strony internetowej. To kluczowy element dbania o wydajność strony oraz dobre doświadczenie użytkownika.
Co prawda przedstawiona przeze mnie metoda ma swoje wady (trzeba się czasami naprawdę sporo naklikać) ale… jest dla nas dostępna zupełnie za darmo i przynosi naprawdę niesamowite rezultaty.
Dziękuję za uwagę.
