Projektuję banery internetowe od ponad roku, ale nigdy nie brałem pod uwagę DPI.
Użyłem domyślnego 72DPI, ale teraz chcę wiedzieć, czy konieczne jest tworzenie projektów internetowych w 72DPI? Co jeśli zastosujemy więcej, na przykład 200DPI?
Wiem, że więcej DPI oznacza lepszą jakość obrazu i dlatego chcę używać wysokiej DPI, ale ostatnio czytałem gdzieś, że do banerów internetowych powinniśmy używać 72DPI. Chcę tylko wiedzieć, czy jest to obowiązkowe i czy ma to jakiś negatywny wpływ?
Odpowiedzi:
Ustawienia PPI (pikseli na cal) nie są używane w obrazach internetowych. Obrazy w Internecie, wyświetlacze siatkówki lub w inny sposób są wyświetlane według wymiarów pikseli (szerokość i wysokość), a nie według ustawień PPI / DPI. W rzeczywistości wiele obrazów internetowych, takich jak png, gif, jpg, może nawet nie przechowywać ustawienia ppi w swoich danych wewnętrznych i opierać się na ustawieniach szerokości i wysokości.
Obraz o wymiarach 100 x 100 pikseli jest wyświetlany jako ten w Internecie, niezależnie od ustawienia PPI / DPI.
To dlatego obrazy dla wyświetlaczy siatkówki są zapisywane w rozmiarze 2x, zamiast zwiększonego ustawienia ppi. Gęstość pikseli na wyświetlaczach Retina jest wyższa jednak nadal wyświetlać obraz bez względu na stany ekran jest szerokość i wysokość obrazu nie oparte na dowolnym poziomie PPI.
W rzeczywistości monitor wykorzystujący gęstość pikseli 72ppi nie był widziany od wczesnych lat 80-tych. 72ppi nie było dokładne od prawie 30 lat. W rzeczywistości nigdy nie był dokładny dla systemów Windows, ponieważ Windows używa domyślnej wartości 96ppi dla gęstości pikseli.
Nie wierzysz mi? Wypróbuj sam. Utwórz dwa obrazy w Photoshopie, każdy o wymiarach 100 na 100 pikseli. Zrób jeden obraz 72ppi, a drugi 300ppi. Zapisz je oba do Internetu… czy różnią się one w przeglądarce internetowej? Nie. Oba obrazy są nadal w rozmiarze 100 na 100 pikseli.
Ustawienia DPI (kropki na cal) mają zastosowanie tylko podczas drukowania obrazu. DPI nie ma wpływu na obrazy przeznaczone na ekran. DPI odnosi się do ilości kropek / plam atramentowych, które prasa umieści w ciągu jednego cala. Ponieważ żaden ekran na Ziemi nie używa atramentu, DPI jest niepoprawnym terminem używanym do oznaczania ekranów.
Pamiętaj, że niektórzy producenci urządzeń mobilnych wybrali termin DPIx lub xDPI, który czasami jest skrócony do zwykłego DPI. To nie jest tradycyjna forma akronimu, a producent po prostu bardzo zamoczył wody. Jeśli widzisz DPI w stosunku do rozdzielczości ekranu telefonu komórkowego, mówią o skutecznym PPI i tak naprawdę nie odnoszą się do kropek na cal. Bardziej odpowiednim akronimem byłby xPPI lub PPIx, ponieważ ekrany urządzeń mobilnych, podobnie jak wszystkie wyświetlacze, używają pikseli, a nie atramentu.
Nie ma znaczenia, jakiego ustawienia ppi używasz do obrazów internetowych. Ważna jest szerokość (w pikselach) i wysokość (w pikselach) obrazu.
Podczas pracy z wieloma obrazami ważne jest, aby zachować spójność. Będziesz chciał, aby wszystkie obrazy były ustawione na tę samą wartość ppi, aby uniknąć zmiany rozmiaru i skalowania aspektów w przypadku przenoszenia elementów między obrazami. Nie ma znaczenia, czy wybierzesz 72, 96, 200 lub 145,8 ppi, ale wszystkie obrazy powinny być ustawione tak samo.
Omówię przykłady, co tak naprawdę oznacza „dpi”; dzięki temu możesz sam zobaczyć odpowiedź. :
Krótko mówiąc, twój obraz składa się z kolorowych kropek, które są obok siebie. Ale nie mają wielkości w żadnym sensie fizycznym.
Teraz, kiedy wyświetlasz obraz na ekranie, zwykle umieszczasz kolory kropek obrazu w rastrze kolorowych prostokątów, które może wyświetlać Twój ekran. Zauważ, że zarówno to, co nazywam „kropkami”, jak i prostokąty, nazywa się „pikselami” - ale patrząc z bliska, są one czymś innym.
Jeśli wyświetlamy obraz w naturalny sposób na ekranie, możemy zmierzyć jego rozmiar.
Na przykład nasz obraz ma szerokość 500 punktów, umieszczamy je na ekranie w kolorowych prostokątach i widzimy, że ma szerokość 5 cali. Następnie mamy 100 prostokątów na cal, pokazujących 100 naszych kropek na cal.
Oznacza to, że nasz obraz ma 100 dpi na ekranie.
Ale nawet nie spojrzeliśmy na wartość dpi w naszym pliku obrazu!
Teraz, jeśli spojrzymy na nasz plik, można powiedzieć, że obraz ma 200dpi! Wartość dpi określa, ile kolorowych kropek jest widocznych na cal szerokości lub wysokości ekranu. Tak więc wartość dpi na obrazie mówi nam, że nasz obraz będzie miał 2,5 cala szerokości po wyświetleniu - jako obietnica, a nie fakt .
Kiedy przypisaliśmy kropki obrazu do ekranu, nie przejmowaliśmy się tym, ponieważ właśnie go wyświetliliśmy i zmierzyliśmy rzeczywistą fizyczną rozdzielczość obrazu na ekranie.
Jak widać, obietnica była po prostu błędna . I nikogo to nie obchodzi! Ponieważ to po prostu nie ma znaczenia.
Plik był obiecujący - mówiąc 200dpi - będzie miał „2,5 cala szerokości, gdy zostanie pokazany”. Następnie użyliśmy ekranu, który pokazywał, że ma szerokość 5 cali - możemy to wiedzieć, ponieważ wiemy, jaki jest rzeczywisty ekran.
Zwykle nawet nie wiemy, co użytkownik końcowy wykorzysta jako ekran, więc możemy zgadywać tylko tak czy inaczej,
Więc teraz ma to sens:
I nie ma tylko jednego ekranu, na którym może być wyświetlany obraz - mogą mieć inny rozmiar, więc nie można nawet poznać prawdziwej wartości dpi podczas tworzenia pliku obrazu.
Zobacz także moją odpowiedź na temat Czym dokładnie jest „piksel”? .
Bezpośrednio do pytania, w oparciu o powyższe:
Gdy określisz dpi w pliku obrazu, nie jest to bezpośrednio związane z jakością pokazu obrazu na końcu.
Można go jednak użyć do komunikowania się o jakości obrazu - pod względem intencji: możesz powiedzieć „Chcę, aby ten obraz był wyświetlany na ekranie o rozdzielczości 200 dpi”.
Jeśli chcę pokazać ten obraz, mogę się zająć i poszukać ekranu o rozdzielczości 200 dpi; a może po prostu używam starego ekranu 75dpi, który może znajdować się na moim biurku. Obraz będzie dość duży, muszę przewijać - ale to mój problem i: nawet nie dowiesz się, co jest naprawdę używane - wartość 200dpi nie kontrolowała jakości obrazu - po prostu informowała, jak wyświetlić go „we właściwy sposób” sposób ”jeśli mnie to obchodzi.
Chociaż PPI zdecydowanie nie ma znaczenia - wymiary pikseli mają znaczenie przy projektowaniu stron internetowych i aplikacji, należy jednak bardzo ostrożnie korzystać z aplikacji do projektowania i mieszać ustawienia PPI. Dlatego:
Jeśli jednak planujesz używać programu Photoshop i różnych gęstości pikseli dla każdego dokumentu, przeciąganie warstw i kopiowanie stylów warstw między dokumentami powoduje skalowanie stylów warstw - przeciąganie warstwy z dokumentu iPhone 326PPI Retina na dokument iPad 264PPI Retina oznacza, że wszystkie style warstw są skalowane o 20% (następnie zaokrąglana do najbliższej liczby całkowitej). I prawdopodobnie nie tego chcesz. Ponadto podgląd OS X wyświetli obrazy 72PPI w dokładnym rozmiarze, bez względu na to, jak to skonfigurowałeś.
Z tych powodów przypisuję 72PPI do wszystkich moich dokumentów projektowych i polecam zrobić to samo. Aby zmienić gęstość pikseli w dokumencie programu Photoshop bez zmiany rozmiaru danych obrazu, otwórz okno dialogowe Rozmiar obrazu, odznacz Zmień rozmiar obrazu i wpisz żądaną gęstość pikseli.
Właśnie przetestowałem dwie kopie obrazu wykonanego za pomocą Photoshopa. Jednak ustawiłem jedną na 72 dpi, a drugą na 720 dpi, aby sprawdzić, czy którakolwiek z przeglądarek, z których korzystam, renderowałaby na ekranie różne rozmiary.
We wszystkich przeglądarkach oprócz jednej wyglądały identycznie - pod względem wielkości i jakości. Jednak przy użyciu Google Chrome ten zrobiony przy 72 wyglądał dobrze, ale ten zrobiony przy 720 był bardzo malutki - tak jakby miał rozmiar 1/10.
O jeny. To wygląda na argument za umieszczeniem wszystkich zdjęć wolnostojących (nie ograniczonych na stronie internetowej) na 72. Praktycznie wszystkie moje (których liczba w wielu setkach) ma rozdzielczość 120 dpi. Mimo że nadal wyglądają na wystarczająco duże w Chrome, być może mając na uwadze tę przeglądarkę, powinienem popracować nad ustawieniem ich wszystkich na 72. Może gdzieś w drobnym druku w preferencjach Chrome istnieje rozwiązanie.