Optymalizacja zdjęć pod SEO w WordPress

Siemanko. W tym filmie pokażę Ci jak dodać grafiki albo zdjęcia do Twojego WordPressa zgodnie z wytycznymi Google’a. Jeżeli chcesz, żeby Twoja strona, sklep internetowy były atrakcyjne, żeby grafiki dobrze się pozycjonowały i też cała strona dobrze się pozycjonowała, to te grafiki muszą spełniać konkretne kryteria. Google daje nam wytyczne jak one powinny wyglądać i w jakim powinny być formacie.

Wszystko sprowadza się do tego, że ta grafika musi się po prostu szybko załadować, głównie na telefonie komórkowym. No i te grafiki najlepiej przygotować przed wrzuceniem na serwer, bo wtedy możemy je najbardziej zoptymalizować. Więc będziemy szukali kompromisu pomiędzy tym, że grafika będzie lekka, ale też, że będzie dobrze wyglądała.

Dodawanie zoptymalizowanych zdjęć pod SEO

W przykładzie tego filmu ja akurat dodam kolejne zdjęcie do galerii. Pobrałem sobie bardzo ciężkie zdjęcie z serwisu z płatnymi zdjęciami. No i np. jeśli klikniemy w takie zdjęcie otwórz obraz w nowej karcie to możemy się o nim więcej dowiedzieć. Czyli tutaj zobacz jak jest nazwana ta grafika. Projekt kuchni na wymiar, czyli tutaj już mamy do czynienia ze słowami kluczowymi i jest odpowiedni format jakim jest .webp. No i teraz właśnie pokażę Ci jak dodać w tym formacie zdjęcie na WordPress.

Jak zmniejszyć zdjęcie bez znacznej utraty jakości?

Więc ja mam taką grafikę przygotowaną. No i tutaj w folderze mamy dwa pliki. Jeden jest z płatnego banku zdjęć, to właśnie ten i zobacz on ma aż 12,8 MB, więc bardzo dużo waży. Natomiast ten, który był na stronie ma 132 KB, więc możesz sobie obliczyć, że jest, jeśli byśmy pomnożyli to razy 10 to by dopiero miał 1,30 MB, więc jeszcze dużo brakuje do tego, żeby mieć 13 MB. Taki obrazek by się bardzo wolno ładował. Ten obrazek jest zdecydowanie za duży. Prawdopodobnie. Sprawdźmy jakie ma wymiary, informacje. I tutaj mamy 7000.px rozdzielczości, więc bardzo fajny plakat, ale żeby go wydrukować na ścianę, a nie żeby był na stronie. No więc my chcemy po prostu teraz ten obrazek zmniejszyć i wrzucić na stronie.

Darmowy program do obróbki zdjęć pod SEO

I będę korzystał z darmowego Photoshopa. Czyli wchodzę na Photopea.com. Photopea.com jest darmowym, przeglądarkowym programem, który ma, nie wiem czy wszystkie, bo prawdopodobnie nie znam wszystkich funkcji Photoshopa, ale zdecydowanie te podstawowe i zaawansowane funkcje, które oferuje Photoshop, ma zupełnie za darmo.

Nawet nie musisz się zalogować, żeby z niego korzystać. No i tutaj przygotujemy nasze zdjęcie do tego, żeby wrzucić je na stronę. Klikam -> Otwórz i tutaj mam dwa nasze zdjęcia, którymi będziemy się zajmować. To zdjęcie mogę sobie wrzucić jako przykład i rozmiar, więc tak zrobię. Co ciekawe, możemy też tutaj zdjęcie przeciągnąć i upuścić. Ja sobie to wezmę na drugi ekran i w momencie gdy to zamknę to zobacz, przeciągam z drugiego ekranu i tutaj jest ten sam efekt, tylko troszkę szybciej. Otworzę sobie to drugie, ciężkie zdjęcie.

Ok, mamy pozytywnego Pana hydraulika, więc ja sobie już tutaj zmniejszę to zdjęcie. Klikam image -> image size i tutaj mamy ten wymiar. Więc ja sobie zrobię taki size na razie 2500 i teraz te proporcje są połączone, więc to mi się też zmniejszyło. Klikam “OK” i to zdjęcie wydaje się małe, ale tak naprawdę jest duże, więc się tym absolutnie nie przejmujemy. Natomiast tutaj mamy nasze bazowe zdjęcie i chcemy po prostu tego wymiaru się trzymać. Więc moglibyśmy sobie wymiar ustawić tam wcześniej, natomiast ja chcę po prostu dostosować, żeby było identyczne.

No i teraz chcę zmienić proporcje tego zdjęcia, a raczej nie proporcje, tylko rozmiar, bo proporcje mają właśnie zachować. Więc klikam na MacBook Ctrl+Command+T. Jeśli chodzi o Windows to Ctrl+Shift+T tak mi się wydaje mocno. A to mam zrobić bez shifta, więc kliknę sobie command+z jeszcze raz, ok. I to robię bez shifta po prostu. I teraz chcę dostosować to do tych wymiarów po prostu, ok. No i te proporcje nie są identyczne, bo gdybym chciał zrobić 1 do 1 to by był inny wymiar, a ja chcę żeby wszystko było w takim samym wymiarze na stronie, więc po prostu się tego trzymam. I tutaj jest Pan hydraulik na środku. Zakładamy, że to będzie stolarz dla naszego podpisu. Ja bym chciał go trochę przesunąć strzałeczkami. Ok, to nie jest istotne, tylko jest istotne to, że mam taki sam wymiar tego zdjęcia, bo to to chciałem osiągnąć.

Najlepszy format zdjęć pod SEO w WordPress

No i teraz -> export as -> i tutaj mamy webp. Teraz zobacz, mamy 120 KB i tu możemy sobie operować quality, czyli po prostu jakością.

No i mamy bardzo lekką grafikę, tylko ona słabo wygląda. I tutaj szukamy sobie kompromisu pomiędzy jakością a wagą 90% 70 KB – mega oszczędność moim zdaniem. No i teraz sobie tutaj już nazywam plik odpowiednio. Czyli wpiszę sobie, że to jest Pan Stolarz z Grudziądza, stolarz-grudziadz. Klikam -> save.

Dodawanie zdjęć do galerii WordPress

Ok, mam zdjęcie na dysku, więc teraz chcę je dodać do galerii zdjęć. Mogę to zrobić na kilka sposobów, między innymi tutaj Media -> dodaj. Natomiast ja to zrobię bezpośrednio z galerii, więc sobie kliknę tutaj. No i to jest galeria od Kadence. Więc ja staram się nie używać żadnych wtyczek poza Kadence Blocks, żeby zbudować stronę, bo Kadence Blocks ma praktycznie wszystko co potrzeba, żeby np. taką stronę zbudować. No i tutaj chcemy dodać Pana stolarza. On kompletnie nie będzie tutaj pasował, ale zobaczymy. I teraz klikam akurat w przypadku galerii -> Edytuj. No i znowu jestem w tym samym miejscu, tak jakbym chciał dodać konkretne zdjęcia, czyli w media, to byśmy zobaczyli coś takiego. No i ja chcę przesłać pliki. Mogę tutaj zrobić drag and drop. Ja tak właśnie zrobię. Czyli przeciągam w to miejsce. No i teraz zdjęcie mi się załadowało. I bardzo ważna rzecz.

O czym pamiętać przy optymalizacji zdjęć na WordPress

Tekst alternatywny jest ważny z kilku powodów. Po pierwsze Google widzi, co jest na obrazku dzięki temu, że napisaliśmy mu to. Oczywiście sztuczna inteligencja też już rozpoznaje obrazki. Natomiast im więcej my podpowiemy Google’owi, tym lepiej. Druga rzecz to jeśli korzystają z Internetu osoby niedowidzący, to dzięki temu, że zdjęcie jest poprawnie opisane, to czytnik czyta im, co jest na zdjęciu. I wtedy mamy stronę dostępną dla osób, które mają np. wady wzroku. No i trzecia opcja to jest taka, że jeśli zdjęcie się z jakiegoś powodu nie załaduje to pokaże nam się alt tego zdjęcia, bo komuś np. zniknie Internet i nie będzie mógł zobaczyć zdjęcia. No to wtedy pokaże się alt. To są takie główne rzeczy jeśli chodzi o alt. I tutaj ja napiszę: Stolarz Grudziądz, więc słowo mocno kluczowe. No i tutaj “Pan Marek Stolarz z Grudziądza”. I tutaj mogę to samo napisać, to nie jest aż tak istotne. Natomiast najważniejszy jest po prostu alt i tutaj klikam -> Dodaj do galerii, akurat w tym przypadku.

Więc mamy tutaj Pana Marka stolarza. Ten podpis, który tutaj zrobiłem, jeśli nie ustawię w galerii inaczej, on mi się wyświetli właśnie pod zdjęciem, więc po to się robi m.in. ten podpis. Ok, klikam aktualizuj i teraz mam zdjęcie Pana Marka w galerii. Nie będzie to może jakoś mega wyglądało, ale chodziło o to, żeby zrobić to zdjęcie zgodnie z wytycznymi Googla. Mam tutaj takiego lightbox zrobionego właśnie w Kadence Blocks i tutaj będzie się pokazywał Pan Marek stolarz. I mam zdjęcie dobre pod SEO.

Jeśli masz jakieś pytania, jeśli mam rozwinąć jakiś temat to napisz w komentarzu. Jeśli jeszcze tego nie robisz to kliknij Subskrybuj. A jeśli potrzebujesz dostęp do narzędzi, których ja używam do budowania stron internetowych to link znajdziesz w opisie no i tam jest taki kurs mailowy właśnie z narzędziami, których ja używam do tworzenia stron internetowych. Mam w planach kilka filmów na temat SEO, więc jeśli zadasz pytania to ja będę dogrywał kolejne filmy na ten temat i mam nadzieję, że widzimy się w kolejnym filmie. Elo!