O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Rodzaje plików graficznych

Jest wiele rodzajów plików graficznych, niektóre cieszą się większą popularnością niż inne. O jednych można powiedzieć, że są lepszym rozwiązaniem od drugich ale najważniejsze jest chyba aby wybrać taki rodzaj który zagwarantuje nam maksymalny efekt przy minimalnych kosztach. W odniesieniu do plików graficznych efektem jest oczywiście jakość a kosztami rozmiar pliku. Dzisiaj postaram się nieco przybliżyć tematykę różnych rodzajów plików graficznych.

Rodzaje grafiki komputerowej

W najprostszym podziale moglibyśmy wymienić dwa rodzaje grafiki: grafikę rastrową i grafikę wektorową.

W grafice rastrowej obrazy tworzone są z położonych regularnie, obok siebie pikseli. Jest to rodzaj siatki odpowiednio pokolorowanych punktów. Takie grafiki nazywane są mapami bitowymi (lub bitmapami). Po powiększeniu takiej bitmapy widać punkty z których składa się obraz.

Do najpopularniejszych formatów grafiki rastrowej należą .GIF, .JPEG i .PNG

W grafice wektorowej obraz opisany jest za pomocą figur geometrycznych umiejscowionych w matematycznie zdefiniowanym układzie współrzędnych. W tym przypadku obraz jest zbiorem prostych, łuków, krzywych, okręgów, wielokątów itp. W przeciwieństwie do grafiki rastrowej grafika wektorowa jest skalowalna, oznacza to, że obrazy wektorowe można powiększać oraz zmieniać ich proporcje bez uszczerbku na jakości. Grafikę wektorową można bez większego problemu przekształcić w bitmapę podając jedynie docelową rozdzielczość obrazu rastrowego – w drugą stronę nie jest już tak prosto i rzadko kiedy uzyskuje się odpowiednie wyniki.

Wiele programów do tworzenia grafiki ma wewnętrzne formaty zapisu grafiki wektorowej przykładowo: .AI – Adobe Ilustrator, .CDR – Corel Corporation. Obecnie popularność zdobywa promowany przez W3C (jedną z największych organizacji zajmujących się standardami w Internecie) format SVG. Obsługiwany jest on w przeglądarkach: Amaya (której rozwój wspiera W3C), Mozilla Firefox (od wersji 1.5), Konqueror, Opera, (od wersji 8 beta 3). Aby używać SVG w innych przeglądarkach potrzebna jest odpowiednia wtyczka.

Orc - Raster vs Vector comparison, created by Nil Einne. Illustrates the difference between a vector image and a raster image.
Ilustracja będąca własnościa publiczną, umieszczona w repozytorium Wikimedia Commons

Dziś jednak zajmiemy się grafiką rastrową, która cieszy się dużo większą popularnością na stronach internetowych.

JPEG (ang. Joint Photographic Experts Group – Wspólna Grupa Ekspertów Fotografii)

Format JPEG (w zasadzie chodzi o format JFIF który stanowi rozszerzenie wobec standardu JPEG ale posługuje się rozszerzeniem jpeg i jpg więc często jest traktowany jako synonim) najlepiej sprawdza się w przypadku fotografii czy obrazów zawierających więcej niż 256 kolorów. Obrazy zapisywane z rozszerzeniem jpg są kompresowane co oznacza, że pewne informacje o obrazie ulegają stracie i ilustracja traci na jakości (często ta utrata szczegółów jest niezauważalna). Przy dużej kompresji obrazu wyraźnie widać efekt blokowy charakterystyczny dla tego typu kompresji.

Standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych, charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali.

JPEG - jakość maksymalna JPEG - jakość średnia JPEG – kompresja 100%
Ilustracja podstawowa wyraźne zakłócenia i przekłamania w kolorach Widoczne silne "pocięcie" obrazu na kwadraty
jakość maksymalna - przybliżenie 200% jakość średnia - przybliżenie 200% kompresja 100% - przybliżenie 200%

JPEG
jakość maksymalna
4 5024 bajtów (4,39KB)

JPEG
jakość średnia
1 2981 bajtów (1,26KB)

JPEG
kompresja 100%
442 bajtów

GIF (ang. Graphics Interchange Format)

Format pliku graficznego z kompresją bezstratną stworzony w 1987 r. Format GIF wyświetla maksymalnie 256 kolorów (czyli w przypadku zapisywania w tym formacie obrazów stworzonych przy użyciu większej ilości kolorów jak by nie było następuje strata – gif jest więc bezstratny tylko dla prostych obrazów). W plikach z rozszerzeniem .gif można umieszczać przezroczystość, nadają się też do drobnych animacji.

Najlepiej wykorzystywać je w przypadku obrazów o dużej płaszczyźnie tego samego koloru czy też posiadającego ostre krawędzie które powinny być zachowane.

gif przezroczyste tło
brak obsługi kanału alfa
ostre krawędzie
GIF
2 712 bajtów
(2,64KB)
gif - przybliżenie 200%

PNG (ang. Portable Network Graphics)

Rastrowy format plików graficznych oraz system bezstratnej kompresji danych graficznych. Format PNG jest podobny do formatu GIF pod tym względem, że akceptuje przezroczystość i najlepiej sprawdza się w przypadku obrazów o jednolitych kolorach. Przewagą PNG jest obsługiwanie stopniowanej przezroczystości (tzw. kanału alfa). Niestety starsze wersje Microsoft Internet Explorera (MSIE albo jeszcze krócej IE - starsze czyli te przed siódmą) nie obsługują przezroczystości alfa.

Format PNG zalecany jest przez konsorcjum W3C jako najlepszy format grafiki dla sieci WWW.

png stopniowa przezroczystość tła
PNG
6 344 bajtów
(6,19KB)
png - przybliżenie 200%

Wybierając rodzaj pliku graficznego pamiętaj aby tak określić jego parametry aby uzyskać najlepszy kompromis pomiędzy jakością obrazu a wielkością pliku.

 

Źródła i dodatkowe informacje:

sobota, 21 lutego 2009, kate_mac

Społecznościowo


TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: , cvk90.internetdsl.tpnet.pl
2011/02/09 13:25:50
dzieki
-
Gość: , 195.205.238.12*
2012/11/18 11:15:34
nie ogarniam ale dzieiki!!!!!!!!!!!!!!!
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...