Mýtus DPI
Velikost obrázku v rozvržení webu je důležitá. Od správného zarovnání až po získání správného množství bílého místa, správné rozmístění fotografií a grafiky předem je nezbytné pro vytvoření vyváženého vzhledu.
Obrázky na webu jsou měřeny v pixelech . Přesto mnozí lidé procházejí problémy s nastavením svých snímků na 72 bodů na palec (
Nesprávná koncepce rozlišení v digitálních obrázcích určených pro web je, že musí splňovat určitý počet bodů na palec.
V tisku pixelů na palec a bodů na palec ovlivňuje velikost obrázku na stránce. DPI se nevztahuje na rozvržení na webu.
Když někdo převede obrázek na 72 DPI , přidává další krok bez výhod. Webové stránky jsou měřeny v pixelech, nikoli v reálných jednotkách, například v palcích.
Když vás někdo požádá o webový obrázek, který je, řekněme, dva palce široký, odhadují, jak se bude zobrazovat na svém monitoru. Bez změn rozměrů obrazových pixelů by se tento obraz objevoval na různých monitorech větší nebo menší - a na jiném monitoru by se na jiném monitoru zobrazoval i jiný.
Velikost pixelu závisí na kontextu
Pixel (což je zkratka pro "prvek obrázku") je nejmenší měrná jednotka na mřížce zobrazující digitální obraz. DPI měří, jak velké pixely nebo body jsou při tisku.
Obrázek níže je zobrazen v různých polích DPI .
36 DPI
150 DPI
3 096 DPI
Stahujte je a otevřete je v editoru obrázků a uvidíte sami sebe. Všechny tři vypadají stejně, protože byly změněny, ne převzorkované.
Změna velikosti změn velikosti pixelů; Převzorkování změní počet pixelů
Existují dva způsoby, jak zvětšit obrázek: přidat více pixelů nebo zvětšit pixely. Stejně tak můžete snížit velikost obrázku tím, že odkryjete pixely nebo zmenšujete pixely. Ale smrštění a holení jsou dva různé procesy.
Zobrazený výše, změna velikosti obrázku mění velikost pixelů, nikoliv počet pixelů. Nevyrábíme nebo snižujeme počet pixelů, pouze měníme velikost těchto pixelů při tisku. Je to inverzní vztah: obrázky s většími pixely budou mít při tisku nižší hustotu pixelů (méně pixelů ve stejném počtu palců).
Zobrazený výše, převzorkování změní velikost obrázku zvýšením nebo snížením počtu pixelů. Obrázky s více pixely budou obsahovat více informací a často se budou vyrábět bohatší grafiky.
Webdesign se zabývá převzorkováním a nepřeměňováním, protože každý pixel na webové stránce bude mít vždy stejnou velikost. Webová stránka s šířkou 800 pixelů může obsahovat obrázky až do šířky 800 pixelů. Učinit každý pixel širší nezmění skutečnost, že rozložení může obsahovat pouze 800 z nich.
Nelze vytvořit obraz, který by se zobrazoval na obrazovce větší velikostí pixelů, protože každý pixel na stejné obrazovce bude mít vždy stejnou velikost.
Změna velikosti a převzorkování ve Photoshopu
Obrazovku Velikost obrázku aplikace Photoshop ( Image, Image Size ) řídí velikost i převzorkování obrázků.
Zaškrtávací políčko Resample změní, kolik pixelů se vejde do lineárního centimetru - doslovně pixelů na palec. Pokud vypínáme převzorkování, jediný způsob, jak změnit velikost obrázku, je rozšíření jeho pixelů pro tisk.
Pokud je rámeček pro převzorkování ponechán nezaškrtnutý, změna pole "rozlišení" by při tisku změnila fyzickou velikost snímku, ale nikoliv počet pixelů. Při tisku se obraz zdá být větší nebo menší. Na webové stránce by byla stejná velikost.
Experiment
Zjištění, zda má DPI význam ve webovém uspořádání, lze provést jen malým experimentem. Pokud změníme obraz z 300 x 100 pixelů na 72 DPI na 300 x 100 pixelů na 144 DPI, kolik pixelů bychom měli?
- Vytvořte obraz o výšce 300 pixelů a 100 pixelů vysoké při 72 DPI .
- Uděláme nějaké matematiky. Kolik pixelů by to bylo?
- Nyní změňte velikost obrázku na 300 x 100 pixelů na 144 DPI .
- Pojďme udělat ještě nějaké matematiky. Kolik pixelů to je?
Odpovědi jsou:
- 300 x 100 = 30 000
- 300 x 100 je stále 30 000
Pixely na palec na obrazovce
Počet pixelů na palec je stále relevantní online, ale nastavení DPI neovlivní způsob zobrazování obrázku.
Počítačové monitory mohou být fyzicky měřeny v palcích a každý zobrazuje určitý počet pixelů. Řekněme například, že 19 "monitor zobrazuje 1280 x 1024 pixelů. Uživatel by mohl změnit jeho zobrazení na 1600 x 1200 pixelů, čímž zvýší jeho PPI (tj. Přidá více pixelů ve stejném počtu palců.) Důležitým rozdílem v tisku je to, že můžete řídit obrazové pixely na palec.
Můžete to vyzkoušet na většině moderních počítačů. Na počítači Mac přejděte do nabídky Apple, na položku Předvolby systému a potom klikněte na tlačítko "Zobrazení" a zobrazte různé rozlišení, na kterých můžete nastavit monitor. V systému Windows klepněte pravým tlačítkem myši na pracovní plochu a vyberte možnost "Přizpůsobit" a poté zvolte možnost "Nastavení zobrazení". Změňte rozlišení obrazovky (počet pixelů) a sledujte, jak se položky na ploše počítače Mac nebo PC zvětšují nebo zmenšují.
Je zřejmé, že váš monitor se nemění ve velikosti. Pokud však držíte pravítko na obrazovce, uvidíte, že velikost ikon a oken je nepřímo úměrná počtu zobrazených pixelů. Například 13 "notebook, 17" CRT monitor a 21 "plochý monitor mohou všechny představovat pracovní plochu, která měří 1024 x 768 pixelů. Více pixelů znamená menší ikony; méně pixelů znamená větší ikony. Více pixelů na jednom monitoru poskytuje vyšší hustotu pixelů. méně pixelů je nižší.
Rozdíl se stává výraznější u ostatních typů displejů:
- Digitální billboard o rozměrech 47 x 12 stop může používat pouze 888 x 240 pixelů (přibližně 1,6 PPI).
- Dnes je iPhone měří 2 x 3 palce a drží 320 x 480 pixelů (asi 160 PPI) .
Jediný soubor PNG o rozměrech 100 x 100 pixelů by se hodil jak na billboard 888 x 240, tak i na iPhone 320 x 480. Ale zdá se, že na desce je mnohem větší, protože pixely desky jsou 100krát větší než iPhone (1,6 vs. 160).
Na následujícím obrázku jsou dvě zařízení s různými rozměry pixelů.
Stejný snímek se zobrazuje na dvou různých displejích. Rozdíly v PPI jednotlivých zobrazení způsobují, že obraz na pravém displeji je větší, přestože má celkově méně pixelů.
Můžete to vyzkoušet sám:
- Vytvořte JPG, který měří 960 x 100 pixelů, s libovolnou hustotou pixelů.
- Změřte jej ručně pomocí pravítka.
- Podívejte se na stejný obrázek v počítači s větším nebo menším monitorem. Například pokud jste vytvořili obrázek na 20 "obrazovce, otestujte jej na 13" notebooku.
- Vytiskněte stejný počet pixelů s různou hustotou pixelů, abyste na papíře viděli různé velikosti.
Výsledkem je, že tento jeden snímek by měl stejný počet pixelů, ale jinou šířku v palcích. Rozložení stránek se objeví v různých velikostech, a to i přes stejný kód. (V extrémním případě se podívejte na celou stránku v iPhone, 960 pixelů je nainstalováno na tři palce nebo méně, aniž by se samotný soubor změnil.)
Proč je 72 významné
Mnoho formátů souborů, včetně formátů JPG, TIF a PSD, ukládá nastavení hustoty pixelů. Pokud uložíte formát JPG v rozlišení 200 pixelů / palec, zůstane na 200.
Jiné formáty, včetně GIF a PNG, odstraňte hustotu pixelů. Pokud uložíte obraz 200 DPI jako PNG, vůbec ho nezachráníte. Mnoho editorů obrázků, včetně Adobe Photoshop, předpokládá, že obraz je 72
Sedmdesát dva je kouzelným číslem v tisku a typografii. V roce 1737 Pierre Fournier použil jednotky nazvané ciceros k měření typu. Šest ciker bylo 0,998 palců.
Okolo roku 1770 použil François-Ambroise Didot trochu větší cikero, aby se vešla na standardní francouzskou "nohu". Didotova pica byla dlouhá 0,1776 palce a rovnoměrně rozdělena na 12 kroků. Dnes jim říkáme body.
V roce 1886 vytvořil systém American Point "pica" jako 0,166 palce. Šest z nich je 0,996 palců.
Žádná z jednotek se nikdy neosladila daleko od 12 bodů na piku: 6 piků na palec = 72 bodů na palec. Byla to důležitá norma do roku 1984, kdy Apple připravil představení prvního počítače Macintosh. Rozhraní Macu bylo navrženo tak, aby pomohlo lidem spojit počítač s fyzickým světem. Softwaroví inženýři používali metaforu stolu k popisu tajemného fungování počítače, až po ikony "papír", "složka" a "odpadky".
Každý pixel na původní obrazovce Mac 9 "(diagonálně) a 512 x 342 pixelů měřil přesně 1 x 1 bod. Držte pravítko na sklo a uvidíte, že 72 pixelů by skutečně zaplnilo 1 palec. Tímto způsobem, pokud vytisknete obrázek nebo kus textu a přidržíte jej vedle obrazovky, oba obrázky a kopie budou mít stejnou velikost.
Ale časné digitální fotografie byly neohrabané a zubaté. Jak se zlepšila technologie obrazovky a paměť, počítače dokázaly na monitoru o stejné velikosti zobrazit více pixelů. Přizpůsobení výtisku na obrazovku bylo ještě méně jisté, když rastrová a vektorová aplikace umožnila uživatelům přiblížit se a pozorně sledovat obrazové body. Do poloviny devadesátých let Microsoft Windows mohl na obrazovce přepínat mezi 72 a 96 pixely na palec. To způsobilo, že menší velikost písma je čitelnější, protože pro každou velikost bodu bylo k dispozici více pixelů.
Dnes si konstruktéři a klienti pochopí, že velikost položek na obrazovce není absolutní. Rozdíly mezi velikostí obrazovky a funkcí zoomu jsou samozřejmostí. Ale 72 je stále výchozí.
Vyšší obrazovka PPI znamená lepší čitelnost u menších bodů
Obrazovky s vyšším PPI jsou skvělé pro čitelnost. Více pixelů na palec usnadňuje čtení písmen. To také znamená, že obrázky a text musí být větší (v pixelech), aby byly čitelné.
Ukázkový text uvedený výše byl změněn z dvou různých nastavení PPI obrazovky. Horní řádek má menší pixely (tj. Vyšší PPI na obrazovce), takže 8 bodů je nejmenší čitelná velikost písma. Text v dolním řádku je sotva čitelný pod 10 body.
Vzhledem k tomu, že PC monitory v polovině devadesátých let předčily hustotu pixelů monitorů Mac, webové stránky postavené na systému Windows se chlubily menšími velikostmi písma, což je velkým zděšením uživatelů Mac. Obrazovky pro obě platformy dnes mají hustotu pixelů, která je dostatečně vysoká na to, aby rozdíly nemluvily.
Elastické webové obrazy s moderními prohlížeči
Nyní víme, že samotný DPI nezmění velikost obrazu na webu a nemáme žádnou kontrolu nad kterým zařízením je zobrazen obrázek. Takže je obraz pixelu dimenze jedinou věcí, na které záleží? Ano ... prozatím.
Rozložení šířky kapaliny, které se mění podle velikosti prohlížeče, může lépe vyhovět řadě zařízení a monitorů. Moderní prohlížeče FireFox 3, Safari 3 a Internet Explorer 7 a vyšší jsou lepší než starší verze pro škálování obrázků za běhu. The max-width Vlastnost CSS vynucuje snímky, aby se vešly do kontejneru, ale nepřesahují jejich skutečné rozměry. Například:
p { width: 25% } / * Čtvrtina oblasti obsahu * / img { max-width: 100% }
p { width: 50% } / * Polovina oblasti obsahu * / img { max-width: 100% }
p { width: 75% } / * Tři čtvrtiny obsahu oblasti * / img { max-width: 100% }
/ * Není nastavena šířka odstavce * / img { max-width: 100% }
Zde vidíme jeden obrázek o šířce 800 pixelů zapadají do čtyř odlišných prvků odstavce. Pokud byla šířka stránky flexibilní, změna velikosti okna prohlížeče by rozšiřovala obraz - ale nebyla překročena původní rozměry 800 x 323 pixelů. Nikdy by nedošlo k deformaci, nebo "pixellated", od příliš-expanze.
Příprava obrázků pro web znamená plánování v pixelech. Pokud někdo požádá o 2palcovou grafiku pro web, ne pro tisk, zeptejte se je: "Jak velké jsou vaše pixely?"
Napsáno výhradně pro WDD Ben Gremillion . Ben je nezávislý webový designér, který řeší komunikační problémy s lepším designem.
V jakém médiu se rozlišuje rozlišení? Jaký je nejlepší způsob, jak velikost obrázků online? Sdílejte své nápady níže.