Raster czy wektor: co wybrać, gdy grafika ma być naprawdę duża
Skalowanie rastra w górę to zawsze zgadywanie brakujących informacji. Program rozciąga istniejące piksele, a algorytm interpolacji stara się wygładzić przejścia. Przy dwukrotnym powiększeniu da się to jeszcze uratować, przy pięciokrotnym miękkie krawędzie zamieniają się w rozmyte plamy, a cienkie linie i drobny tekst znikają. Typowy błąd polega na tym, że ktoś pobiera mały plik z internetu, wstawia go do projektu wielkoformatowego i dopiero na wydruku widzi pikselozę. Drugi częsty błąd to ratowanie sytuacji filtrami wyostrzającymi — podbijają kontrast krawędzi, ale nie odtwarzają szczegółu, który przepadł.<br>
<br>
<br>
<br>
Flex-shrink działa tylko w osi głównej kontenera. Jeśli ustawisz flex-direction na row, kurczenie dotyczy szerokości; przy column — wysokości. Wartość 0 całkowicie blokuje zmniejszanie. Wartość większa niż 1 sprawia, że element kurczy się szybciej niż sąsiedzi, a ułamki między 0 a 1 pozwalają na łagodniejsze proporcje. Sam flex-shrink nie decyduje jednak o wszystkim — liczy się razem z flex-basis i flex-grow, dlatego pojedyncze ustawienie width bez zmiany tych parametrów często daje efekt inny od oczekiwanego.<br>
<br>
<br>
<br>
Kolejny typowy błąd to wielokrotne zapisywanie tego samego pliku JPEG. Każdy zapis dokłada kolejną warstwę kompresji stratnej i z czasem psuje obraz — pojawiają się rozmycia, plamy i tęczowe obwódki. Jeśli musisz coś poprawić, pracuj na pliku źródłowym w formacie bezstratnym, a dopiero na końcu eksportuj do JPEG. Podobnie rzecz się ma z przezroczystością: nie zapisuj pliku PNG z przezroczystością, a potem nie konwertuj go na JPEG, jeśli ta przezroczystość ma zostać zachowana. Konwersja nieodwracalnie ją usuwa.<br>
<br>
<br>
<br>
Otwierasz stronę i widzisz, że jedno zdanie zajmuje całą szerokość okna, a drugie wciska się w środek akapitu. Za tym zachowaniem stoi jeden mechanizm: sposób, w jaki przeglądarka traktuje element w strukturze dokumentu. Elementy blokowe zaczynają się w nowej linii i domyślnie rozciągają na całą dostępną szerokość. Elementy liniowe płyną w tekście, dzieląc linię z sąsiednimi znakami. Akapit jest blokiem, link jest elementem liniowym — i stąd bierze się różnica, którą widać na ekranie.<br>
<br>
<br>
<br>
Sytuacja odwraca się, gdy liczy się rozmiar pliku i brak przezroczystości. JPEG stosuje kompresję stratną, która potrafi mocno zmniejszyć wagę zdjęcia przy zachowaniu dobrej jakości wizualnej. Dla fotografii, skanów dokumentów czy obrazów z dużą liczbą kolorów i łagodnych przejść tonalnych JPEG wypada korzystniej niż PNG, który przy takich treściach generuje znacznie większe pliki. Wyjątkiem są sytuacje, gdy potrzebna jest bezstratna archiwizacja — wtedy PNG ma sens także dla zdjęć, ale kosztem rozmiaru.<br>
<br>
<br>
<br>
Gdy grafika ma trafić na wielki baner, okładkę albo ścianę, decydujące staje się jedno: czy powiększasz piksele, czy przeliczasz kształty. Obraz rastrowy to siatka pikseli o ustalonej liczbie kolumn i wierszy. Obraz wektorowy to opis matematyczny: krzywe, punkty kontrolne i wypełnienia. Pierwszy ma sens, gdy liczy się fotorealizm. Drugi wygrywa wszędzie tam, gdzie rozmiar docelowy bywa większy niż plik źródłowy.<br>
<br>
<br>
<br>
Najprostsza zasada: fotografia i wszystko, co ma ziarno, zostaje rastrem, ale wymaga zapasu rozdzielczości. Logo, schematy, napisy i płaskie ilustracje idą w wektor. Mieszanie obu typów w jednym pliku jest możliwe, ale wtedy o jakości decyduje słabszy element. Zanim cokolwiek powiększysz, sprawdź na próbnym wydruku fragmentu w docelowej skali — to jedyny test, który pokaże, czy różnica między rastrem a wektorem będzie widoczna na gotowym nośniku.<br>
<br>
<br>
<br>
Przy zapisie PNG zwróć uwagę na typ koloru. Dla grafiki z przezroczystością wybierz tryb RGBA, a nie RGB — inaczej kanał alfa zniknie. Dla prostych ikon w jednym kolorze wystarczy paleta z przezroczystym indeksem, co daje mniejszy plik. Unikaj natomiast zapisywania zdjęć w PNG, jeśli nie masz konkretnego powodu — różnica w rozmiarze bywa kilkukrotna. I pamiętaj, że przezroczystość w PNG działa też jako półprzezroczystość, co bywa przydatne przy cieniach i nakładkach, ale w JPEG nie ma na to miejsca.<br>
<br>
<br>
<br>
Kolejna pułapka: flex-basis: 100% nie zawsze oznacza pełną szerokość widoczną dla użytkownika. Jeśli element ma margin, border albo padding poza box-sizing, wizualnie wyjdzie poza rodzica i pojawi się poziomy pasek przewijania. Bezpieczniej używać flex-basis: 100% razem z box-sizing: border-box i bez marginesów poziomych. Przy zawijaniu (flex-wrap: wrap) elementy z flex-basis: 100% zajmą cały wiersz, a kolejne przejdą do następnej linii — to przydatne do nagłówków sekcji wewnątrz elastycznego układu.<br>
<br>
<br>
<br>
Warto też wiedzieć, że część elementów ma domyślny display narzucony przez przeglądarkę i można go zmienić, ale nie zawsze wypada. Nagłówki, akapity, listy i sekcje są blokowe z założenia. Linki, pogrubienia, kursywa i fragmenty kodu są liniowe. Zmiana tego domyślnego zachowania bywa sensowna przy budowie menu albo przycisków, ale w zwykłym tekście rzadko prowadzi do czegoś dobrego. Zanim ją wprowadzisz, sprawdź, czy problemu nie da się rozwiązać paddingiem, marginesem albo trybem inline-block.