Żadna strona internetowa nie obejdzie się bez grafik. Jeśli prowadzisz własną, to na pewno korzystasz ze zdjęć, ikon, które mają podkreślić walory estetyczne witryny. W ten sposób możesz umilić, a nawet przedłużyć czas spędzony na niej przez odbiorcę. Jeśli prowadzisz własną stronę to interesują cię dwa, maksymalnie trzy formaty graficzne. Jeden wektorowy oraz dwa rastrowe. Aby polepszyć funkcjonowanie strony musisz wiedzieć czym się od siebie różnią i gdzie zastosować odpowiedni format.
W poniższym artykule dowiesz się:
- jakie są różnice między grafiką wektorową a rastrową,
- gdzie i kiedy zastosować odpowiedni format
- jak skompresować (zmniejszyć) plik i co jeszcze pomoże ci w pozycjonowaniu strony.
Grafika wektorowa a rastrowa. Czym się różnią, wady i zalety
Strony internetowe opierają się na dwóch rodzajach obrazów graficznych. Najczęściej korzystamy z rastrowych zdjęć i wektorowych ikon, aby zoptymalizować działanie strony i wykorzystać potencjał grafik. Rodzaje te możemy podzielić na dwie grupy:
Grafika wektorowa zapisana za pomocą figur geometrycznych, linii, łuków i punktów umiejscowionych w układzie współrzędnych. Wszystkie składowe posiadają określony rozmiar i położenie oraz takie atrybuty jak kolor wypełniania i linii, ich grubości itd. Obrazy możemy dowolnie skalować bez utraty jakości, co ma miejsce w przypadku grafiki rastrowej. Obrazy wektorowe do tego mają zdecydowanie mniejszy rozmiar. Ich lekkość odciąży stronę i przyspieszy ładowanie. Zdarza się jednak, że złożone grafiki wektorowe mogą być większe od rastrowych. Przy tworzeniu stron internetowych najczęściej korzystamy z plików z rozszerzeniem SVG.
Grafika rastrowa opiera się na siatce pikseli zwanej bitmapą. Każdy piksel jest niezależny i posiada własny kolor. Ogólnie rzecz mówiąc, czym więcej pikseli tym lepsza jakość, jednak czym jest ich więcej, tym bardziej przekłada się to na większą wagę pliku. Możemy zmniejszyć pliki poddając je kompresji, co powinno być nieodzowną częścią naszej pracy przy stronie internetowej. Podstawowe formaty grafiki rastrowej to format PNG i JPG.
Kiedy posłużyć się danym formatem graficznym?
Logotypy, infografiki, bannery najlepiej spełnią swoją funkcję jeśli będą w formacie wektorowym czyli SVG. Wszystkie pliki znajdujące się na stronie, które mogą ulegać skalowaniu przy zmianie wersji na mobilną czy tablet powinny być wektorowe. Możliwe jest oparcie witryny wyłącznie na grafikach tego rodzaju.
Sytuacja ma się jednak inaczej jeśli chcemy wrzucić zdjęcia lub ilustracje wykonane w programach rastrowych takich jak Photoshop. Obrazy rastrowe lepiej odwzorowują barwy i detale takie jak cieniowanie, gradient. Możemy bez problemu zmienić takie atrybuty jak kontrast, jasność, nasycenie. Prowadząc bloga lub witrynę z własnym portfolio, w dużej mierze będziemy się opierać na tym formacie z podziałem na rozszerzenia JPG i PNG.
Format JPG to najbardziej uniwersalny format. Możemy wybrać poziom kompresji, ale co za tym idzie tracimy na jakości. JPG nie obsługuje przezroczystości co należy mieć na uwadze. Zapisując plik bez tła w tym formacie, program automatycznie doda nam białe tło.
Format PNG posiada bezstratną kompresję i możemy przy nim uzyskać dowolny poziom przezroczystości. Jest to najczęściej wybierany format przy budowaniu stron internetowych. Zdarza się, że plik po kompresji nadal może być za duży. Przy grafikach rastrowych musimy pamiętać o dostosowaniu rozmiaru obrazów do proporcji ekranów. W porównaniu do wektorów, nie skalują się one automatycznie na wybranych urządzeniach.
Jak skompresować pliki, aby przyspieszyć ładowanie strony?
Nieodzowną praktyką przy tworzeniu stron internetowych jest kompresja obrazów. Zaoszczędzimy dzięki temu miejsce na serwerze i odciążymy naszą witrynę, co wpłynie pozytywnie na jej odbiór przez użytkowników.
Kompresję plików JPG i PNG możemy szybko przeprowadzić przez internet. Znajdziesz wiele witryn oferujących takie usługi, najpopularniejszą jest TinyPNG. Wystarczy wybrać plik z serwera lub po prostu przeciągnąć go. Tuż po chwili mamy gotowe, skompresowane pliki do pobrania.
Odpowiednikiem dla kompresji plików SVG jest chociażby vecta.io. Dzięki kompresji wektorowej usuniesz niepotrzebne dane np. O tym, w jakim programie powstał i oczywiście zmniejszysz jego rozmiar.
Kropka nad i – opis alternatywny obrazka
Atrybut alt to znacznik w języku HTML do opisywania zawartości plików graficznych. Dostarcza on wyszukiwarce dokładnych danych o tematyce obrazu, które wyświetlą się gdy przeglądarka napotka problem i nie wczyta strony. Pamiętajmy, że opis alternatywny to nie tylko content dla wyszukiwarek. Jest on na przykład odczytywany przez programy dla niewidomych podczas przeglądania stron internetowych. Jednak możesz zamieścić w nim również słowa kluczowe co przełoży się na SEO całej strony. Grunt, żeby znalazł się tam również faktyczny opis tego co znajduje się na danym zdjęciu.
