Czym jest rozdzielczość obrazu: piksele, PPI i DPI bez tajemnic

Zamieszanie wokół rozdzielczości jest powszechne i całkiem zrozumiałe. Tego samego słowa używa się do opisania różnych rzeczy: aparat mówi o megapikselach, Photoshop o PPI, drukarnia żąda 300 DPI, a Google zaleca, żeby grafiki miały „rozdzielczość wystarczającą dla ekranów Retina”. Wygląda to tak, jakby każdy program i każdy specjalista mówił innym językiem.

Ten artykuł układa każde z tych pojęć na właściwym miejscu: pokazuje, jak się ze sobą łączą i co naprawdę ma znaczenie w konkretnej sytuacji.

Czym jest piksel

Piksel to skrót od picture element , czyli „elementu obrazu”. To najmniejsza cząstka rastrowego obrazu cyfrowego: pojedynczy, niepodzielny punkt koloru.

Obraz cyfrowy to prostokątna siatka pikseli. Każdy piksel przechowuje wartość koloru, zwykle zapisaną w trzech kanałach: czerwonym (R), zielonym (G) i niebieskim (B), z których każdy ma 256 możliwych poziomów (od 0 do 255). Daje to 256³ = 16,7 miliona kolorów na piksel w 8-bitowym modelu RGB.

Piksel jest jednostką abstrakcyjną — sam z siebie nie ma rozmiaru fizycznego. Nie jest ani duży, ani mały: to po prostu wartość koloru w siatce. Ile miejsca zajmie w świecie rzeczywistym, zależy wyłącznie od tego, na czym go wyświetlisz albo wydrukujesz.

Na tym rozróżnieniu opiera się całe zamieszanie wokół rozdzielczości: piksele istnieją w przestrzeni abstrakcyjnej, bez wymiarów fizycznych. Mówiąc o rozdzielczości, zawsze mówimy o tym, jak te abstrakcyjne piksele przekładają się na przestrzeń fizyczną — ekranu albo papieru.

Czym jest rozdzielczość obrazu

„Rozdzielczość” ma dwa różne znaczenia, które nagminnie się myli:

• Rozdzielczość jako łączne wymiary w pikselach: „ten obraz ma rozdzielczość 3840 × 2160 pikseli”. Tutaj rozdzielczość opisuje po prostu liczbę pikseli w poziomie i w pionie. Obraz „wysokiej rozdzielczości” w tym sensie ma dużo pikseli — więcej detali i większy zapas na powiększenie czy duży wydruk.
• Rozdzielczość jako gęstość: „ten obraz ma 300 DPI”. Tutaj rozdzielczość mówi, ile pikseli (albo kropek) mieści się na jednostce długości. To pomost między przestrzenią cyfrową (piksele) a fizyczną (centymetry, cale).

To pierwsze znaczenie — łączne wymiary w pikselach — decyduje o jakości i „wielkości” obrazu cyfrowego. Drugie, czyli gęstość, nabiera sensu dopiero wtedy, gdy obraz trzeba przełożyć na format fizyczny, na przykład w druku.

Czym jest PPI — Pixels Per Inch

PPI oznacza piksele na cal (pixels per inch). To miara gęstości pikseli na ekranie lub w obrazie cyfrowym. Mówi, ile pikseli przypada na każdy cal długości.

24-calowy monitor Full HD ma rozdzielczość 1920 × 1080 pikseli, a jego ekran mierzy około 21,5 cala szerokości. Czyli: 1920 ÷ 21,5 ≈ 89 PPI. Na każdy cal ekranu przypada 89 pikseli.

iPhone 15 Pro ma 6,1-calowy ekran o rozdzielczości 2556 × 1179 pikseli i szerokości 2,82 cala. Czyli: 2556 ÷ 2,82 ≈ 460 PPI — ponad pięć razy gęściej niż na zwykłym monitorze.

PPI ekranu przekłada się na ostrość: im wyższe, tym mniejsze pojedyncze piksele, trudniejsze do wychwycenia gołym okiem i tym ostrzejszy wydaje się obraz. Apple nazwało swoje ekrany „Retina” właśnie dlatego, że przy typowej odległości patrzenia ludzkie oko nie rozróżnia pojedynczych pikseli powyżej 300 PPI.

Czym jest DPI — Dots Per Inch

DPI oznacza punkty na cal (dots per inch). Pierwotnie termin ten opisuje gęstość kropek atramentu nanoszonych przez drukarkę. Drukarka pracująca w 600 DPI kładzie 600 kropek na każdy cal długości papieru.

W codziennym języku grafików DPI i PPI funkcjonują jako synonimy określające gęstość pikseli pliku przeznaczonego do druku. Gdy drukarnia prosi o „plik w 300 DPI”, chodzi jej o to, żeby obraz miał 300 pikseli na każdy cal docelowego formatu wydruku.

Jak piksele, PPI/DPI i format fizyczny łączą się ze sobą

Wszystko wyjaśnia jedno równanie:

Format fizyczny (w calach) = łączna liczba pikseli ÷ gęstość (DPI lub PPI)

Przykłady dla jednego obrazu o szerokości 3000 pikseli:

Zwróć uwagę, że sam obraz się nie zmienia — te 3000 pikseli jest identyczne w każdym wierszu. Zmienia się jedynie to, jak rozkładają się w przestrzeni fizycznej. Przy 300 DPI piksel zajmuje 1/300 cala. Przy 72 DPI ten sam piksel zajmuje 1/72 cala, czyli ponad cztery razy więcej. Dlatego wydruk w 72 DPI wygląda „pikselowo”: każdy piksel jest na tyle duży, że widać go z osobna.

Czym są megapiksele

Megapiksel to milion pikseli. Aparat 12-megapikselowy tworzy zdjęcia liczące około 12 milionów pikseli. Typowa rozdzielczość dla 12 Mpix to 4032 × 3024 piksele, a 4032 × 3024 = 12 192 768 pikseli — po zaokrągleniu właśnie reklamowane „12 megapikseli”.

Wniosek praktyczny: każdy dzisiejszy smartfon (12 Mpix i więcej) ma rozdzielczość z zapasem wystarczającą na wydruk A4 w 300 DPI. Przy typowych formatach to nie aparat w telefonie jest wąskim gardłem.

Dlaczego „72 DPI” zrosło się z hasłem „do sieci”

To jedna z najstarszych i najgorzej rozumianych konwencji w grafice cyfrowej. Źródło jest historyczne: w latach 80. pierwsze monitory Macintosha miały około 72 pikseli na cal. Apple przyjęło 72 PPI jako punkt odniesienia, bo ułatwiało to zgranie ekranu z drukiem: 1 punkt typograficzny = 1/72 cala. Photoshop ustawił 72 PPI jako domyślną wartość dla dokumentów ekranowych i tak już zostało.

Dzisiejsze monitory mają od 90 do 140 PPI, a nowe iPhone'y sięgają 460 PPI. Jako opis ekranu wartość 72 PPI jest kompletnie nieaktualna.

Najważniejszy wniosek: wartość DPI zapisana w metadanych pliku nie ma żadnego wpływu na wyświetlanie na ekranie. Plik 1200 × 800 px z metadaną „72 DPI” i drugi z „300 DPI” wyglądają w przeglądarce identycznie — przeglądarka ignoruje tę informację i wyświetla piksel pliku jako piksel ekranu. Metadana DPI zaczyna się liczyć dopiero wtedy, gdy plik trafia do programu, który ma go wydrukować.

Ekrany Retina i współczynnik @2x

Apple wprowadziło ekrany Retina w iPhonie 4 (2010) z gęstością 326 PPI, mniej więcej dwukrotnie wyższą niż ówczesne monitory. Rozwiązaniem stał się podział na piksel logiczny i piksel fizyczny:

• Piksel logiczny (piksel CSS): jednostka używana w kodzie. Grafika opisana w CSS jako width: 300px zajmuje 300 pikseli logicznych.
• Piksel fizyczny: rzeczywisty punkt na ekranie. Na ekranie Retina @2x każdy piksel logiczny renderują 4 piksele fizyczne (2 × 2). Na ekranie @3x odpowiada mu 9 pikseli fizycznych.

Efekt jest taki, że grafiki rastrowe wyglądają na gęstych ekranach mętnie, jeśli nie dostarczysz ich w odpowiedniej rozdzielczości. Rozwiązanie: przygotuj pliki o dwukrotnie (albo trzykrotnie) większych wymiarach niż te, w jakich będą wyświetlane:

• Grafika wyświetlana w szerokości 300 px → przygotuj 600 px (@2x) lub 900 px (@3x)
• Do galerii z kadrami 800 × 600 px → przygotuj pliki 1600 × 1200 px

Skorzystaj z narzędzia Zmiana rozmiaru obrazu od ImageTools, żeby precyzyjnie ustawić wymiary przed wysłaniem plików.

Rozdzielczość do druku: jak policzyć potrzebne piksele

Wychodząc od wzoru Piksele = format fizyczny × DPI:

Przy banerach i materiałach wielkoformatowych oglądanych z dystansu 150 DPI zwykle w zupełności wystarcza. Przy druku, który trzyma się w ręce (wizytówka, odbitka, ulotka), standardem jest 300 DPI.

Rozdzielczość na ekran: co naprawdę się liczy

Przy grafikach na ekran i do sieci zapomnij o DPI. Zasady są trzy:

1. Skaluj do rozmiaru wyświetlania pomnożonego przez współczynnik ekranu. Baner o szerokości 1440 px na ekranach @2x wymaga pliku 2880 px. Zdjęcie produktu wyświetlane w 600 px — pliku 1200 px.
2. Nie wrzucaj plików większych, niż potrzeba. Zdjęcie 4032 × 3024 px wyświetlane na stronie w rozmiarze 800 × 600 px to czyste marnotrawstwo — przeglądarka pobiera 12 razy więcej pikseli, niż wykorzysta.
3. Metadana DPI nie zmienia w sieci absolutnie nic. Eksport „w 72 DPI” albo „w 300 DPI” nie ma tu żadnego znaczenia — liczy się liczba pikseli.

Dlaczego podniesienie DPI nie poprawia jakości obrazu

To chyba najbardziej frustrujące i najczęstsze nieporozumienie. DPI w Photoshopie (Obraz → Wielkość obrazu) można zmienić na dwa sposoby:

• Bez ponownego próbkowania: liczba pikseli zostaje bez zmian. Photoshop przelicza wyłącznie format wydruku. Obraz 720 × 540 px w 72 DPI staje się obrazem 720 × 540 px w 300 DPI — te same piksele na mniejszej powierzchni. Jakość ani drgnęła.
• Z ponownym próbkowaniem: Photoshop dorabia piksele przez interpolację, czyli wylicza wartości pośrednie między tymi, które już są. Pikseli robi się więcej, ale są zmyślone. Obraz wygląda na wygładzony albo rozmyty, nigdy na ostrzejszy. Detalu, którego nie było w oryginale, żadna matematyka nie stworzy.

Wniosek: jedyny sposób na więcej prawdziwych pikseli to wyjść od oryginału w wyższej rozdzielczości. Zmiana DPI w Photoshopie nie tworzy detali — jedynie rozkłada istniejące piksele na innej powierzchni.

Rozdzielczość wideo a rozdzielczość obrazu

Najczęściej zadawane pytania