Optymalizacja zdjęć WordPress krok po kroku

Optymalizacja obrazów/zdjęć WordPress

Ten poradnik powstał w celu poprowadzenia Cię krok po kroku przez proces optymalizacji obrazków i zdjęć WordPress, dzięki czemu Twoja strona WordPress będzie działać szybko oraz poprawi się jej wynik pozycjonowania w Google.

Z tego poradniku dowiesz się więc:

1. Czym są obrazki i zdjęcia WordPress?
2. Dlaczego warto optymalizować zdjęcia?
3. Jak przebiega proces optymalizacji obrazków?
4. Czym różni się kompresja stratna od bezstratnej?
5. Jaki wpływ na SEO ma optymalizacja obrazków?
6. Jak zoptymalizować obrazki WordPress?
7. Jakie wtyczki do optymalizacji obrazów wybrać?
8. Jakie aplikacji do optymalizacji zdjęć wybrać?

Zaczynamy 💪🤓

Obrazki i zdjęcia w WordPress

Obrazki oraz zdjęcia WordPress to obowiązkowy element na każdej stronie internetowej, który nie tylko uatrakcyjnia prezentowany content, lecz także pozwala uzupełnić przekaż o dodatkowe informacje dla klienta. Obrazki WordPress znajdą więc zastosowanie przy tworzeniu stron WordPress w formie prostych wizytówek firmowych, sklepów internetowych oraz blogów.

Obrazki WordPress mogą mieć formę np.:

1. Bannera, który prezentuje np. informacje o promocji lub ofercie.
2. Grafiki wektorowej będącej elementem szablonu WordPress.
3. Infografiki dołączonej do wpisu na blogu.
4. Loga strony internetowej oraz favicony.
5. Wyróżniającego zdjęcia na podstronie.
6. Zdjęcia w treści strony lub wpisu.
7. Animacji w formie GIF-a.

Najczęściej mają takie formaty:

• .jpg
• .jpeg
• .png
• .svg
• .webp
• .jpg2000
• .gif

Sprawdź w wolnej chwili także skąd pobrać darmowe zdjęcia na bloga WordPress lub dowiedz się jak rozwiązać problem z niewyświetlającymi się zdjęciami WordPress.

Czym jest optymalizacja obrazków i zdjęć

Optymalizacja zdjęć oraz obrazów to proces zmniejszania [tzw. kompresji] jego rozmiaru poprzez wykorzystanie stratnych lub bezstratnych algorytmów. W zależności od wybranej metody, optymalizacja obrazów może w różnym stopniu zmniejszyć wielkość pliku czasami nawet oferując redukcję rozmiaru na poziomie 80-90%! Oczywiście im bardziej agresywna optymalizacja zdjęć, tym także gorsza końcowa jakość obrazu.

Optymalizacja obrazków może być wykonana za pomocą programów do obróbki graficznej, dedykowanych do tego celu narzędzi lub na poziomie już samego systemu WordPress. Każda z tych metod może być tak samo skuteczna i jej wykorzystanie zależy tylko i wyłącznie od tego, która będzie dla Ciebie najwygodniejsza.

Sprawdźmy teraz dlaczego warto optymalizować obrazki i zdjęcia.

Dlaczego warto optymalizować obrazki WordPress

Czas ładowania strony internetowej to jeden z kluczowych czynników jej pozytywnej oceny w oczach klientów. Oznacza to tyle, że im szybciej ładuje się Twoja strona WordPress tym lepsze wrażenie robi na użytkownikach oraz Google. Wpływa to pozytywnie na m.in. współczynnik odrzuceń, a także pozycję strony w Google. Jeżeli nie wierzysz, że tak jest, koniecznie przeczytaj te dwa poradniki:

1. WordPress SEO
2. Jak przyspieszyć WordPress
3. Optymalizacja strony internetowej

Ok, co więc zyskasz optymalizując każde zdjęcie prezentowane na stronie WordPress?

1. Krótszy czas ładowania strony.
2. Lepszą ocenę SEO strony.
3. Wyższą konwersję sprzedaży.
4. Większą liczbę geneowanych leadów.
5. Mniej zajętego miejsca na serwerze.
6. Mniejsze zużycie przepustowości łącza.
7. Szybsze wykonywanie kopii zapasowych.

Dobrze zoptymalizowane obrazki w WordPress pozwalają przyśpieszyć czas ładowania strony nawet o 50% oraz poprawić jej wynik w Google PageSpeed Insight nawet o kilkadziesiąt punktów!

Wiesz już czym jest optymalizacja obrazków i zdjęć oraz dlaczego warto o niej pamiętać przed dodaniem zdjęć do WordPress. Teraz opiszemy Ci jak w praktyce wygląda proces optymalizacji obrazków z wykorzystaniem dwóch rodzajów algorytmów.

Na czym polega proces optymalizacji obrazków

Optymalizacja zdjęć to proces, który opiera się o analizę obrazu, a następnie usunięcie elementów, które w mniejszym lub większym stopniu są w ocenie algorytmu zbędne. Aby lepiej zrozumieć proces optymalizacji obrazków opiszemy Ci teraz najważniejsze różnice pomiędzy stratną a bezstratną optymalizacją zdjęć wykorzystując dla przykładu jedno z darmowych zdjęć.

Oryginalne zdjęcie zostało do testów zmniejszone do rozdzielczości 1280 x 853 piksele i przed kompresją jego plik waży dokładnie 1 457 084 B [1,5 MB].

Bezstratna optymalizacja zdjęć

To najbezpieczniejsza forma optymalizacji obrazków, ponieważ w żadnym stopniu nie wpływa ona na jakość zdjęcia. Bezstratna kompresja zdjęć usuwa, bowiem tylko zbędne i dodatkowe metadane, które generowane są automatycznie przez sprzęt lub oprogramowanie przetwarzające obrazy.

Bezstratna optymalizacja zdjęć oferuje redukcję rozmiaru pliku maksymalnie o 10-15%.

Powyższe zdjęcie po optymalizacji bezstratnej z wykorzystaniem naszych narzędzi zmniejszyło się o 2,1% [1 426 653 B zamiast 1 457 084 B] i wygląda tak:

Stratna optymalizacja zdjęć

Stratna optymalizacja zdjęć wiąże się zawsze z utratą jakości, ponieważ w tym wypadku algorytm optymalizując obraz usuwa, oprócz metadanych jak w przypadku bezstratnej kompresji, także niektóre piksele. Proces ten jest zawsze nieodwracalny, jednak optymalizacja obrazów z wykorzystaniem stratnych algorytmów może w niektórych sytuacjach oferować znacznie wyższą kompresję bez widocznej utraty jakości. Wszystko zależy od tego jak bardzo agresywny będzie wybrany algorytm.

Stratna optymalizacja zdjęć może pozwolić zmniejszyć obraz nawet o 80-90%.

Po zastosowaniu stratnej kompresji to samo zdjęcie stało się mniejsze o o 85% [218 091 B zamiast 1 457 084 B] i prezentuje się tak:

Optymalizacja obrazów: stratna vs bezstratna metoda

Poniżej możesz zobaczyć porównanie obu zdjęć, przy wykorzystaniu bezstratnej kompresji [zdjęcie w lewej części] i przy wykorzystaniu stratnej kompresji [zdjęcie w prawej części].

Pomimo ogromnej różnicy w rozmiarze obu zdjęć, efekt kompresji jest praktycznie niezauważalny i widoczny dopiero przy znacznym przybliżeniu:

To oczywiście tylko przykład, w którym porównaliśmy stratną i bezstratną optymalizację zdjęć. Poniżej znajdziesz instrukcję jak krok po kroku zoptymalizować obrazki na stronie WordPress. Nie zapomnij o skorzystaniu z nowoczesnego formatu zdjęć WebP, aby osiągnąć najlepsze efekty optymalizacji.

Zoptymalizowany rozmiar zdjęć WordPress

Zanim przejdziemy do samej optymalizacji musisz zapamiętać, że im mniejszy jest rozmiar zdjęcia tym krótszy będzie czas wczytywania strony internetowej. Dlatego tak ważna jest odpowiednio wykonana optymalizacja obrazka, która bez znacznej utraty jakości pozwala odpowiednio skompresować zdjęcia przed lub w trakcie dodawania ich do WordPress.

Rozmiar zdjęć zależy w dużej mierzy od wykorzystywanego szablonu WordPress oraz miejsca jego umieszczenia, jednak w większości przypadków zdjęcie i obraz nie powinien zajmować więcej niż 100-150 KB przy szerokości zdjęcia do 1500 px w proporcjach 16:9 lub 16:10.

Małe zdjęcia np. miniaturki lub logo powinny ważyć nie więcej niż kilka lub kilkanaście kilobajtów.

Nigdy nie dodawaj do WordPress zdjęcia, które mają rozmiar większy niż kilkaset kilobajtów, ponieważ negatywnie wpłynie to na czas wczytywania strony.

Jak zoptymalizować zdjęcia i obrazki WordPress

Aby poprawnie zoptymalizować obrazki w WordPress postępuj zgodnie z naszą instrukcją krok po kroku. My do tego celu posłużymy się jeszcze raz oryginalnym zdjęciem pobranym wcześniej z internetu o początkowej rozdzielczości 6000 × 4000 pikseli oraz rozmiarze 6,8 MB.

1. Optymalizacja obrazków WordPress – format pliku

Pierwszym krokiem w celu optymalizacji zdjęcia w WordPress po jego pobraniu na dysk jest sprawdzenie formatu w jakim został zapisany obraz. W przypadku zwykłych zdjęć najbardziej popularnym rozszerzeniem jest .jpg. Pliki .png sprawdzą się wtedy kiedy zdjęcia są bardzo proste lub posiadają przezroczyste tło, natomiast .gif w przypadku animowanych grafik.

Format pliku możesz sprawdzić na końcu nazwy Twojego pliku np.:

adventure-asia-bali-1090551.jpg

Wybierz odpowiedni rodzaj rozszerzenia pliku, a następnie, jeżeli jest taka potrzeba, zmień jego format za pomocą np. programu GIMP. W tym celu wystarczy wyeksportować obraz zmieniając na końcu jego rozszerzenie w przypadku .jpg, .jpeg lub .png.

Zmiana formatu pliku na odpowiedni dla danej grafiki pozwala znacznie zmniejszyć jego rozmiar.

Od jakiegoś czasu WordPress 5.8 wspiera obsługę nowoczesnego formatu zdjęć na stronach internetowych. Mowa o formacie WebP zostało stworzone przez Google i posiada rozszerzenie .webp. Format WebP pozwala znacząco zoptymalizować rozmiar obrazów i zdjęć na stronie internetowej. Na naszej stronie wykorzystujemy format WebP do prezentowania aktualnie wszystkich grafik. W większości przypadków zaowocowało to zmniejszeniem rozmiaru zdjęć od około 40% od nawet 80%❗️

Format WebP został opublikowany na licencji BSD co oznacza, że jest darmowy do każdego rodzaju użytku. Wspierają go najpopularniejsze przeglądarki internetowe, a on sam obsługuje przezroczystość znaną z formatu PNG oraz animacje obsługiwane przez pliki GIF. Różnica w jakości stratnej na poziomie 70% jest natomiast praktycznie niezauważalna dla naszego oka, co czyni WebP doskonałym formatem pliku dla wszelkich zdjęć na stronie www.

Po przekonwertowaniu zdjęć w tym artykule z formatu JEGP do WebP nie widać żadnej różnicy poza dużo mniejszym rozmiarem każdego pliku.

Ponieważ nasze zdjęcie miało już odpowiedni format .jpeg na tym etapie nie udało się go bardziej zoptymalizować.

2. Optymalizacja obrazków WordPress – rozdzielczość zdjęcia

Standardowo jeżeli pobierasz darmowe lub zakupione zdjęcie to jego rozmiar w pełnej rozdzielczości ma zazwyczaj więcej niż 2000 pikseli szerokości oraz 300 DPI. Zdjęcie takiej jakości znakomicie będzie prezentować się w druku lub na dużym ekranie, jednak w przypadku strony WordPress nie potrzebujesz, aż takiego rozmiaru obrazu.

Korzystając ze wspomnianego GIMP-a lub innego programu do obróbki graficznej, zmniejsz rozmiar zdjęcia korzystając z opcji skalowania obrazu do np. rozdzielczości 1280 x 720 pikseli.

W ten sposób możesz zoptymalizować grafikę nawet do wielkości kilkudziesięciu kilobajtów.

To działanie zmniejszyło rozmiar pliku do 1,5 MB przy rozdzielczości 1280 x 853 pikseli.

3. Optymalizacja obrazków WordPress – bezstratna kompresja

Ten etap polecamy każdemu kto chce zoptymalizować swoje zdjęcie, bowiem bezstratna kompresja, jak już wspomnieliśmy usuwa tylko naprawdę zbędne dane z jego pliku. Zatem niezależnie od tego, czy zamierzasz wykonać także stratną kompresję obrazu, skorzystaj z darmowego narzędzia kraken.io w celu oszczędzenia dodatkowych KB.

W darmowej wersji strona ma ograniczenie wielkości pliku do 1 MB. Narzędzie umożliwia także wykonanie stratnej optymalizacji obrazków.

Nasza bezstratna kompresja zdjęcia zaowocowała mniejszym rozmiarem pliku o 2,1%.

4. Optymalizacja obrazków WordPress – stratna kompresja

Jeżeli aktualny rozmiar zdjęcia jest dla Ciebie zbyt duży, możesz zdecydować się na wspomnianą stratną kompresję zdjęcia. W tym celu skorzystaj np. z darmowego narzędzia tinypng.com. Wystarczy, że dodasz zdjęcie, a aplikacja sama wykona stratną optymalizacją obrazka.

Narzędzie ma ograniczenie do jednoczesnej optymalizacji 20 zdjęć o wielkości 5 MB każde.

W naszym przypadku stratna optymalizacja obrazka WordPress zaowocowała dodatkową kompresję na poziomie 86,1% i ostateczna wielkość zdjęcia wyniosła 0,2 KB.

Optymalizacja obrazków WordPress za pomocą wtyczki

Na sam koniec przygotowaliśmy dla Ciebie listę najlepszych wtyczek do WordPress za pomocą, których zoptymalizujesz swoje zdjęcia już bezpośrednio z poziomu panelu administratora.

Możesz pobrać je za darmo z repozytorium wtyczek WordPress lub klikając w link:

1. Image optimization & Lazy Load by Optimole
2. EWWW Image Optimizer
3. Compress JPEG & PNG images
4. Imagify – WebP & Image Compression and Optimization
5. ShortPixel Image Optimizer
6. Smush Image – kompresja i optymalizacja
7. reSmush.it Image Optimizer
8. Resize Image After Upload

Wtyczka do optymalizacji obrazków WordPress przyda się szczególnie w sytuacji, w której więcej niż jedna osoba korzysta z platformy.

Optymalizacja obrazków za pomocą aplikacji

Jeżeli jednak chcesz zoptymalizować obrazki i zdjęcia WordPress na swoim komputerze, skorzystaj z tych aplikacji:

1. GIMP – darmowa aplikacja na MacOS i Windows
2. Adobe Photoshop – program płatny na Macos i Windows
3. ImageOptim – za darmo tylko na MacOS
4. Trimage – bezpłatnie aplikacja na Windowsa

Lub wykorzystaj zarówno aplikację na komputer jak i wtyczkę w celu jeszcze lepszej optymalizacji zdjęć WordPress.

Zoptymalizuj zdjęcia i obrazki WordPress razem z nami

Zamiast tracić czas możesz zlecić nam optymalizację zdjęć oraz obrazków w WordPress lub całej platformy 💪 wystarczy, że skontaktujesz się z nami za pomocą poniższego formularza kontaktowego 👇👇 Jak zwykle nasz zespół ekspertów czeka na Ciebie 🤓