Anatomia obrazu
Każdy obraz to tabela liczb. Otwierając plik graficzny, otwieramy długą listę trójek wartości; każda z nich opisuje kolor jednego punktu na ekranie.
Obraz, który widzisz w tej chwili na ekranie, nie istnieje w komputerze jako „obraz". Istnieje jako bardzo długa lista bajtów, czyli liczb od 0 do 255 ułożonych obok siebie w pamięci. Lista ta ma swój układ: kolejne trójki opisują kolejne piksele, kolejne wiersze pikseli składają się w wiersze obrazu. Wszystko, co dzieje się powyżej tego poziomu, jest interpretacją: program graficzny czyta tę listę i wyświetla ją jako siatkę kolorowych kwadracików.
Ta strona pozwala otworzyć dowolny plik graficzny i obejrzeć go z czterech stron jednocześnie: jako metryczkę pliku, siatkę pikseli, sekwencję bajtów i jako obraz, który tracimy, gdy go zmniejszamy.
Otwórz plik
Zacznij od dowolnego obrazu z dysku. Wszystkie obliczenia zachodzą lokalnie w przeglądarce; nic nie wychodzi poza Twój komputer.
Upuść tu obraz
albo kliknij, żeby wybrać · PNG · JPG · GIF · WebP
Co składa się z czego
Plik na dysku nie jest jeszcze obrazem, tylko jego opisem. Pierwsze bajty pliku to sygnatura formatu: dla PNG to 89 50 4E 47, dla JPEG-a FF D8 FF. Dalej idą metadane: szerokość, wysokość, paleta, sposób kompresji. Reszta to skompresowana zawartość obrazu, którą trzeba dopiero rozpakować, żeby pojawiły się piksele.
Dopiero rozpakowane piksele są tym, czym obraz jest naprawdę. Niżej można je zobaczyć z bliska, każdy z osobna.
Każdy piksel to trzy liczby
Najedź kursorem na dowolny kwadracik, żeby zobaczyć jego współrzędne, kolor i zapis dwójkowy. Suwaki obniżają rozdzielczość obrazu, by pokazać, jak komputer „widzi" tę samą scenę przy mniejszej liczbie pikseli.
Po zmniejszeniu: --
Oryginał
Widok pikselowy · najedź, żeby zbadać
Te same dane jako bajty
Każdy piksel zajmuje w pamięci trzy bajty, po jednym na kanał czerwony, zielony i niebieski. Sześć cyfr w zapisie szesnastkowym (na przykład FF8800) to dokładnie te trzy bajty, tylko zapisane w bardziej zwartej notacji niż ośmiobitowy zapis dwójkowy każdego z nich.
Niżej widać surową zawartość pliku: pierwsze 512 bajtów. Lewa kolumna to pozycja w pliku, środkowa - bajty po szesnastkowemu, prawa - próba odczytania ich jako tekst (większość bajtów nie odpowiada drukowanym znakom, więc widać kropki).
Plik jako sekwencja bajtów
Pierwsze bajty to tak zwana magic number - sygnatura formatu, dzięki której system od razu wie, czego się spodziewać.
Mniej pikseli, mniej bajtów
Im więcej pikseli, tym więcej trójek liczb do zapamiętania. Obraz 4000 × 3000 to dwanaście milionów pikseli, czyli trzydzieści sześć milionów bajtów surowych danych. Zmniejszenie obrazu o połowę liniowo zmniejsza tę liczbę czterokrotnie, i właśnie dlatego strony internetowe rzadko podają oryginalne pliki ze smartfonów.
Suwak niżej pokazuje, jaką cenę płacimy za tę oszczędność: każdy piksel, który wyrzucamy, przestaje istnieć razem z odcieniem, który niósł.
Co zostaje, gdy zmniejszamy
Po lewej oryginał, po prawej ten sam obraz przepuszczony przez downsampling - operację, która łączy sąsiednie piksele w jeden uśredniony kolor.