Wikipedia wymienia aż 27 formatów plików dla grafik rastrowych i 11 dla wektorowych. To w sumie 38 możliwości, a mówimy tutaj tylko o obrazach. Jeśli jednak nie zajmujesz się projektowaniem stron, to mam dla Ciebie aż 2 dobre wiadomości. Po pierwsze, nie zamierzam zanudzać Cię opowiadaniem o wszystkich możliwościach ani zachęcać Cię do zgłębiania właściwości poszczególnych rozszerzeń. Po drugie, do prowadzenia strony internetowej będziesz potrzebować maksymalnie trzech z wymienionych na Wikipedii rodzajów. Musisz tylko wiedzieć, jakie formaty plików graficznych wybrać.

Z tego tekstu dowiesz się: 

  • czym różni się grafika wektorowa od rastrowej, 
  • jak wybierać formaty w zależności od miejsca obrazu na stronie, 
  • jak zmniejszyć plik graficzny przed wstawieniem do sieci i na co powinieneś uważać. 

Logo, piktogramy, zdjęcia - jakie formaty plików graficznych na stronie internetowej?

Projekt strony internetowej rzadko bazuje na wyłącznie jednym rodzaju obrazów. Najczęściej posługujemy się kombinacją rastrowych zdjęć i wektorowych ikon, aby czerpać jak najwięcej korzyści z konkretnych formatów plików i po prostu uzyskać jak najlepszy efekt. Zacznijmy od odrobiny teorii, czyli omówienia właściwości wspomnianych dwóch typów grafik:

  • Grafiki wektorowe wykorzystują matematyczny zapis kształtów, krzywych i punktów. Dają się dosyć łatwo edytować, są lekkie i doskonale dopasowują się do dowolnego ekranu. Niezależnie od tego, czy obrazek będzie wielki, czy malutki, zawsze uzyskasz najlepszą jakość. Dla potrzeb strony internetowej najbardziej interesować Cię będzie format SVG, do którego wrócimy za chwilę. 
  • Grafiki rastrowe z kolei wykorzystują siatkę pikseli o konkretnych wymiarach i rozdzielczości. To najpopularniejszy rodzaj obrazu stosowany w internecie. Nas interesować będą 2 formaty tego typu: JPG i PNG. 
grafika wektorowa a rastrowa
Różnica między grafiką wektorową i rastrową

Nie będę się tutaj zagłębiać w szczegóły, ale jeśli Ciebie ten temat zainteresuje, koniecznie, sięgnij po artykuł na Grafmagu lub na bloga Zebzy.  

Dostępne formaty plików graficznych - wykorzystaj ich najlepsze cechy

Logo na stronie najlepiej będzie spełniać swoją funkcję, kiedy wstawisz je w formacie wektorowym, czyli wspomnianym już SVGSVG (Scalable Vector Graphics) to format grafiki wektorowej, który jest szeroko stosowany w Internecie. Jest to język oparty na XML, który umożliwia tworzenie grafiki, która może być skalowana do dowolnych rozmiarów bez utraty jakości. SVG jest idealny do tworzenia logotypów, ikon, ilustracji oraz wszelkiego rodzaju grafiki, która musi być wyświetlana na różnych urządzeniach i w różnych rozdzielczościach. Jakie są główne zalety SVG? Skalowalność: SVG można skalować do dowolnych rozmiarów bez utraty jakości,...Czym jest SVG?. To samo tyczy się wszelkich ikonek i piktogramów. Oczywiście, jeśli tylko chcesz, cała strona Twoja strona może pracować na podstawie właśnie takiej grafiki.   

OPINIA EKSPERTA

Obecnie większość klientów kładzie bardzo duży nacisk na prędkość działania ich strony i ocenę w Google Page Speed Index. Korzystając z rastrowych formatów graficznych, zdarza się, że osiągnięcie małej wagi pliku możliwe jest tylko kosztem jego jakości. Problem ten nie dotyczy jednak plików wektorowych, czyli właśnie SVG. Korzystając z nich, jesteśmy w stanie zakodować lekką stronę, która dodatkowo świetnie będzie prezentować się na każdym urządzeniu (niezależnie od gęstości pikseli).

Ola Tulibacka
Ola Tulibacka, OH!Studio

Jak widzisz, formaty wektorowe mają ogromną przewagę nad rastrowymi w kwestii wagi czy jakości. Jednocześnie nie jesteśmy w stanie w nich uzyskać tego samego efektu wizualnego, jak na fotografii. Grafika rastrowa ma się nadal bardzo dobrze, a same pliki po prostu staramy się jak najbardziej „odchudzić”. Interesować nas będą 2 rozszerzenia: JPGJPEG (ang. Joint Photographic Experts Group) to popularny format kompresji obrazu, który jest szeroko stosowany w fotografii cyfrowej i grafice internetowej. JPEG umożliwia znaczną redukcję rozmiaru pliku przy zachowaniu akceptowalnej jakości obrazu, co czyni go idealnym wyborem do przechowywania i przesyłania zdjęć w Internecie. JPEG działa na zasadzie kompresji stratnej, co oznacza, że podczas kompresji pewne informacje o obrazie są tracone. Dzięki temu pliki JPEG mogą być znacznie mniejsze niż pliki...Czym jest JPEG? i PNG. Czym się różnią? 

JPG to bodajże najpopularniejszy format dla grafiki, ale pliki zapisane w ten sposób są dość ciężkie i mają słabszą jakość. Z kolei PNG zapisuje się bezstratnie, jest lżejsze i obsługuje przezroczystość, co można ciekawie wykorzystać w projekcie.

Jeśli na stronie wykorzystywane są grafiki rastrowe, konieczne będzie dostosowanie ich jakości do różnych proporcji i technologii ekranu. W odróżnieniu od wektorowych mogą sprawiać problemy przy skalowaniu, czyli dostosowaniu się do mniejszych i większych ekranów.

Biblioteka grafik w dwóch formatach
Vectorove.com to jedna ze stron, z których bezpłatnie pobierzesz ilustracje w formacie SVG

Waga ma znaczenie - jak skompresować grafiki na stronę

Niezależnie od tego, który wariant wybierzesz, plik trzeba odpowiednio przygotować przed umieszczeniem na serwerze, ponieważ zbyt duże obrazy będą obciążać stronę. Prędkość ładowania strony to jeden z kluczowych parametrów, który może skutecznie zniechęcić użytkownika.

Najczęściej polecane narzędzie do kompresji plików JPG i PNGPNG (Portable Network Graphics) to format plików graficznych, który został stworzony jako następca formatu GIF. PNG jest formatem bezstratnym, co oznacza, że nie traci jakości obrazu podczas kompresji. Jest szeroko stosowany w Internecie ze względu na swoje liczne zalety, w tym wsparcie dla przezroczystości i szeroką gamę kolorów. Kiedy warto używać formatu PNG? Format PNG jest szczególnie przydatny, gdy potrzebujesz obrazów o wysokiej jakości, które zawierają przezroczystość, takich jak logo, ikony...Czym jest PNG? znajdziesz pod adresem TinyPNG. Wystarczy wgrać na stronę pliki graficzne, które chcesz zmniejszyć i pobrać ich znacznie lżejsze kopie. 

Narzędzie do zmniejszania różnych formatów plików graficznych
Strona tinypng.com umożliwia zmniejszenie wagi plików graficznych

Pliki wektorowe również możesz optymalizować. Dzięki temu pozbędziesz się niepotrzebnych danych (np. o tym, w jakim programie powstał obraz) i dodatkowo zmniejszysz plik. Skorzystaj z narzędzia pod tym adresem.  

Wisienka na torcie - atrybut alt

Niezależnie od tego, jaki format plików wybierzesz, obrazy mogą dodatkowo pomóc w pozycjonowaniu Twojej witryny. Koniecznie zatem uzupełniaj tzw. tekst alternatywny, który wyświetli się zamiast obrazów, jeśli przeglądarka napotka problem ze wczytaniem całej strony. Możesz w tym tekście zawrzeć słowa kluczowe, ale pamiętaj, by przede wszystkim był to opis tego, co znajduje się na obrazie. 

Zamiast zakończenia

Przyznaję, z grafiką na stronie jest trochę zabawy. Dodatkowo, jeśli prowadzisz bloga, musisz pamiętać o zmniejszaniu plików za każdym razem, kiedy wstawiasz nowy wpis z obrazkami. Z jakich rozwiązań korzystasz i czy sprawdzasz wpływ plików na wydajność Twojej strony?

>
Monika Suchodolska
Od blisko 4 lat związana z czasopismem Grafmag. Projektuje, ilustruje i pisze (najczęściej o reklamie). Miłośniczka dobrej kawy, książek i kotów.

Jedna odpowiedź do "Formaty plików graficznych na stronie"

  1. mokced pisze:

    warto jeszcze wspomnieć że po kompresji np jpg można go zamienić na webp – co jeszcze zmniejsza jego rozmiar

Dodaj komentarz

Twój adres e-mail nie będzie opublikowany.

Polecane dla Ciebie

Szukasz dalej?

Przeglądaj wg dat
  • Przeglądaj wg dat
  • luty 2025
  • styczeń 2025
  • grudzień 2024
  • listopad 2024
  • październik 2024
  • wrzesień 2024
  • sierpień 2024
  • lipiec 2024
  • czerwiec 2024
  • maj 2024
  • kwiecień 2024
  • marzec 2024
  • luty 2024
  • styczeń 2024
  • grudzień 2023
  • listopad 2023
  • październik 2023
  • wrzesień 2023
  • sierpień 2023
  • lipiec 2023
  • czerwiec 2023
  • maj 2023
  • kwiecień 2023
  • marzec 2023
  • luty 2023
  • styczeń 2023
  • grudzień 2022
  • listopad 2022
  • październik 2022
  • wrzesień 2022
  • sierpień 2022
  • lipiec 2022
  • czerwiec 2022
  • maj 2022
  • kwiecień 2022
  • marzec 2022
  • luty 2022
  • styczeń 2022
  • grudzień 2021
  • listopad 2021
  • październik 2021
  • wrzesień 2021
  • sierpień 2021
  • lipiec 2021
  • czerwiec 2021
  • maj 2021
  • kwiecień 2021
  • marzec 2021
  • luty 2021
  • styczeń 2021
  • grudzień 2020
  • listopad 2020
  • październik 2020
  • wrzesień 2020
  • sierpień 2020
  • lipiec 2020
  • czerwiec 2020
  • maj 2020
  • kwiecień 2020
  • marzec 2020
  • luty 2020
  • styczeń 2020
  • grudzień 2019
  • listopad 2019
  • październik 2019
  • wrzesień 2019
  • sierpień 2019
  • lipiec 2019
  • czerwiec 2019
  • maj 2019
  • kwiecień 2019
  • marzec 2019
  • styczeń 2019
  • grudzień 2018
  • listopad 2018
  • październik 2018
  • sierpień 2018
  • lipiec 2018
  • maj 2018
  • kwiecień 2018
  • marzec 2018
  • styczeń 2018
  • grudzień 2017
  • październik 2017
  • czerwiec 2017
  • kwiecień 2017
  • marzec 2017
  • luty 2017
  • styczeń 2017
  • grudzień 2016
  • listopad 2016
  • październik 2016
  • wrzesień 2016
  • sierpień 2016
  • lipiec 2016
  • czerwiec 2016
  • maj 2016
  • kwiecień 2016
  • marzec 2016
  • lipiec 2015
  • maj 2015
  • grudzień 2014
  • sierpień 2014
  • lipiec 2014
  • czerwiec 2014
  • kwiecień 2014

Chat online

Cześć!

Zapraszamy do rozmowy, chętnie odpowiemy na Twoje pytania. Jeśli dotyczą one bezpośrednio posiadanych przez Ciebie usług, zalecamy wcześniejsze zalogowanie się do swojego panelu klienta. Dzięki autoryzacji będziemy mogli zaoferować pomoc w szerszym zakresie.

Zachęcamy też do sprawdzenia naszej sekcji wsparcia na https://cyberfolks.pl/pomoc.

Aktualny stan pracy serwerów:

Autoryzacja: nieautoryzowany - Zaloguj się

W związku z przepisami o ochronie danych osobowych informujemy, kto i na jakich zasadach będzie administrować Twoimi danymi: Polityka prywatności cyber_Folks S.A.