Jak przygotować obraz do publikacji

Zmień rozmiar do tego, w jakim obraz naprawdę będzie wyświetlany, najwyżej do jego dwukrotności z myślą o ekranach o dużej gęstości. Wykadruj do kształtu, jakiego potrzebuje układ strony, zamiast pozwalać przeglądarce go zgniatać. Kompresuj do momentu, w którym artefakty ledwie się pojawią, a potem cofnij się o jeden stopień. Metadane usuwaj na końcu. Kolejność ma znaczenie: każdy krok po pierwszym pracuje na znacznie mniejszej liczbie pikseli.

Wymiary są pierwsze

Liczba pikseli rośnie z kwadratem szerokości, więc skromna różnica wymiarów jest ogromną różnicą ilości danych. Obraz zapisany w szerokości 4000 pikseli i pokazywany w kolumnie o szerokości 800 pikseli niesie mniej więcej dwadzieścia pięć razy więcej danych, niż potrzebuje, a żadne ustawienie jakości tego nie odzyska.

Żeby wybrać docelową szerokość, zmierz największą szerokość, w jakiej obraz kiedykolwiek renderuje się w układzie strony, a nie największą szerokość ekranu. Karta w siatce trzykolumnowej może nigdy nie przekroczyć 380 pikseli szerokości. Jeśli jeden plik obsługuje kilka miejsc, dobierz rozmiar do największego z nich.

Piksele urządzenia, piksele CSS i mit DPI

Piksel CSS to jednostka układu, a nie fizyczna kropka. Współczynnik pikseli urządzenia mówi, ile pikseli urządzenia ekran maluje na jeden piksel CSS: 1 na starszych monitorach, 2 na większości współczesnych telefonów i laptopów, 3 na części telefonów. Kolumna o szerokości 800 pikseli CSS przy współczynniku 2 jest malowana 1600 pikselami urządzenia i właśnie dlatego obraz dopasowany do szerokości w pikselach CSS wygląda miękko.

Praktyczna reguła to 2x. Eksportuj w dwukrotności wyświetlanej szerokości i pozwól przeglądarce pomniejszyć. Przejście na 3x kosztuje kolejne 125% danych za różnicę, którą przy normalnej odległości patrzenia dostrzega niewiele osób.

Wartości DPI i PPI zapisane w pliku nie mają dla sieci znaczenia. To jedna liczba w nagłówku, która mówi, w jakim fizycznym rozmiarze plik powinien się wydrukować, a przeglądarki całkowicie ją ignorują.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Eksport w "300 DPI" nie dodaje pikseli i nie zmienia żadnych danych obrazu.

Co robi przepróbkowanie

Pomniejszanie oznacza, że wiele pikseli źródłowych staje się jednym. Szczegół drobniejszy niż nowa siatka nie da się przedstawić, a jeśli algorytm próbkuje zbyt mało pikseli źródłowych, zamiast uśredniać po całym obszarze, ten szczegół zawija się z powrotem jako fałszywy wzór: poszarpane skosy i mora na drobnych powtarzalnych fakturach, takich jak koszula w paski albo tabela z obramowaniem o szerokości jednego piksela. Dobre pomniejszenie uśrednia każdy wnoszący wkład piksel i zwykle wymaga potem odrobiny wyostrzenia.

Powiększanie nie tworzy szczegółu. Interpolacja jedynie zgaduje wartości między pikselami, które już istnieją, więc wynik jest miękki albo kanciasty. Algorytmy powiększania oparte na uczeniu maszynowym zamiast tego wymyślają prawdopodobny szczegół, co nie jest tym samym co jego odzyskanie.

Proporcje: kadrowanie, pasy czy rozciąganie

Kadrowanie utrzymuje temat we właściwej skali i odrzuca brzegi, i jest właściwym ustawieniem domyślnym. Dodanie pasów zachowuje całą klatkę, ale dokłada belki i wymusza wybór ich koloru; zarabia na siebie wtedy, gdy niczego nie wolno uciąć, jak przy dziele graficznym albo diagramie. Rozciąganie zniekształca, a oko wyłapuje to natychmiast na twarzach, kołach i literach.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Kiedy jeden plik pojawia się w kilku kształtach, myśl kategoriami obszaru bezpiecznego: obszaru, który przetrwa każde kadrowanie. Baner 16:9 ucina górę i dół, kafelek 1:1 oraz karta 4:5 ucinają boki, więc tym, co zachowują wszystkie, jest pas przez środek. Trzymaj wewnątrz niego temat i wszelki tekst, bo inaczej twarz przy krawędzi zdjęcia poziomego zostanie ścięta przez kadr kwadratowy.

Dobieranie ustawienia jakości

Liczba jakości nie jest procentem czegokolwiek, a skale nie są porównywalne między koderami. JPEG 80, WebP 80 i AVIF 80 to trzy niepowiązane ustawienia.

Metoda jest dla wszystkich taka sama. Wyeksportuj przy kilku ustawieniach, obejrzyj wynik w rozmiarze, w jakim będzie pokazywany, i sprawdź, gdzie artefakty wypływają najpierw: na gładkich gradientach, takich jak niebo, które prążkują się i plamią, oraz na twardych krawędziach i tekście, wokół których pojawiają się obwódki. Znajdź moment, w którym uszkodzenie staje się widoczne, cofnij się o jeden stopień i zatrzymaj się.

Jedna stała liczba jest błędna dla każdego obrazu, ponieważ o tym, ile można wyrzucić, decyduje treść: zaszumione, fakturowe zdjęcie potrzebuje więcej bitów, żeby przetrwać, a płaska ilustracja rozpada się przy ustawieniu, które ruchliwe zdjęcie zniesie bez mrugnięcia.

Wycinanie, miękkie krawędzie i poświaty

Usuwanie tła jest właściwe wtedy, gdy obraz musi usiąść na więcej niż jednym kolorze tła albo nachodzić na inne elementy: zdjęcia produktowe, logotypy, osoba wkomponowana w układ strony. Jest niewłaściwe tam, gdzie granica jest naprawdę drobna, jak przy włosach, listowiu albo szkle, ponieważ zła maska wygląda gorzej niż uczciwy prostokąt.

Twarda krawędź jest binarna, każdy piksel jest w pełni nieprzezroczysty albo w pełni przezroczysty, co pasuje do płaskiej grafiki, a na czymkolwiek fotograficznym daje schodki. Miękka maska dopuszcza częściowe krycie, więc piksel może być w 40% tematem, i tylko w ten sposób włosy wyglądają poprawnie.

Poświata bierze się z pikseli granicznych. Rozmycie obiektywu i wygładzanie krawędzi już zmieszały kolor tematu ze starym tłem, więc każdy taki piksel zawiera:

observed = alpha * foreground + (1 - alpha) * background

Usuwanie tła wylicza wyłącznie kanał alfa. Kolor pozostawiony w tych pikselach jest nadal zanieczyszczony, więc temat wycięty z białego ujęcia studyjnego niesie bladą obwódkę: niewidoczną na białej stronie, oczywistą na ciemnej. Porządne maskowanie rozwiązuje też równanie dla koloru pierwszego planu, co bywa udostępniane jako usuwanie obwódek albo odkażanie kolorów. W braku tego zaciśnij maskę do wewnątrz o ułamek piksela i wygładź ją ponownie.

Obrót i metadane

Obraz stojący prosto w jednym programie i leżący na boku w innym to niemal zawsze orientacja EXIF. Aparaty zapisują obraz z matrycy bez obrotu i dokładają znacznik mówiący, jak go obrócić. Oprogramowanie, które czyta ten znacznik, pokazuje obraz poprawnie; oprogramowanie, które go ignoruje, w tym wiele bibliotek graficznych i generatorów miniatur, pokazuje surowe piksele położone na boku.

Rozwiązaniem jest wypalenie obrotu w pikselach i ustawienie znacznika na 1 albo jego usunięcie. Obracanie w krokach po 90 stopni przestawia piksele bez ich przepróbkowywania. Uważaj na podwójny obrót: piksele już obrócone, znacznik nadal ustawiony, więc każda zgodna przeglądarka obraca je jeszcze raz.

Usuwanie metadanych to krok dotyczący prywatności, a nie porządków. Bloki EXIF, IPTC i XMP rutynowo niosą współrzędne GPS z dokładnością do kilku metrów, czas wykonania zdjęcia, markę, model i numer seryjny aparatu, nazwisko właściciela, a czasem osadzoną miniaturę wciąż pokazującą obraz sprzed kadrowania. Zdjęcie zrobione w domu i opublikowane w nienaruszonej postaci ogłasza adres domowy.

Usuwaj je na końcu, z jednym wyjątkiem: obok tych metadanych siedzi profil kolorów ICC, a usunięcie go z obrazu o szerokim gamucie zostawia liczby, które zostaną odczytane jako sRGB, co objawia się płaskim albo przesadnie nasyconym kolorem. Najpierw przekonwertuj do sRGB, a potem usuń całą resztę.