Grafiki na stronie internetowej – wszystko co powinieneś wiedzieć

Grafika na strony www pełni ogromną rolę. Wykracza ona poza odbiór strony przez jej użytkowników, którzy większym zaufaniem darzą serwisy, zawierające jakościowe i wiarygodne grafiki. Grafika na stronie internetowej ma także duży wpływ na jej pozycjonowanie. Dlatego wrzucanie zdjęć i obrazów na serwis www powinno być świadome i przemyślane, aby uniknąć błędów obniżających wartość strony przez roboty indeksujące. Dowiedz się, co wziąć pod uwagę przy wrzucaniu obrazów na stronę internetową.

Źródła pozyskiwania grafiki – skąd brać obrazki na stronę?

Na wstępie zacznijmy od pozyskiwania grafik i udzielenia – wydawałoby się – dość oczywistej informacji. Nie możemy dowolnie korzystać z każdej grafiki znalezionej na stronach internetowych bądź w wynikach wyszukiwania, ponieważ są one chronione prawami autorskimi. Choć świadomość praw własności intelektualnej rośnie, to niestety wciąż niewiedza lub niechęć poznania przepisów prowadzą do ich łamania.

Wyobraź sobie, że prowadzisz content marketing i ktoś kopiuje treść, którą tworzysz lub płacisz za nią copywriterowi, a następnie zamieszcza bez pytania na swoim serwisie. Dokładnie tak samo wygląda sprawa grafik. Jeśli koniecznie chcesz wykorzystać na swojej stronie grafikę, którą znajdziesz w sieci, musisz uzyskać zgodę jej autora. Samowolne kopiowanie, modyfikowanie i rozpowszechnienie może mieć nawet konsekwencja prawne.

Skąd brać legalne obrazy?

Jeśli nie jesteś autorem zdjęć czy grafik, ale polegasz na obrazach znalezionych w sieci, musisz sprawdzić, czy obraz posiada licencję Creative Commons (CC). Grafiki z licencją CC bez problemu znajdziesz na darmowych stockach, których w sieci nie brakuje (np. Pexels, Pixabay, Splitshire). Możesz znaleźć je też w wynikach wyszukiwania Google Grafika. W tym celu wybierz Narzędzia, następnie Prawa użytkowania i zaznacz Licencje Creative Commons. Wówczas wyniki przefiltrują się wyłącznie do obrazów z licencją CC.

Rodzaje licencji Creative Commons

Wrzucając zdjęcia i grafiki na strony internetowe, musisz sprawdzić rodzaj licencji CC i dotrzymać warunków użytkowania, jakie stawia dana licencja. Jakie typy licencji CC mogą występować i czego wymagają?

• CC BY – ten rodzaj licencji wymaga podania nazwiska twórcy grafiki, którą umieszczasz na swojej stronie.
• CC NC – grafiki mogą być wykorzystywane wyłącznie w celach niekomercyjnych.
• CC ND – grafiki można wykorzystywać, tj. kopiować i rozpowszechniać wyłącznie w ich oryginalnej postaci, bez modyfikowania.
• CCS SA – grafiki można modyfikować i udostępniać jako utwory zależne, jednakże udostępnianie powinno przebiegać na takiej samej licencji jak w przypadku obrazów oryginalnych.
• CC0 – najkorzystniejszy rodzaj licencji CC, który oznacza w praktyce to, że grafika należy do domeny publicznej i można z niej korzystać w dowolny sposób.

Formaty grafik na stronie – jakie będą odpowiednie?

Grafika na stronie internetowej najczęściej występują w czterech formatach: JPEG, PNG, SVG oraz GIF. Poznaj charakterystykę każdego z nich i zdecyduj, kiedy poszczególne formaty okażą się najkorzystniejszym wyborem.

PNG

PNG jest formatem bitmapowym, odwzorowującym do 16 milionów kolorów i gradientów. Obsługuje kanał alfa, dzięki czemu możliwe jest ustawienie stopnia przejrzystości zdjęcia, edytowanie kolorów oraz lepsze wykończenie krawędzi. PNG umożliwia dokonanie 2-stopniowej bezstratnej kompresji, dzięki czemu skalowanie obrazu nie powoduje utraty jakości.

JPEG

Format JPEG jest jednym z najpopularniejszych formatów grafik zamieszczanych na stronach internetowych. Rozmiar pliku JPEG jest mniejszy niż w przypadku formatu PNG, dzięki czemu grafiki nie spowalniają ładowania strony. Warto mieć na uwadze to, że ten format grafiki komputerowej lepiej sprawdza się w przypadku zdjęć niż tworzonych grafik. JPEG dobrze odzwierciedla nawet 16 milionów kolorów. Jest jednak formatem stratnym, co oznacza, że po kompresji obraz traci na jakości, a jego kopiowania, powiększanie czy przybliżanie będzie wyraźnie odbijać się na jakości widocznego na witrynie obrazu.

SVG

SVG jest formatem, z którego chętnie korzystają webmasterzy, ponieważ obsługiwany jest przez przeglądarki formatem wektorowym. Format SVG daje możliwość wyrazistego odwzorowania krawędzi elementów. Obrazy zapisane w formacie SVG można skalować. Grafika na stronie zapisana w SVG będzie wyglądać dobrze w różnych rozdzielczościach i rozmiarach, jednakże grafiki zawierające zbyt dużo szczegółów mogą prezentować się nie najlepiej przy pomniejszeniu. SVG to format o dużej zawartości kodu, jego zaletą jest natomiast posiadania profilu przeznaczonego na urządzenia mobilne.

Zobacz też: Responsywna strona internetowa – co to znaczy?

GIF

Spośród omówionych formatów plików graficznych GIF jest najstarszym, ale wciąż często wykorzystywanym. Do poszczególnych pikseli przypisanych jest 256 kolorów, co pozwala mocno skompresować pliki. Jednakże większa niż 256 liczba przypisanych kolorów może stwarzać trudności z odwzorowaniem. Format GIF pozwala uzyskać pełną barwę lub całkowitą przezroczystość obrazu, dzięki temu można osiągnąć poklatkową animację obrazu. W tym formacie często występują funkcyjne elementy strony, np. przyciski, loga, ikony.

Kompresja grafik – dlaczego jest ważna?

Wielkość grafik na stronie internetowej wpływa na czas ładowania strony. Ten z kolei wpływa zarówno bezpośrednio, jak i pośrednio na pozycjonowanie SEO. Roboty indeksujące biorą pod uwagę czas ładowania strony jako czynniki rankingowy, natomiast użytkownicy serwisów www porzucają zbyt długo ładujące się strony, zwiększając tym samym współczynnik odrzuceń, również brany pod uwagę przez algorytmy.

Kompresja obrazów pozwala zmniejszyć ich wielkość i wagę pliku, co przełoży się na szybszy czas ładowania. Przyjmuje się, że grafiki na strony internetowe powinny zajmować około 100 KB. Jest to oczywiście wartość płynna, która zależy m.in. od wielkości obrazu i formatu pliku. Niemniej konwersja obrazów na stronę na pewno przyczyni się do polepszenia SEO strony i nie może być obszarem ignorowanym.

Uzupełnij tekst alternatywny grafik (atrybut alt)

Atrybut alt, znany też jako tekst alternatywny, jest elementem grafiki, pływającym na SEO. Grafika na stronie internetowej powinna zawierać niewidoczny dla użytkowników opis, który pozwala umieścić w nim słowa kluczowe, dzięki czemu strona może być wyświetlana również w wynikach wyszukiwania grafiki. Atrybuty alt obrazków są wskazówką dla robotów indeksujących, które nie potrafią rozpoznać tego, co znajduje się na grafice, jednak opis pozwala im prawidłowo skojarzyć grafikę z zapytaniem wpisywanym przez internautę w wyszukiwarkę.

Zobacz też: Ile kosztuje pozycjonowanie strony internetowej? Optymalizacja SEO

Jak stworzyć opisy do atrybutów alt? Nie używaj w nich polskich znaków ani dużych liter. Poszczególne słowa korzystnie jest rozdzielać myślnikami. Prawidłowy atrybut alt obrazka powinien zatem wyglądać np. tak: pasek-skorzany-meski-czarny-skora-naturalna.

Grafika na strony www – nie lekceważ mocy obrazów

Kompleksowe działania SEO nie mogą obejść się bez optymalizacji grafik na stronie. Jeśli zatem podejmujesz współpracę z wybraną agencją, zapytaj o to, czy pozycjonowanie będzie obejmowało także ten obszar. W Agencji SEO KWISS doceniamy siłę grafiki w dzisiejszym Internecie, dlatego dokładnie dbamy o jakość, wielkość i zawartość zdjęć i obrazów na stronach naszych Klientów.

Zobacz też inne wpisy na blogu SEO Agencji Kwiss