Mit DPI
Rozmiar obrazu w układzie strony jest ważny. Od właściwego wyrównania do uzyskania odpowiedniej ilości białej przestrzeni, odpowiednio wczesne zmienianie rozmiaru zdjęć i grafiki ma zasadnicze znaczenie dla uzyskania zrównoważonego wyglądu.
Obrazy w Internecie są mierzone w pikselach . Jednak wiele osób ma problemy z ustawieniem swoich zdjęć na 72 kropki na cal (
Błędne przekonanie o rozdzielczości w obrazach cyfrowych związanych z internetem polega na tym, że muszą one spełniać określoną liczbę punktów na cal.
W druku piksele na cal i punkty na cal wpływają na rozmiar obrazu na stronie. DPI nie ma zastosowania do układu w Internecie.
Gdy ktoś konwertuje obraz na 72 DPI , dodaje dodatkowy krok bez żadnych korzyści. Strony internetowe są mierzone w pikselach, a nie w rzeczywistych jednostkach, takich jak cale.
Gdy ktoś prosi o obraz sieciowy o szerokości dwóch cali, szacuje, jak będzie wyglądać na własnym monitorze. Bez zmiany wymiarów pikseli obrazu, obraz ten wydaje się większy lub mniejszy na różnych monitorach - a nawet może wyglądać inaczej na tym samym monitorze przy różnych ustawieniach rozdzielczości.
Rozmiar Pixela zależy od kontekstu
Piksel (który jest skrótem od "elementu obrazu") jest najmniejszą jednostką miary na siatce wyświetlającej obraz cyfrowy. DPI mierzy, jak duże są te piksele lub kropki, kiedy są drukowane.
Obraz poniżej pokazano w różnych DPI .
36 DPI
150 DPI
3,096 DPI
Pobierz i otwórz je w edytorze obrazów, aby przekonać się sam. Wszystkie trzy wyglądają tak samo, ponieważ zostały zmienione, a nie resampled.
Zmiana rozmiaru Pixel Sizes; Resampling Zmienia liczbę pikseli
Istnieją dwa sposoby na powiększenie obrazu: dodaj więcej pikseli lub zwiększ rozmiar pikseli. Podobnie można zmniejszyć rozmiar obrazu, goląc piksele lub zmniejszając piksele. Ale kurczenie i golenie to dwa różne procesy.
Powyżej pokazano, zmiana rozmiaru obrazu zmienia rozmiar jego pikseli, a nie liczbę pikseli. Nie zwiększamy ani nie zmniejszamy liczby pikseli, zmieniając jedynie wielkość pikseli po wydrukowaniu. Jest to odwrotna zależność: obrazy o większych pikselach będą miały mniejszą gęstość pikseli (mniejszą liczbę pikseli w tej samej liczbie cali) po wydrukowaniu.
Powyżej pokazano, resampling zmienia rozmiar obrazu poprzez zwiększenie lub zmniejszenie jego liczby pikseli. Obrazy z większą liczbą pikseli będą zawierały więcej informacji i często przyczyniają się do bogatszej grafiki.
Projektowanie stron internetowych dotyczy ponownego próbkowania, a nie zmiany rozmiaru, ponieważ każdy piksel na stronie zawsze będzie mieć ten sam rozmiar. Strona o szerokości 800 pikseli może pomieścić obrazy o szerokości do 800 pikseli. Zwiększenie każdego piksela nie zmienia faktu, że układ może pomieścić tylko 800 z nich.
Nie można powiększyć obrazu na ekranie poprzez zmianę jego pikseli, ponieważ każdy piksel na tym samym ekranie będzie zawsze miał taki sam rozmiar.
Zmiana rozmiaru i ponowne próbkowanie w Photoshopie
Pole Rozmiar obrazu w Photoshopie ( obraz, rozmiar obrazu Üí ) steruje zarówno zmianą wielkości, jak i ponownym próbkowaniem obrazów.
Pole wyboru "Resample" zmienia liczbę pikseli mieszczących się w liniowym calu - dosłownie w pikselach na cal. Jeśli wyłączymy ponowne próbkowanie, jedynym sposobem zmiany rozmiaru obrazu będzie powiększenie jego pikseli w celu drukowania.
W przypadku pozostawienia niezaznaczonego pola ponownego próbkowania zmiana pola "rozdzielczość" spowoduje zmianę rozmiaru fizycznego obrazu podczas drukowania, ale nie jego liczbę pikseli. Po wydrukowaniu obraz będzie większy lub mniejszy. Na stronie internetowej będzie to ten sam rozmiar.
Eksperyment
Ustalenie, czy DPI ma znaczenie w układach internetowych, można wykonać za pomocą małego eksperymentu. Jeśli zmienimy obraz z 300 x 100 pikseli przy 72 DPI na 300 x 100 pikseli przy 144 DPI, to ile pikseli będziemy mieli?
- Utwórz obraz o szerokości 300 pikseli i wysokości 100 pikseli przy rozdzielczości 72 DPI .
- Zróbmy trochę matematyki. Ile to będzie pikseli?
- Teraz zmień rozmiar obrazu na 300 x 100 pikseli przy 144 DPI .
- Zróbmy jeszcze trochę matematyki. Ile jest pikseli?
Odpowiedzi są następujące:
- 300 x 100 = 30 000
- 300 x 100 to wciąż 30 000
Piksele na cal na ekranie
Liczba pikseli na cal jest nadal aktualna w Internecie, ale ustawienia DPI nie wpływają na sposób wyświetlania obrazu.
Monitory komputerowe mogą być fizycznie mierzone w calach, a każdy z nich wyświetla określoną liczbę pikseli. Na przykład, powiedzmy, 19-calowy monitor pokazuje 1280 x 1024 pikseli. Użytkownik może go zmienić, aby wyświetlał 1600 x 1200 pikseli, zwiększając w ten sposób swój PPI (tj. Dodając więcej pikseli w tej samej liczbie cali). Ważną różnicą w druku jest to, że można kontrolować piksele na cal.
Możesz wypróbować to na większości nowoczesnych komputerów. Na komputerze Mac, przejdź do Apple Menu, Üí Preferencje systemowe , a następnie kliknij "Wyświetlaj", aby zobaczyć różne rozdzielczości, w których możesz ustawić swój monitor. W systemie Windows kliknij pulpit prawym przyciskiem myszy i wybierz "Personalizuj", a następnie wybierz "Ustawienia wyświetlania". Zmień rozdzielczość ekranu (liczbę pikseli) i obserwuj, jak elementy na pulpicie komputera Mac lub PC stają się większe lub mniejsze.
Oczywiście twój monitor nie zmienia rozmiarów. Ale jeśli przytrzymasz linijkę na ekranie, zobaczysz, że rozmiar ikon i okien jest odwrotnie proporcjonalny do liczby wyświetlanych pikseli. Na przykład 13-calowy laptop, 17-calowy monitor CRT i 21-calowy płaski monitor może zaprezentować pulpit o wymiarach 1024 x 768 pikseli. Więcej pikseli oznacza mniejsze ikony; mniej pikseli oznacza większe ikony. Więcej pikseli na tym samym monitorze zapewnia większą gęstość pikseli; mniej pikseli jest mniej.
Różnica staje się bardziej zauważalna w przypadku innych rodzajów wyświetlaczy:
- Cyfrowy billboard o wymiarach 47 x 12 stóp może wykorzystywać tylko 888 x 240 pikseli (około 1,6 PPI).
- Dziś ekran iPhone'a mierzy 2 x 3 cale i mieści 320 x 480 pikseli (około 160 PPI) .
Pojedynczy plik PNG o wymiarach 100 x 100 pikseli zmieściłby się zarówno na bilbordach 888 x 240 jak i na iPhonie 320 x 480. Ale na billboardie wydaje się znacznie większy, ponieważ piksele na planszy są 100 razy większe niż iPhone'a (1,6 vs. 160).
Poniższa ilustracja pokazuje dwa urządzenia o różnych rozmiarach pikseli.
Ten sam obraz jest wyświetlany na dwóch różnych wyświetlaczach. Różnice w PPI każdego wyświetlacza sprawiają, że obraz na wyświetlaczu po prawej stronie wydaje się większy, mimo że ma ogólnie mniej pikseli.
Możesz to przetestować samodzielnie:
- Utwórz JPG o wymiarach 960 x 100 pikseli przy dowolnej gęstości pikseli.
- Zmierz go ręcznie za pomocą linijki.
- Spójrz na ten sam obraz na komputerze z większym lub mniejszym monitorem. Na przykład, jeśli utworzyłeś obraz na 20-calowym ekranie, przetestuj go na 13-calowym laptopie.
- Wydrukuj taką samą liczbę pikseli o różnych gęstościach pikseli, aby zobaczyć różne rozmiary na papierze.
Powoduje to, że ten jeden obraz miałby tę samą liczbę pikseli, ale inną szerokość w calach. Układ strony pojawiłby się w różnych rozmiarach mimo identycznego kodu. (W skrajnym przypadku spójrz na całą stronę na iPhonie, 960 pikseli jest dopasowanych do trzech cali lub mniej, bez zmiany samego pliku).
Dlaczego 72 jest znaczący
Wiele formatów plików, w tym JPG, TIF i PSD, zapisuje ustawienie gęstości pikseli obrazu. Jeśli zapiszesz JPG o wartości 200 pikseli / cal, pozostanie on na poziomie 200.
Inne formaty, w tym GIF i PNG, odrzucają gęstość pikseli. Jeśli zapiszesz obraz 200 DPI jako plik PNG, to w ogóle go nie zapisze. Wiele edytorów obrazu, w tym Adobe Photoshop, zakłada, że obraz ma 72
Siedemdziesiąt dwa to magiczna liczba w druku i typografii. W 1737 r. Pierre Fournier użył jednostek o nazwie ciceros do pomiaru typu. Sześć ciceros miało 0,998 cala.
Około 1770 r. François-Ambroise Didot używał nieco większych ciceros, aby pasowały do standardowej francuskiej "stopy". Pica Didota miała długość 0.1776 cali i była podzielona równo na 12 rund. Dziś nazywamy je punktami.
W 1886 roku American Point System ustanowił "pica" jako 0,166 cala. Sześć z nich to 0,996 cala.
Żadna z jednostek nigdy nie zboczyła z daleka od 12 punktów na pica: 6 pik na cal = 72 punkty na cal. Był to ważny standard w 1984 roku, kiedy Apple przygotowało się do wprowadzenia pierwszego komputera Macintosh. Interfejs Mac został zaprojektowany, aby pomóc ludziom odnieść komputer do świata fizycznego. Inżynierowie oprogramowania wykorzystali metaforę biurka do opisania tajemnych działań komputera, aż do ikon "papieru", "folderu" i "kosza".
Każdy piksel na oryginalnym 9-calowym ekranie (Mac OS X) i 512 x 342 pikselach mierzył dokładnie 1 x 1 punkt. Przytrzymaj linijkę do szkła, a zobaczysz, że 72 piksele faktycznie wypełniłyby 1 cal. W ten sposób, jeśli wydrukujesz obraz lub fragment tekstu i przytrzymasz go obok ekranu, zarówno obraz, jak i wydruk będą miały ten sam rozmiar.
Ale wczesne cyfrowe zdjęcia były nieporęczne i poszarpane. Wraz z poprawą technologii ekranu i pamięci, komputery były w stanie wyświetlać więcej pikseli na tym samym monitorze wielkości. Dopasowanie wydruków do ekranu stało się jeszcze mniej pewne, gdy aplikacje rastrowe i wektorowe pozwoliły użytkownikom na powiększenie i dokładne sprawdzenie pikseli. W połowie lat 90. system Microsoft Windows mógł przełączać się pomiędzy 72 a 96 pikselami na cal na ekranie. Dzięki temu mniejsze rozmiary czcionek były bardziej czytelne, ponieważ dostępnych było więcej pikseli na punkt.
Dzisiaj zarówno projektanci, jak i klienci rozumieją, że rozmiary przedmiotów na ekranie nie są absolutne. Różnice w rozmiarze ekranu i powiększeniu są powszechne. Ale 72 nadal jest ustawieniem domyślnym.
Wyższy ekran PPI oznacza lepszą czytelność w mniejszych rozmiarach
Ekrany o wyższym PPI są świetne dla czytelności. Więcej pikseli na cal ułatwia odczyt liter. Oznacza to również, że obrazy i tekst muszą być większe (w pikselach), aby były czytelne.
Powyższy przykładowy tekst został zmieniony z dwóch różnych ustawień PPI ekranu. Górny rząd ma mniejsze piksele (tj. Wyższy PPI na ekranie), więc 8 punktów to najmniejszy czytelny rozmiar czcionki. Tekst w dolnym wierszu jest ledwie czytelny poniżej 10 punktów.
Ponieważ monitory komputerów PC przewyższały gęstość pikseli monitorów Mac w połowie lat 90., witryny zbudowane w systemie Windows miały mniejsze rozmiary czcionek, ku rozczarowaniu użytkowników komputerów Mac. Obecnie ekrany na obu platformach cieszą się gęstością pikseli wystarczająco dużą, aby różnice mogły się różnić.
Elastyczne obrazy sieciowe z nowoczesnymi przeglądarkami
Teraz wiemy, że same DPI nie zmieniają rozmiaru obrazu w Internecie i nie mamy żadnej kontroli nad tym, na którym urządzeniu obraz jest wyświetlany. Czy wymiary pikseli obrazu są jedyną rzeczą, która ma znaczenie? Na razie tak.
Układy szerokości płynu, które zmieniają się w zależności od rozmiaru przeglądarki, mogą lepiej pomieścić szereg urządzeń i monitorów. Nowoczesne przeglądarki, od FireFox 3, Safari 3 i Internet Explorer 7 i wyżej, są lepsze niż starsze wersje w skalowaniu obrazów w locie. The max-width Właściwość CSS wymusza umieszczanie obrazów w ich pojemnikach, ale nie przekraczają one rzeczywistego rozmiaru. Na przykład:
p { width: 25% } / * Jedna czwarta obszaru zawartości * / img { max-width: 100% }
p { width: 50% } / * Połowa obszaru zawartości * / img { max-width: 100% }
p { width: 75% } / * Trzy czwarte obszaru zawartości * / img { max-width: 100% }
/ * Brak szerokości dla akapitu * / img { max-width: 100% }
Widzimy tutaj obraz o szerokości 800 pikseli dopasować do czterech różnych elementów akapitu. Jeśli szerokość strony była elastyczna, zmiana rozmiaru okna przeglądarki spowodowałaby rozszerzenie obrazu, ale nie przekroczyła pierwotnych wymiarów w rozmiarze 800 x 323 pikseli. Nigdy nie zostałby zniekształcony ani "pikselowany" z powodu nadmiernej ekspansji.
Przygotowywanie obrazów do sieci oznacza planowanie w pikselach. Jeśli ktoś prosi o 2-calową grafikę do internetu, a nie do druku, zapytaj go: "Jak duże są twoje piksele?"
Napisany wyłącznie dla WDD przez Ben Gremillion . Ben jest niezależnym projektantem stron internetowych, który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.
W jakim medium liczy się rozdzielczość? Jaki jest najlepszy sposób na rozmiar zdjęć online? Podziel się swoimi pomysłami poniżej.