Jak przygotować zdjęcia na stronę internetową WordPress?

Obrazki stanowią zazwyczaj gro zawartości stron fotografów. Optymalizacja zdjęć na stronę internetową jest więc niezbędnym krokiem do prawidłowego działania naszej witryny jak i do osiągnięcia sukcesu w wynikach wyszukiwania.

Obrazki tworzą zazwyczaj 50% wagi stron www a u fotografów czasem i 90%! Z tego względu optymalizacja plików graficznych ma duży wpływ choćby na prędkość ładowania naszej strony. To jak szybko załaduje się nasza strona www ma spore znaczenie rankingowe w Google. Bo przecież nikt nie będzie czekać 30 sekund na załadowanie się Twojej strony internetowej jakie piękne zdjęcia by na niej nie były. Warto więc dowiedzieć się na czym polega optymalizacja plików graficznych po to by zadbać o zadowolenie użytkowników oraz poprawić nasze wyniki w Google.

Rozmiar ma znaczenie – czyli o wymiarach grafiki na stronę internetową słów kilka

Nie wiesz jakie powinny być optymalne wymiary zdjęć na twojej stronie więc ładujesz je w kosmicznie wysokiej rozdzielczości?! To błąd często spotykany u fotografów. Powiedzmy, że chcesz przygotować zdjęcia z reportażu na nowy post na blogu. Wejdź teraz na swój blog i kliknij prawym klawiszem myszy (rozmiń menu) i wciśnij „Zbadaj”. Ukaże Ci się pasek ze znaczkami z Matrixa (kodem html) w którym ujrzysz linijkę kodu p.t. width=…px. To jest właśnie informacja o realnej szerokości zdjęcia (podana w pixelach) wyświetlanej na Twoim blogu. Jeśli więc ładujesz zdjęcia w pełnej rozdzielczości o długości boku powiedzmy 4000px a twój blog ma szerokość kolumny np. 1000px to i tak zdjęcie będzie czterokrotnie przeskalowywane. Nie ma więc sensu wrzucać dużych obrazów, które i tak zostaną zmniejszone. Nie zyskasz na jakości – jedynie stracisz na prędkości ładowania.

kod zrodlowy brazkow html wordpress
kod źródłowy html pliku graficznego

Teoretycznie optymalną wielkością zdjęcia będzie idealnie dobranie tej samej wartości co wartość odczytana za pomocą powyższego sposobu. W przykładzie na zdjęciu jest to szerokość 1200px. Obecne standardy to 500-1500px. Może się jednak okazać że w przyszłości zmienisz szablon z takiego który wymaga 750px na taki który preferuje powiedzmy 1500 px. Warto więc czasem z lekkim zapasem ładować pliki na stronę (1200-1500 px) pomimo, że nasz obecny szablon WordPress obecnie ma mniejsze wymogi. Oszczędzimy sobie pracy w przyszłości. Osobiście nie zalecam jednak ładowania plików na bloga większych niż 1920px.

Dodatkowo jeśli obecnie masz dość małą szerokość kolumny na blogu (powiedzmy 500-750px) to rekomenduje CI ładowanie dokładnie 2x większych plików ze względu na to że zdjęcia te będą lepiej prezentować się na wyświetlaczach Retina.

Jak przygotować zdjęcia w programie graficznym?

Już na etapie eksportu plików z Lightroom warto przygotować fotografie w odpowiednim rozmiarze wprowadzając dokładną wartość szerokości eksportowanego zdjęcia. Na podanym przykładzie będzie to 1200px. Ustawiona rozdzielczość w dpi nie ma znaczenia dla pliku cyfrowego i jego ostatecznej wagi. Jest to wartość wykorzystywana przy druku. Dlatego liczą się tutaj tylko realne wymiary zdjęcia w pixelach.

eksport zdjec lightroom dla wordpress
eksport zdjęć w Lightroom

Kompresja zdjęć na stronę

Programy graficzne takie jak LR, PS czy C1 umożliwiają kompresję zdjęć przy eksporcie do formatu jpg. Jest to kompresja stratna dlatego powinniśmy ostrożnie podejść do tematu lecz możemy na tym etapie oszczędzić wiele kilobajtów na wadze zdjęcia.

Poziom kompresji najlepiej przetestować samemu – na ile jest on dla nas akceptowalny. Znajdź balans i przetestuj np 3 różne poziomy kompresji w przedziale 50-80% i samemu określ czy widzisz różnicę w jakości. Ja osobiście używam wartości 72-78%. Na blogu Serwer.io jest test wizualny kompresji zdjęć gdzie śmiało można powiedzieć że 50% jest bardzo akceptowalną wartością.

Bezstratne odchudzanie zdjęć

Gdy wyeksportowaliśmy już jpg w odpowiedniej rozdzielczości i poddany wstępnej kompresji to teraz czas na dietę odchudzającą. W zdjęciach zaszyte jest mnóstwo niepotrzebnych informacji (np. meta dane), które stanowią tylko zbędny balast zdjęcia. W internecie jest od groma programów do zmniejszania wagi zdjęć jednak ja osobiście mogę zarekomendować program o nazwie JPEGmini ze względu na jego prostotę i skuteczność. Wystarczy przeciągnąć zdjęcia do JPEGmini a program robi za nas całą magię. Nie trzeba znać się na fizyce kwantowej by obsłużyć ten program. JPEGmini bezstratnie odchudza nasze zdjęcia usuwając m.in. podszyte w pliku metadane. W wersji PRO mamy też m.in. możliwość podpięcia wtyczki bezpośrednio do Lightroom.

optymalizacja zdjec wordpress jpegmini
odchudzanie zdjęć w JPEGmini Pro

Nazwa zdjęć – element SEO optymalizacji

Teraz Twoje zdjęcie jest już prawie gotowe do załadowania go na serwer. Należy pamiętać jeszcze o odpowiedniej nazwie pliku jeśli nie zmieniłeś ich już podczas eksportu. Nazwa którą wypluwa Twój aparat np DSC_0234.jpg nikomu nic nie mówi. Warto więc wprowadzić opisową nazwę zdjęcia zawierającą frazę kluczową np. palac-goetz-wesele-001.jpg M.in. dzięki temu zabiegowi nasze posty będą lepiej widoczne w wyszukiwarce a zdjęcia zaczną pojawiać się w zakładce Google Images. W konstruowaniu nazwy plików graficznych pamiętaj nie stosować polskich znaków, znaków specjalnych, dużych liter oraz żeby wykorzystywać separator zwany też myślnikiem („-„), zamiast spacji.

Optymalizacja zdjęć na stronie

Jesteś już po szczęśliwym etapie załadowania zdjęć na swój serwer. Brawo! Większość fotografów wykorzystuje przyjazny i skompresowany format zdjęć jpeg. Rzadziej PNG i GIF. W GIFie wrzucamy animacje zaś PNG to format bezstratny do małej palety barw np czarno-białe logo. Od 2010 roku dysponujemy nowszymi i lżejszymi formatami zdjęć jak WebP. WebP jest standardem dla skompresowanej grafiki w Internecie jako bezpośredni konkurent dla starszego formatu jpeg jednocześnie przy mniejszym rozmiarze w porównywalnej jakości.

Jak przekształcić zdjęcia załadowane na stronę z formatu jpg na webp?

Jeśli masz nowoczesny hosting z technologią Litespeed to wtyczka Litespeed Cache zapewni ci możliwość prze-konwertowania zdjęć do formatu WebP. Możesz na tym zaoszczędzić sporo kilobajtów. Jeśli Twój hosting nie dostarcza Ci tej technologii to możesz wykorzystać wtyczki WordPress takie jak Imagify czy Short Pixel, które mają m.in. opcję przekształcenia jpg do webp a ponadto dodatkowe opcje kompresji stratnej plików już znajdujących się na naszym serwerze.

Ustawienia Litespeed do optymalziacji obrazów
konwersja jpg na webp przy użyciu wtyczki Litespeed

Opisy alternatywne i tytuły zdjęć czyli kropka nad i

Atrybut ALT (tekst alternatywny) swoją nazwę wziął z funkcji jaką pełni czyli alternatywnego opisu. W przypadku, gdy strona nie może wyświetlić grafiki, to zamiast niej pojawia się tekst tj. właśnie jej opis alternatywny.

nadawanie atrybutu alt i tytułu zdjęciom w WordPress
tekst alternatywny oraz tytuł zdjęcia

Roboty Google potrafią odczytywać ALT zdjęcia i zawarte w nim słowa kluczowe. Dodatkowo atrybut ALT jest wykorzystywany w oprogramowaniu dla osób niewidomych jak i niedowidzących dlatego opis alternatywny grafiki warto pisać tak jakbyśmy chcieli opisać ślepemu co jest na zdjęciu. Ponieważ ALT jest odczytywany przez Googlebota jako integralna część kontentu to też użycie go ma wpływ zarówno dla pozycjonowania strony, jak i UX czyli doświadczenia jakiego doznaje użytkownik naszej strony.

Ponieważ tekst znajdujący się w opisie alternatywnym może być traktowany przez Googlebota jako część treści należy zwrócić uwagę na zagęszczenie fraz kluczowych w atrybucie ALT i nie przespamować go. Innymi słowy czasem warto w ogóle nie uzupełnić altów niż zrobić to w sposób niewłaściwy by sobie nie zaszkodzić.

Czy jak publikujemy post zawierający 100 zdjęć z reportażu to warto wprowadzać unikalne opisy do wszystkich fotografii?

Moim zdaniem: nie! Atrybut ALT jest na tyle marginalnym czynnikiem rankującym, że szkoda włożonego całego dnia pracy na tworzenie 100 unikalnych opisów alternatywnych. Zamiast tego skup się na ważniejszych sprawach. Dodaj ALT do zdjęcia wyróżniającego i kilka dobrych opisów alternatywnych do najważniejszych zdjęć – tych „sztosów” które chciałbyś żeby wyświetlały się w Google Images.

Czym wyróżnia się dobry opis alternatywny?

Jest prostym równoważnikiem zdania opisującym co jest realnie na zdjęciu z naturalnie wplecioną frazą kluczową na której nam zależy np. „oczepiny podczas wesela w pałacu Goetz”. Krótki, informatywny przekaz.

Opisy alternatywne obrazów na danej stornie możesz podejrzeć m.in. dzięki wtyczce do Chrome o nazwie Moz Bar opisanej w tym artykule: przydatne SEO rozszerzenia Chrome

Jeśli nie masz chęci i ochoty na tracenie czasu na ALTy możesz skorzystać z automatycznego uzupełniania opisów alternatywnych na podstawie nazw zdjęć i tytułów postów. Taką opcję umożliwia m.in. RankMath.

ustawienia Rank Math - automatyzacja procesu nadawania atrybutu alt i tytułów plikom graficznym
automatyczne nadawanie atrybutów alt oraz tytułów zdjęciom przez wtyczkę Rank Math

Prócz opisu alternatywnego zdjęciom możemy nadać także tytuły. Tytuły zdjęć (Atrybut Title) można wykorzystać jako opcję przekazania dodatkowej informacji – np. zachęty do działania, szerszego opisu kontekstu czy wskazówkę gdyż wyświetla się on w postaci dymku po najechaniu na zdjęcie kursorem myszki. Jeśli wprowadzamy już ALT oraz tytuł plikom graficznym to należy pamiętać o tym, żeby treść obu atrybutów – ALT i Title stanowiła logiczną całość.

Optymalizacja zdjęć – podsumowanie

Teraz już wiesz jak zoptymalizować grafikę na Twojej stronie. Wystarczy kilka prostych kroków by przejść ekstremalne odchudzanie na naszej stronie i znacząco poprawić jej wydajność. Fotografie do dzieła!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *