Wszystko o optymalizowaniu zdjęć na stronie internetowej – kompletny poradnik [SEO, user experience]
- Robert Jakubczak - Copywriter & UX Designer
Zdjęcia i obrazy na stronie internetowej są bardzo ważne. Poprawiają user experience, pozycjonowanie strony SEO, a także przyciągają uwagę i zwiększają konwersję.
Skąd brać zdjęcia i obrazy na swoją stronę www? Jak je optymalizować, żeby przyspieszyć stronę? Jak opisać, żeby podnieść pozycje w wyszukiwarce? Między innymi na te pytania odpowiem w dzisiejszym artykule.
Spis treści:
- Dlaczego warto dodawać i optymalizować zdjęcia na stronie internetowej?
- Skąd brać zdjęcia i obrazy na swoją stronę www?
- Programy do obróbki zdjęć i grafik
- Jaki wybrać format obrazów na stronę internetową?
- Jak zmniejszyć wielkość zdjęć, by przyspieszyć wczytywanie się witryny?
- Optymalizowanie zdjęć na stronie internetowej pod SEO
- Podsumowanie
Dlaczego warto dodawać zdjęcia na stronę internetową?
Powodów, by dodać zdjęcia, grafiki lub ilustracje na stronę internetową, jest mnóstwo. Przyjrzyjmy się kilku najważniejszym.
Treści multimedialne przykuwają uwagę odbiorcy
Mapy ciepła generowane przez osoby, które zajmują się badaniem user experience (doświadczenie użytkownika) na stronie internetowej, pokazują, że internauci zwracają uwagę przede wszystkim na treści multimedialne.
Rzadko kiedy czytamy tekst od deski do deski. Częściej skanujemy nagłówki, pogrubione słowa i właśnie obrazy lub filmy umieszczone na stronie internetowej.
Jeżeli przeglądasz tę stronę na komputerze, to odpowiedz sobie na pytanie, na co najpierw zwróciłeś uwagę. Na kota, czy na tekst?
Obraz wyraża więcej niż tysiąc słów
Poprzez grafikę możemy przekazać użytkownikowi określone znaczenie w szybki i łatwy poznawczo sposób.
Żyjemy w szybkim świecie, w którym ilość bodźców percypowanych przez przeciętnego człowieka jest ogromna. Dlatego też ludzie łatwo się nudzą i mają problem z przyswajaniem obszerniejszych treści tekstowych.
Obrazy i grafiki zamieszczane na stronie internetowej są idealnym remedium na tę okoliczność.
Grafiki poprawiają user experience
Istnieje wiele sposobów na to, jak zadbać o doświadczenie użytkownika, który przegląda naszą stronę internetową.
Jednym z ważniejszych wyznaczników dobrego UX jest wysoka przejrzystość witryny, architektura informacji i techniczne aspekty działania platformy.
Za pomocą dobrze zoptymalizowanych obrazów możemy poprawić przejrzystość treści, zatrzymać użytkownika na naszej stronie na dłużej oraz doprowadzić go do najistotniejszej zakładki (najistotniejszej z punktu widzenia biznesu, np. podstrony z ofertą).
Pliki multimedialne są wysoko oceniane przez algorytmy Google
Dodawanie i opisywanie zdjęć jest istotnym czynnikiem przy pozycjonowaniu strony internetowej.
Dzięki zamieszczaniu grafik na platformie możesz poprawić organiczne wyniki wyszukiwania fraz, na które widoczne są Twoje podstrony.
Dlatego też bardzo często przy pisaniu artykułów blogowych autorzy wrzucają wiele obrazów i ilustracji, które mają udekorować tekst, ale również zwiększyć wartość strony w oczach robotów Google.
Skuteczne grafiki na stronie internetowej zwiększają konwersję
Nieistotne, czy działasz w branży e-commerce, czy oferujesz usługi, musisz na stronie zaprezentować swoje produkty i rozwiązania.
Nie ma na to lepszego i skuteczniejszego sposobu, niż wykorzystanie zdjęć i ilustracji.
Podobnie nic tak bardzo nie zbuduje autorytetu, niż zdjęcie właściciela organizacji, pracowników lub oddziałów, ewentualnie infografika z wynikami badań i statystykami.
Zdjęcia i obrazy na stronie internetowej można wykorzystać na wielu płaszczyznach, w różnych celach.
Nie ważne, jakie ma się powody, istotne, by to robić.
Jeśli nie zadbamy o odpowiednie grafiki, użytkownicy będą szybciej wychodzić z naszej witryny, niż na nią wchodzić. Możemy również zapomnieć o jakiejkolwiek sprzedaży produktów bez zaprezentowania ich zdjęć „wizerunkowych”.
Skąd brać zdjęcia i obrazy na swoją stronę?
Jest wiele sposobów na pozyskiwanie grafik na stronę internetową. Możesz wykorzystywać własne zdjęcia, darmowe stocki lub kupować płatne ilustracje. Wszystkim tym opcjom przyjrzymy się dokładniej.
Samodzielne wykonywanie zdjęć na stronę www
Jeśli tylko dysponujesz takimi możliwościami, możesz wykonać zdjęcia na swoją stronę internetową samodzielnie.
Oczywiście warto tutaj zadbać o odpowiedni sprzęt, żeby jakość multimediów była jak najwyższa. Telefon jest zwykle wystarczający.
Wykonując zdjęcia osobiście, masz ten komfort, że decydujesz, jakie masz aktualne zapotrzebowanie i co musisz sfotografować.
Dużym plusem jest w tym przypadku brak kłopotów związanych z prawami autorskimi. Natomiast dużym minusem jest czas, który trzeba poświęcić na zrobienie i przygotowanie grafik.
Stock z darmowymi zdjęciami
Najbardziej popularnymi miejscami, z których możesz bezpłatnie pobierać grafiki i obrazy na swoją stronę internetową, są banki zdjęć (darmowe stocki).
Stocki z darmowymi zdjęciami polegają na tym, że poprzez słowa kluczowe wyszukujemy pożądane treści, pobieramy je i możemy zamieścić na swojej witrynie.
Pod spodem możesz zobaczyć trzy największe i najbardziej popularne banki darmowych zdjęć na stronę www:
Wszystkie wyżej wymienione platformy pozwalają na wykorzystanie zdjęć do użytku osobistego oraz komercyjnego. Zwykle opierają się one na licencji Creative Common.
Niektóre zdjęcia i grafiki wymagają przypisania autorstwa, tzn. że wykorzystując daną ilustrację musisz oznaczyć źródło lub autora.
Informacja o tym, czy wymagany jest jakiś przypis znajduje się bezpośrednio przy konkretnym zdjęciu i zachęcam, by to sprawdzać i oznaczać, jeżeli będzie takie polecenie.
Jeśli nie chcesz lub nie masz jak przypisać autorstwa, to po prostu znajdź inną grafikę.
Jedne portale wymagają częściej podania źródła niż inne. Dla przykładu autorzy zdjęć na stronie pixabay.com prawie nigdy nie nakładają takiego obowiązku, natomiast na stronie freepik zazwyczaj trzeba wskazać twórcę.
Musisz znaleźć platformę, która będzie najbardziej odpowiadała Twoim potrzebom.
Z własnego doświadczenia mogę powiedzieć, że zazwyczaj korzystam jedynie z portalu pixabay.com i jest to dla mnie wystarczające (a przecież na co dzień zajmuję się copywritingiem i tworzeniem stron internetowych).
Dodatkowo zachęcam, aby korzystając z darmowych banków zdjęć, nie brać pierwszych lepszych zdjęć, które wyświetlą się w wynikach wyszukiwania. Często są to oklepane grafiki, które wykorzystuje na stronie wiele osób. Zachęcam, by przewinąć sobie na kolejne strony i na nich wybrać odpowiedni plik graficzny.
Płatne grafiki
Jeżeli darmowe banki zdjęć nie spełnią Twoich oczekiwań (w co wątpię), to możesz zakupić licencję na wykorzystanie grafik od płatnych dystrybutorów.
Dwa największe serwisy oferujące płatne grafiki:
Dodatkowo warto zainteresować się zakupem licencji na program Canva Pro, o którym szerzej opowiem w części poświęconej obróbce grafik. Program ten udostępnia swoją własną bazę darmowych i płatnych zdjęć oraz ilustracji, które możesz wykorzystać na swojej stronie internetowej.
W przypadku płatnych zdjęć warto pamiętać, aby sprawdzić, jaką licencję obejmuje cena.
Może się zdarzyć, że jedna grafika będzie dostępna w różnych wariantach cenowych w zależności od celu wykorzystania (czy na użytek własny, czy komercyjny, czy jako znak towarowy itp.).
Programy do obróbki zdjęć i grafik
Zacznijmy od tego, że na stronę internetową można wrzucać zdjęcia, które nie są zmodyfikowane i przerobione.
Po prostu korzystasz z jednego z serwisów, które wcześniej opisałem, pobierasz odpowiednią grafikę i wrzucasz ją na swoją stronę.
Obróbka zdjęć jest czymś dodatkowym, co może zwiększyć atrakcyjność treści oraz poprawić spójność wizualną marki.
Canva
Canva to prosty w obsłudze program do obróbki plików graficznych dostępny z poziomu przeglądarki (nie trzeba go pobierać na komputer).
Można w nim również dokonywać drobnych zmian i modyfikacji na plikach wideo, a także dodać proste animacje. Są to opcje szczególnie przydatne przy tworzeniu np. kreacji reklamowych.
Cały interfejs narzędzia jest bardzo intuicyjny. Możesz wybrać gotowe szablony grafik, których potrzebujesz. Canva oferuje szereg szablonów różnego typu: postów na Facebooku, wizytówki, obrazka wyróżniającego na stronie www i wielu innych.
Jak pracować w Canvie?
Na początku wybierasz jakiś gotowy szablon lub tworzysz nowy projekt podając swoje własne wymiary grafiki.
Po wyborze odpowiedniego wzoru zostaniesz przekierowany do pola edycji.
Z lewej strony ukaże Ci się panel z dostępnymi widgetami. Możesz poprzez niego dodać elementy, zdjęcia i grafiki, teksty, wykresy i wiele innych (warto sobie poprzeglądać, aby poznać szerokie możliwości).
Całość dokonywanych zmian będzie widoczna na układzie roboczym z prawej strony.
Możesz modyfikować wszelkie kolory, rodzaje i rozmiary czcionek oraz inne ustawienia.
Gdy już uzyskasz końcową grafikę, wystarczy, że klikniesz przycisk „Pobierz” i wybierzesz właściwy format (o formatach będę jeszcze pisał).
Canva ma swoją bezpłatną wersję, która w zupełności wystarczy osobie, która na co dzień nie zajmują się grafiką. Wszystkie najpotrzebniejsze opcje i ustawienia są w niej odblokowane.
Natomiast płatna wersja zawiera dodatkowo większą bazę grafik premium, możliwość tworzenia większej liczby folderów (w pakiecie podstawowym można posiadać dwa), usuwanie tła, zmienianie rozmiaru itd. Z pełnym opisem pakietów można zapoznać się na stronie: www.canva.com/pl_pl/pro.
Adobe Photoshop
To niestety płatne rozwiązanie i zdecydowanie bardziej zaawansowane, a co za tym idzie trudniejsze w obsłudze.
Tutaj można z grafiką zrobić bardzo dużo, ale czas potrzebny na zapoznanie się z interfejsem i funkcjami może być odstraszający.
Zdecydowanie nie zalecam tej opcji osobom, które chcą jedynie zamieszczać na swojej stronie internetowej proste zdjęcia i ilustracje.
Jaki wybrać format ilustracji?
O formatach można, by się rozpisywać, ale nie byłaby to zbyt praktyczna wiedza. Tutaj krótko o najważniejszych kwestiach, które warto wiedzieć przy publikowaniu zdjęć i grafik na stronę internetową.
Format zdjęcia wpływa przede wszystkim na wydajność strony (bo zdjęcia mają różną wagę), wygląd (jedne mogą być bez tła, drugie mogą się ruszać itp.) oraz skalowalność (jedne można wielokrotnie powiększyć bez utraty jakości, inne się „popsują” przy delikatnym powiększeniu).
Poniżej omówię dwa najpopularniejsze formaty grafik zamieszczanych na stronie internetowej.
JPEG – format stratnej kompresji grafiki rastrowej
Wybieramy go przede wszystkim, gdy publikujemy na stronie internetowej duże ilości zdjęć, albo gdy zależy nam na bardzo wysokiej jakości multimediów.
Zazwyczaj jakość zdjęcia przekłada się na jego wielkość. Trzeba uważać, by nie miało za dużego rozmiaru i rozdzielczości.
Jeżeli zdjęcia będą ważyć bardzo dużo, to strona będzie wczytywała się nawet kilkanaście sekund.
Plusem plików JPEG jest fakt, że obsługują one miliony kolorów, więc zdjęcie jest zazwyczaj dokładniejsze i żywsze.
Minusem jest natomiast brak możliwości zamieszczenia przezroczystego tła, które przydaje się w przypadku publikowania grafik na strony www. Kiedy chcemy grafikę bez tła, musimy sięgnąć po png.
Format PNG
Wybieramy go, gdy chcemy zamieścić obrazy częściowo przezroczyste, bez tła.
Format PNG jest szczególnie przydatny w publikowaniu na stronie internetowej rysunków, logotypów, wykresów, diagramów, ilustracji i ikonek.
Plusem formatu PNG jest właśnie możliwość użycia przezroczystego tła – co wygląda ładnie i komponuje się z innymi treściami zamieszczonymi na stronie www.
Wadą tego typu plików jest ich waga, która najczęściej jest wyższa od plików JPEG i trudniejsza do skompresowania.
Oczywiście formatów jest znacznie więcej.
Mamy jeszcze pliki GIF, czyli obrazy zdolne do animacji oraz format SVG, który jest najbardziej wydajny i pozwala skalować rozmiar zdjęcia w dowolnym zakresie bez utraty jakości. Niemniej grafiki SVG są mało dostępne do pobrania (zwłaszcza do bezpłatnego korzystania).
Jak zmniejszyć wielkość zdjęć, by przyspieszyć wczytywanie się witryny?
Szybkie wczytywanie się witryny jest bardzo ważne.
Poprawia User Experience, czyli doświadczenie użytkownika z korzystania ze strony www, a także jest czynnikiem rankingowym, który wpływa na pozycje strony w wynikach wyszukiwania Google.
Optymalizacja zdjęć to jedno z ważniejszych działań, które podejmujemy, żeby przyspieszyć ładowanie się naszej strony www.
Ile powinno ważyć zdjęcie na stronie internetowej?
Przyjmuje się, że obrazy i grafiki na stronie internetowej nie powinny ważyć więcej niż 150kB, natomiast osobiście uważam, że powinniśmy się mieścić w 100kB, jeżeli zdjęcie nie jest szczególnie istotne (szczególne jest np. to, które znajduje się w headerze – na samej górze – strony głównej).
Kompresuj swoje zdjęcia
Najpopularniejszym narzędziem do kompresji grafik jest TinyPNG. Wbrew temu, na co wskazuje nazwa, możemy w nim kompresować również inne formaty, np. JPEG.
Jak skompresować zdjęcie?
- Wejdź na stronę TinyPNG.
- Kliknij w obszar zaznaczony przerywaną linią.
- Wybierz grafiki z komputera (możesz wybrać maksymalnie 20 plików jednocześnie i żadna nie może ważyć więcej niż 5MB).
- Poczekaj, aż program skompresuje Twoje zdjęcia.
- Na koniec kliknij przycisk „download” i gotowe!
Taki zabieg możesz wykonać nawet 3-4 razy z tym samym plikiem. Różnice w jakości nie będą dostrzegane ludzkim okiem, więc niczym nie musisz się przejmować.
Zmniejsz rozdzielczość grafik
Jeżeli publikujesz zdjęcie, które nie jest grafiką na całą stronę, to wystarczy, że będzie miało 72 px rozdzielczości.
Rozdzielczość informuje, ile pikseli mieści się na odcinku jednego cala.
Większe namnożenie pikseli niż 72 na cal jest na stronach zwyczajnie niewidoczne gołym okiem.
W jaki sposób zmniejszyć rozdzielczość?
Niestety nie znalazłem przeglądarkowej wersji takiego narzędzia, które umożliwiałoby szybką i łatwą zmianę rozdzielczości obrazów.
Ja korzystam w tym celu z programu komputerowego Adobe Photoshop. Ze względu na wysoką cenę nie polecam tego narzędzia tym, którzy zajmują się grafiką bardzo rzadko.
Okey chłopie, ale to jak mam zmniejszyć tą rozdzielczość?
Osobiście polecam stronę Easy Resize.
Jak sama nazwa wskazuje, Easy Resize umożliwia łatwe zmniejszanie wielkości i rozdzielczości grafik, które publikujemy na stronie internetowej.
Działa to na podobnej zasadzie jak program TinyPNG:
- Wejdź na stronę Easy Resize.
- Ustaw maksymalną wielkość pliku (np. 100 kB) oraz rozmiar zdjęcia (o rozmiarze jeszcze sobie powiemy).
- Kliknij w pole wydzielone przerywanymi liniami.
- Załaduj pliki ze swojego komputera.
- Poczekaj, aż program zakończy pracę.
- Pobierz zoptymalizowane grafiki i gotowe!
Zaufaj mi, że narzędzie jest bardzo intuicyjne. Albo lepiej – sprawdź je sam!
Rozmiar zdjęcia
Załóżmy, że chcesz dodać zdjęcie na swoją stronę za pomocą CMSa, np. WordPressa. Pobrałeś sobie grafikę o rozmiarach 1980 x 1080 px z portalu Pixabay. Udało Ci się ją skompresować, ale wielkość dalej oscyluje w granicach 500 kB. Wgrywasz zdjęcie do „Biblioteki Mediów” i zamieszczasz je na stronie.
Co można zrobić lepiej?
Bardzo częstym błędem, który popełniamy przy wrzucaniu zdjęć na stronę internetową, jest niedopasowanie wymiarów do realnych potrzeb.
WordPress działa tak, że przycina nasze grafiki według tego, jakie wartości im przypiszemy. Natomiast pomimo naszych ustawień, że zdjęcie ma mieć na stronie rozmiar 300 x 200 px, przy ładowaniu witryny wczytywać się będzie plik o wymiarach 1980 x 1080 px.
Czy już rozumiesz?
Wrzucając na serwer większą rozmiarowo grafikę, a tym samym cięższy plik, nie ma znaczenia, że go później zmniejszysz z poziomu edytora strony. Wczytywać się będzie i tak pełny ciężar wgranego zdjęcia.
Co w takim razie robić?
Wrzucać multimedia w rozmiarach, w jakich będą się realnie wyświetlać na naszej stronie www.
Jak coś ma być jako mały kafelek o wymiarach 100 x 100 px, to zmniejsz wybrane zdjęcie do tego rozmiaru.
Zasada jest taka, że im mniejszy rozmiar zdjęcia, tym mniej ono waży i strona szybciej się wczytuje.
Jak zmniejszyć rozmiar?
Możesz skorzystać z programu, który opisałem we wcześniejszym punkcie dotyczącym rozdzielczości: Easy Resize lub nawet posłużyć się Paintem, który jest dostępny na każdym komputerze.
Optymalizowanie zdjęć na stronie internetowej pod SEO
Jeżeli chcesz, aby Twoja witryna wyświetlała się wysoko w wynikach wyszukiwania, musisz podjąć odpowiednie działania związane z SEO.
Tych działań jest naprawdę sporo. Specjaliści uważają, że czynników wpływających na SEO jest ponad 200. Jednak najważniejsze można określić za pomocą trzech czynności: pozyskiwanie wartościowych linków do strony; optymalizacja techniczna witryny; tworzenie odpowiednich treści pod słowa kluczowe.
Zdjęcia na stronie internetowej dotyczą czynników związanych z dodawaniem contentu oraz optymalizacją techniczną.
Pod spodem wymienię i opiszę szereg rzeczy, o które należy zadbać, aby zoptymalizować zdjęcia na stronie internetowej pod SEO.
Nazwa grafiki
Zadbaj o to, aby nazwa niektórych zdjęć zawierała słowo kluczowe.
W nazwie oddzielaj kolejne słowa znakiem pauzy, średnikiem „–” (roboty Google nie czytają spacji jako przerwy, więc traktują te wyrazy jako jeden). Jeżeli korzystasz z WordPressa, to spokojnie możesz zostawić spacje. System zamieni je automatycznie w myślniki przy wgrywaniu grafiki na serwer.
Nie używaj polskich znaków (chyba, że korzystasz z WordPressa).
Przykład: schronisko-dla-psow-krakow.
Atrybut alt (tekst alternatywny)
Bardzo ważne jest, żeby stale uzupełniać tekst alternatywny grafik, które dodajemy na stronę internetową.
Jeśli masz taką możliwość, zadbaj o to, aby tekst zawierał słowo kluczowe. Ale nie przesadzaj z ich ilością.
Tekst alternatywny powinien dobrze opisywać zdjęcie, to co na nim jest. To dzięki niemu roboty Google wiedzą, co znajduje się na obrazku, który wrzucasz. Zalecana długość plasuje się między 5-15 słowami.
W tekstach alternatywnych należy stosować polskie znaki.
Warto dodać, że tekst alternatywny służy przede wszystkim osobom niewidomym. Pomaga im lepiej poruszać się po stronie. Strony dostępne (czyli dostosowane do standardów WCAG) powinny mieć uzupełniony tekst alternatywny grafik zamieszczonych na stronie.
Dobrze, żeby obraz z atrybutem alt z danym słowem kluczowym był umieszczony blisko tekstu z tym samym słowem kluczowym.
Jeśli sprzedajesz produkty z nr seryjnym, możesz dołączyć go do atrybutu alt. Nie zapomnij również o kategoriach danego produktu, np. męskie buty sportowe nike nr ser. 215623.
Tytuł zdjęcia
Raczej nie wpływa na SEO, więc nie musisz go uzupełniać. Możesz także przekopiować w to pole tekst alternatywny.
Podpis obrazu
Obrazy można również podpisać.
Przypuszcza się, że podpisy jako tako nie wpływają na SEO, ale poprawia nawigację.
Istotne jest również to, że bardzo często odbiorcy czytają podpisy zdjęć. Możesz w nich zawrzeć najważniejsze – z punktu widzenia Twojego biznesu – sformułowania i przemycić słowa kluczowe.
Podsumowanie
Optymalizowanie zdjęć na stronie internetowej to rozległy, ale bardzo ważny temat.
Grafiki mają wpływ na User Experience, pozycjonowanie SEO, a także na sprzedaż i konwersję. Dodatkowo dobrze zoptymalizowane, przyspieszą wczytywanie się strony www.
Do najpopularniejszych źródeł pozyskiwania obrazów należą darmowe banki zdjęć, własne zasoby, a także płatne platformy z plikami multimedialnymi.
Przeczytaj również najnowsze artykuły:
Jak zwiększyć sprzedaż w sklepie internetowym o 60%? [5 psychologicznych wyzwalaczy sprzedaży]
Głównym celem każdego sklepu internetowego jest sprzedaż. Firmy wydają ogromne pieniądze na badania klientów, poprawę user experience czy działania marketingowe. A czasem wystarczy wdrożyć na
Live chat na stronie internetowej – jak zainstalować [tawk.to]
Live chat to wspaniałe narzędzie, które umożliwia użytkownikowi bezpośredni i szybki kontakt z właścicielem strony lub osobą, która zajmuje się obsługą klienta. W tym artykule
Strona internetowa dla restauracji – co powinna zawierać? [poradnik 2021]
W dzisiejszym artykule chciałbym Ci opowiedzieć o tym, co powinna zawierać strona internetowa restauracji. Większość osób szukając informacji odnośnie tego, dokąd pójść na obiad lub
Pingback: TikTok – jak zacząć? Poradnik krok po kroku [aktualizacja 8.11.2021 r.] – Agencja Vidi