Dzisiaj jest sobota, 16 grudnia 2017
Pobierz Alib CyMeS 7.0 za frikoJAKIE błędy popełniamy w Corelu?Dlaczego jesteś głupi, chory i biedny?
Jaki format pliku graficznego wybrać?

Jaki format pliku graficznego wybrać?

poniedziałek, 2016-01-182036tutoriale, Adobe, Corel Draw

Od początku historii komputerów powstało bardzo wiele formatów zapisu grafiki (wystarczy zobaczyć, ile rozpoznają popularne przeglądarki graficzne np. ACDSee czy IrfanView). Niektóre z nich zakorzeniły się na dobre, inne zostały skazane na zapomnienie czy to z powodu dublowania możliwości czy też z powodu ich braku.

Obecnie liczy się w zasadzie kilkanaście formatów rastrowych i wektorowych, na tyle uniwersalnych, że większość oprogramowania bez problemu je obsługuje. Chociaż każdy z nich ma swój własny format, to w zasadzie standardem stały się tylko te od firmy Adobe: AI, PSD, PDF.

Pewnie większość z Was wie, czym się różni grafika rastrowa od wektorowej, ale dla tych, którzy dopiero zaczynają przygodę z grafiką, kilka słów wyjaśnienia:

Grafika rastrowa, inaczej bitmapa, jest zbiorem punktów ułożonych obok siebie (pikseli), dokładnie tak samo jak piksele w telewizorze czy matrycy aparatu fotograficznego. Bitmapami są zdjęcia i inne skomplikowane rysunki malowane cyfrowo.

Grafika wektorowa, jak sama nazwa wskazuje, składa się z matematycznie opisanych figur. Oczywiście nie są to proste odcinki (wektory, jakie znamy z matematyki), mogą to być także tzw. krzywe Beziera o dosyć skomplikowanych kształtach. Mogą mieć wypełnienie, także gradientowe, generalnie wszystko to, co da się opisać jakimś algorytmem. Wektorowe są fonty, wiele ikon i loga (zaraz się ktoś czepi, że „logo” się nie odmienia).

Formaty wektorowe

Do niedawna w internecie rzadko używane, obecnie niemal każda przeglądarka radzi sobie z SVG. Za to do druku jest to podstawa - loga, ikony, tekst, ogólnie elementy graficzne które można bezstratnie pomniejszać i powiększać. Wektorowo maluje się raczej trudno, ale są zapaleńcy, którzy robią naprawdę genialne rzeczy. Tylko po co?

  • AI - natywny format Adobe Illustratora. Chociaż daje się go otworzyć w programach innych producentów (dotyczy to raczej starszych wersji), to najlepiej używać go tylko w programach od Adobe (np. Photoshop czy InDesign). Inaczej należy się liczyć z utratą pewnych informacji.
  • CDR - plik programu Corel Draw. Jest to w zasadzie odpowiednik AI w programach Corela, dlatego otworzenie go w Illustratorze także jest ryzykowne.
  • EPS (Encapsulated PostScript) - nieco bardziej uniwersalny format oparty na języku PostScript, chociaż również opracowany przez firmę Adobe. Służy raczej do przenoszenia grafiki między różnymi programami (np. między CorelemIllustratorem). Podczas projektowania lepiej trzymać się formatu danego programu, a do druku oddawać PDF-y.
  • PDF (Portable Document Format) - jest to uniwersalny, przenośny format dokumentów. Gwarantuje, że na każdym komputerze i w każdym czytniku będzie wyświetlony tak samo. Nie mówiąc już o drukarniach, gdzie PDF jest często jedynym formatem, jakie akceptują. Wyjątkiem tutaj jest Corel Draw (przynajmniej starsze wersje, najnowszych nie znam), który potrafi rozsypać plik PDF i narobić tym niezłego zamieszania. Ale jak ktoś wie, na co uważać, to da sobie radę.
    JAKIE błędy popełniamy w Corelu?
    Corelowe świecenie
  • SVG (Scalable Vector Graphics) - został stworzony już ponad 10 lat temu z myślą o zastosowaniu na stronach www, jednak do niedawna nie wszystkie przeglądarki go interpretowały, więc elementy wektorowe albo zamieniało się na rastrowe (GIF) lub flash (SWF). Obecnie nie ma już z nim problemu, w końcu więc można go używać bez obaw. Poprawnie radzi sobie z nim większość programów, ja go stosuję do przenoszenia grafiki z Illustratora do Blendera 3D. Tak naprawdę to nie jest stricte grafika tylko specyficzną odmianą formatu XML a co za tym idzie istnieje niebezpieczeństwo ataków hackerskich specjalnie spreparowanym plikiem.
  • SWF to w zasadzie animacja Flash, ale często wykorzystywana (a czasem nadużywana) do wyświetlania statycznych grafik (ze względu na wcześniejsze problemy z SVG). Stosowana też była do różnych wykresów i prostych grafik (także animowanych), bo była dużo lżejsza od analogicznego GIF-a. Oczywiście SWF można dowolnie animować a także oprogramować przy pomocy wbudowanego języka ActionScript. W internecie odchodzi się już od SWF, głównie ze względu na brak obsługi Flasha na urządzeniach mobilnychproblemów z responsywnością. W świecie poza internetem na wciąż sporo zastosowań np. interaktywne prezentacje czy filmy animowane.
  • WMF (Windows Metafile Format) - format graficzny stosowany w systemach Windows, najczęściej w programach pakietu Office. Jest to dosyć stary format z wieloma brakami (np. nie ma krzywych i wszelkie łuki zamieniane są na szereg odcinków, do często powoduje zniekształcenie obrazu, zwłaszcza małego).

Formaty rastrowe

W zasadzie każdy z popularnych formatów ma inne możliwości i lepiej nadaje się do przechowywania innego typu danych. Ma to zwłaszcza znaczenie w przypadku internetu, gdzie istotna jest waga pliku i jej stosunek do jakości wyświetlanej grafiki. Serwisy internetowe coraz częściej przeglądane są na urządzeniach mobilnych, gdzie płaci się za czas połączenia lub ilość pobranych danych.

  • PSD (Photoshop Document) - to natywny format Photoshopa (jego nowsza odmiana PSB może przechować powyżej 2GB danych). Można w nich zapisać wszystko co da się zrobić w Photoshopie.
  • TIF, TIFF (Tagged Image File Format) - jest to format kompresowany bezstratnie, często więc używany jako plik produkcyjny do druku, zwłaszcza wielkoformatowego. Obsługuje RGB, CMYK, przechowuje ścieżki i kanały alpha. Można w nim zapisywać warstwy, jednak nie każdy program sobie z tym poradzi, dlatego roboczo lepiej trzymać się PSD.
  • JPG, JPEG (Joint Photographic Experts Group) - jeden z najpopularniejszych formatów wykorzystywanych w internecie i nie tylko. Idealny do zdjęć. Za to jego kompresja, chociaż bardzo dobra, jest zawsze stratna. Oznacza to, że po otworzeniu pliku NIGDY nie otrzymamy tego, co było zapisaliśmy. W zależności od stopnia kompresji wokół ostrych krawędzi pojawią się mniejsze lub większe artefakty. Także gładkie jednokolorowe tło nigdy nie będzie naprawdę jednolite. Używany jako plik wejściowy ze względu na bardzo wysoką kompresję (z aparatu lub pobierany ze Stocków) i wyłącznie jako wyjściowy (do druku lub internetu). Nie da się w nim zapisać warstw, ale ścieżki wektorowe czy przestrzeń CMYK jak najbardziej. Jeśli grafika ma mało kolorów (np. prosty rysunek) warto rozważyć zapis do GIF lub PNG. Najlepiej podczas eksportu sprawdzić, co będzie ważyło najmniej.
  • GIF (Graphics Interchange Format) - używany głównie do prostych grafik np. ikonek o ograniczonej ilości kolorów (do 256) oraz prostych i krótkich animacji (przy większej ilości klatek ciężar pliku drastycznie rośnie - wtedy lepiej użyć Flasha). Jeden kolor z palety można przeznaczyć na przezroczystość, jednak przy bardziej skomplikowanych kształtach może się pojawić efekt aureoli, zwłaszcza gdy oryginalne tło było inne niż docelowe (poniżej przykład grafiki przeznaczonej na czarne tło).
  • PNG (Portable Network Graphics) - jako format nieobarczony patentami już dawno miał się stać następcą GIF-a, jednak nigdy jeszcze nie spotkałem się z przypadkiem, żeby ktoś zamknął stronę internetową za używanie GIF-ów. Posiada prawdziwy kanał alfa z 256 poziomami przezroczystości. Do niedawna PNG nie był zbyt popularny (zwłaszcza w przypadku grafik z przezroczystością) ze względu na to, że Internet Explorer nie najlepiej sobie z tym radził. Obecnie nie ma już tego problemu, często jest więc stosowany do elementów layoutu lub ikonek.
  • BMP - używany w zasadzie tylko w systemach Windowsa i nie nadaje się raczej do niczego. Wielki i niezgrabny :)

JPG max quality, 227kB JPG min quality, 35kB (widać artefakty kompresji) GIF 256 kolorów, 361kB (zdjęcie prawie idealne) GIF 16 kolorów, 128kB (widać dihtering)

przezroczystość GIF-a przygotowanego na czarne tło, 15kB (widać aureolę) przezroczystość PNG, 20kB
Kliknij powyższe grafiki, żeby w pełni zobaczyć opisywane efekty.

Jak wykorzystać znajomość formatów?

Przedstawię kilka porad z własnego, wieloletniego doświadczenia. Mogą się przydać.

  • Dla JPG optymalny stosunek jakości do ciężaru pliku jest dla Quality około 70%.
  • Podczas eksportu do GIF-a zmniejszaj ilość kolorów tak długo, dopóki grafika wciąż jest czytelna. W niektórych przypadkach (grafiki o małym kontraście) można bez problemu zmniejszyć ich ilość z 256 do 64 bez widocznej utraty jakości za to z dużym zyskiem na wielkości plików. Brakujące kolory zostaną zastąpione przy pomocy tzw. dihteringu czyli sztucznym zaszumieniu.
  • Rozważ użycie plików SVG, oczywiście przy założeniu, że odbiorcy strony będą korzystać z nowych przeglądarek (odpada więc w przypadku korporacji, które są przyzwyczajone do starszych wersji Internet Explorera).
  • Jeśli tworzysz ikonki na przyciski, nie zapisuj całej grafiki, tylko samą ikonkę jako PNG a tło zrób przy pomocy CSS. Dzięki temu łatwo zmienić kolorystykę serwisu bez ponownego generowanie grafik.
  • Półprzezroczyste tła świetnie się robi w CSS3 (chociaż i tu IE w niektórych przypadkach potrafi sprawiać problemy). Wtedy można użyć 1-piskelowej grafiki PNG z odpowiednio ostawionym kanałem alpha. Taki plik możesz przekonwertować do Base64 i umieścić bezpośrednio w pliku CSS.
  • Do druku Banera możesz oddać TIFF lub JPG z minimalną kompresją. Różnice w druku niezauważalne za to w wielkości plików znaczne.
  • Do druku zwykłych materiałów poligraficznych ZAWSZE przygotowuj PDF. Co prawda drukarz Cię nie zabije za JPG (kasa jest kasa - klient płaci, klient wymaga). Ale też nie ręczy za efekt finalny. Możesz się bardzo zdziwić tym, co otrzymasz.

Na koniec kilka ciekawostek dla śmiechu i nie tylko

  • Dawno temu jeden z moich byłych klientów zapragnął mieć w nagłówku nieco animacji i z powodu oszczędności postanowił zrobić to samemu. Flash był jeszcze na porządku dziennym, ale on wybrał GIF-a (pewnie ze względu na brak oprogramowania). Dzięki temu sam prosty nagłówek ważył prawie 10MB. Cóż, nie zazdroszczę jego klientom, zwłaszcza tym, którzy płacili krocie za połączenie modemowe.
  • Sytuacja z pewnością doświadczona przez wielu z nas. Prosimy klienta o logo i dostajemy marnego JPG-a ściągniętego ze strony. Prosimy więc o format wektorowy i... otrzymujemy plik CDR z osadzonym powyższym JPG-iem. Zdarza mi się to średnio raz w miesiącu mimo iż dokładnie opisuję o co mi chodzi i dlaczego bitmapa osadzona w Illustratorze nie staje się automatycznie wektorowa :)
  • Dla odmiany dostałem kiedyś logo w całości zaprojektowane w Wordzie. I nie był to jakiś osadzony WMF czy bitmapa tylko precyzyjnie wycyzelowana robótka z użyciem WordArtów, fontów, które posiadał tylko klient i oczojebnych kolorów, których nawet Word nie wydrukuje. Coś takiego potrafi się posypać na innym komputerze z inną wersją Worda, nie mówiąc już o LibreOffice.
  • Za to kiedy potrzebuję zwykłego zdjęcia, to bardzo często plik JPG dostaję w dokumentach Office-a. Nie dość, że Klient traci czas na wciągnięcie tego do dokumentu, to ja potem muszę to wyciągać. Na szczęście formaty DOCX pozwalają to zrobić w miarę szybko :)
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na