Grafiki do Internetu – o czym musisz pamiętać?

Mówiąc „grafika w sieci”, mamy zazwyczaj na myśli zdjęcia i ilustracje zdobiące daną witrynę internetową. Zasadniczo jest to prawda, jednak… nie cała. Dlaczego? Otóż grafika to także design strony, ikonki, przyciski i inne elementy wizualne – zarówno interaktywne, jak i statyczne. Ponadto dzieli się ona na wektorową i rastrową. Dla osoby prowadzącej lub tworzącej witrynę ważne jest także to, aby grafika wspierała SEO i była legalna.

Jak widać, nie jest to sprawa prosta, dlatego przyjrzymy się wszystkim aspektom związanym z umieszczeniem grafik na witrynie, wyjaśniając ich znaczenie oraz wpływ na wyświetlanie strony w wynikach wyszukiwania.

Grafika rastrowa a wektorowa – czym się różnią?

Grafika rastrowa i grafika wektorowa to dwa podstawowe rodzaje plików graficznych. Choć ludzkie oko nie dostrzega pomiędzy nimi różnicy, jest ona kolosalna dla komputerów oraz innych układów elektronicznych. Mają one także odmienne możliwości zastosowania, przez co dedykowane są innym zadaniom. Przyjrzymy się z osobna każdemu z nich.

Grafika rastrowa – co musisz o niej wiedzieć?

Grafika rastrowa to obraz budowany z pikseli rozmieszczonych na siatce. A siatkę tę stanowi matematyczny układ współrzędnych. Rozwiązanie to ma swoje zalety i wady. Zalety – ponieważ grafikę rastrową można pomniejszać bez utraty jakości obrazu, jednak nie działa to w drugą stronę – im bardziej powiększamy grafikę rastrową, tym bardziej jej jakość będzie gorsza. Grafiki rastrowe używają dwóch palet kolorystycznych – CMYK i RGB.

CMYK to cztery podstawowe kolory: cyjan, czerń, żółć oraz magneta. W RGB wykorzystywane są trzy: zielony, niebieski oraz czerwony. W obydwu przypadkach zastosowana paleta pozwala na osiągnięcie estetycznych, miłych dla oka odcieni oraz barw wraz z zachowaniem ich naturalnej głębi oraz jasności. Przekłada się to także na ogólny kontrast obrazu. Jednak w zamian za to pliki grafiki rastrowej cechują się dość pokaźnymi rozmiarami – sięgającymi nawet kilkudziesięciu MB.

Pliki rastrowe to najczęściej takie formaty jak .bmp, .jpg, .jpeg, .tif, .tiff, .png, .gif, .ico, .cmx, a także pliki .pdf z możliwością edycji.

Grafika wektorowa – co musisz o niej wiedzieć?

Grafika wektorowa – zwana także „grafiką obiektową” – to niejako zaawansowana forma grafiki wektorowej. Tutaj nie mamy zwykłego ułożenia punktów na siatce, a zamiast tego każdy kształt jest definiowany poprzez szereg krzywych, linii oraz wieloboków. Umożliwia to dowolną zmianę rozmiarów obrazu bez pogorszenia jego jakości, gdyż w pliku wektorowym zapisywane są informacje o parametrach każdego z pikseli składających się na całość – od odcienia barwy po grubość. Co istotne – informacje te zapisane są w sposób mocno skompresowany, dzięki czemu plik rastrowy cechują niewielkie rozmiary.

Grafika wektorowa używana jest wszędzie tam, gdzie potrzebna jest wysoka jakość materiałów graficznych. A więc będzie doskonale nadawać się do logotypów, infografik, ilustracji, zdjęć wysokiej jakości, a także animacji złożonych z kilku-, kilkunastu grafik. Należy jednak pamiętać o tym, że do wyświetlania niektórych formatów niezbędne jest specjalne oprogramowanie.

Pliki wektorowe to najczęściej takie formaty jak: .swf, .svg, .pdf z możliwością edycji, .cdt, .ai, .eps, .ccx czy .cdt.

Grafika rastrowa a wektorowa – kiedy którą stosować?

Skoro poznaliśmy już podstawowe różnice techniczne pomiędzy grafikami rastrowymi a wektorowymi, czas na przyjrzenie się, w jakich zastosowaniach praktycznych będzie się sprawdzać każda z nich. Jak nietrudno domyślić się na podstawie tego, co napisano wcześniej, pliki wektorowe świetnie nadadzą się do statycznych elementów strony, np. logotypów, elementów interfejsu itp. Dzięki niewielkiej wielkości sam „fundament” witryny nie będzie zajmować dużo miejsca na serwerze, a urządzenia końcowe będą go szybko wczytywać.

Pliki rastrowe zarezerwujmy na to, co chcemy pokazać odwiedzającym – czyli np. zdjęcia produktów, galerię obrazów, różnego rodzaje informacje wizualne. Pamiętaj jednak o tym, że wielkość ma znaczenie – co dotyczy zwłaszcza użytkowników mobilnych z limitowanym transferem danych, ale nie tylko. Im więcej na jednej stronie znajdzie się grafik o dużych gabarytach, tym wolniej witryna będzie się otwierać. Może mieć to również negatywny wpływ na jej responsywność.

Porównanie grafiki rastrowej i wektorowej.

Optymalizacja grafik na stronę internetową

Tu dochodzimy do kolejnego zagadnienia, którym jest optymalizacja grafik do Internetu. Ma ona niebagatelny wpływ na działanie strony – zaczynając od wspomnianej responsywności i szybkości ładowania, kończąc na odnajdywanie strony przez wyszukiwarkę Google i inne silniki. Zacznijmy najpierw od samych rozmiarów grafiki.

Jak uczulaliśmy wcześniej, im większa wielkość grafiki, tym wolniejsze jej ładowanie. Z drugiej jednak strony wielkość w kilo- i megabajtach przekłada się na jakość obrazu. Jak zatem zachować wysoką jakość przy rozsądnej wielkości? Rozwiązaniem jest kompresja grafiki. Może być ona bezstratna lub stratna – w tym drugim przypadku im większa kompresja, tym gorsza jakość obrazu.

Formatem godnym polecenia jest bez wątpienia .webp. Jest to format kompresji grafik stworzony i rozwijany od 2010 roku przez Google. Walczy on o prym dominacji w Internecie z .jpeg, a co umożliwia? Zapisując dowolną grafikę jako .webp, zachowuje się jakość, zyskując nawet kilkadziesiąt procent mniejsze rozmiary pliku. Na przykład plik graficzny w formacie .jpg o wielkość 1 MB może po zapisaniu jako .webp mieć 730 kB. A teraz policz sobie, ile miejsca na serwerze zaoszczędzisz, jeśli masz na swojej witrynie 50 zdjęć?

Ale poza formatem ważny jest także rozmiar grafik. Aby strona była w pełni responsywna, muszą zostać uwzględnieni zarówno użytkownicy desktopowi, jak i mobilni. Dlatego konieczne jest dołączenie do atrybutu grafiki img atrybutu srcset w kilku wariantach – od 320 x 320 po 3200 x 3200 px. Dzięki temu zyskasz podwójnie – użytkownik otrzyma obraz dopasowany do swojego wyświetlacza, a strona wczyta mu się w optymalnym czasie.

Dobrym rozwiązaniem jest umieszczanie na głównej stronie miniatury lub mniejszej wersji obrazu (strona wczytuje się szybko), a pokazywanie pełnej wersji grafiki po kliknięciu na niego (ładowana jest tylko na życzenie użytkownika).

Pliki graficzne a SEO

Zapamiętaj, że nazwa pliku graficznego ma duże znaczenie. Dlatego nie wrzucaj plików o nazwach np. „zdjęcie_01”, ale podpisuj je stosownie do tego, co mają pokazywać. Ponadto wpisuj słowo kluczowe dla danej grafiki w atrybucie alt. Przykładowo – prowadzisz stronę, na której sprzedajesz buty sportowe Nike. Umieszczasz zdjęcie pary z linii Venture Runner. Zarówno podpis zdjęcia powinien brzmieć buty Nike Venture Runner, jak i te same słowa powinny znaleźć się w atrybucie alt.

Co istotne – w atrybucie alt nie używaj polskich znaków diakrytycznych oraz dużych liter. Są one gorzej traktowane przez Google. Dobrą metoda jest także rozdzielanie słów w podpisie myślnikami, czyli we wspomnianym przykładzie prawidłowy podpis w atrybucie alt powinien wyglądać następująco: buty-nike-venture-runner.

Umieszczenie prawidłowych podpisów w obu wspomnianych miejscach sprawi, że wypatrzą je roboty Google i zaindeksują – co wpłynie pozytywnie na pozycjonowanie Twojej witryny. Roboty nie mają oczu – nie widzą, co jest na zdjęciu. Mówi im to właśnie atrybut alt. Ponadto takie działanie pozwoli na wyświetlanie Twojego zdjęcie w graficznych wynikach wyszukiwania Google.

Pamiętaj, że nieładnie korzystać z cudzych zdjęć bez pytania

Na końcu dochodzimy do ostatniego ważnego aspektu, a mianowicie legalności grafik. Jeśli np. prowadzisz blog i korzystasz na stronie wyłącznie ze swoich grafik, żaden problem. Pamiętaj tylko, aby podpisać je swoim imieniem i nazwiskiem, np. Widok Tatr, foto: Jan Kowalski. Dzięki temu oznaczysz swoje prawo autorskie, a jeśli ktoś wykorzysta zdjęcie bez twojej pisemnej zgody, możesz pociągnąć go do odpowiedzialności prawnej.

A co, jeżeli wykorzystasz grafiki znalezione w Internecie? Tu sytuacja jest bardziej skomplikowana, a opisujemy ją w osobnym artykule – zobacz. Zebrano w nim wszelkie informacje na temat.

Optymalizacja grafik zawsze się opłaci!

Optymalizacja grafiki pod kątem strony internetowej to korzyść zarówno dla jej właściciela, jak i użytkownika. Dlatego warto poświęcić nieco czasu na sprawdzenie, jak wyglądają grafiki obecnie znajdujące na witrynie oraz mieć w pamięci odpowiednie zabiegi przy dodawaniu nowych.