Adaptivní obrazy: Řešení problému citlivého obrazu

Odpovědný design není jen změna uspořádání nebo použití mediálních dotazů sem a tam, je to stav mysli a akce, která má jasný význam.

Odpovědný design v podstatě říká, že se staráme o obsah více, než jsme měli v minulosti. Ve skutečnosti nám to velmi záleží, že budeme dokonce optimalizovat obsah, který se má číst a prohlížet na zařízeních, která ještě nebyla uvedena do provozu.

V podstatě se snažíme co nejjasněji prezentovat informace a být co možná nejúčinnější ve stejnou dobu. Zde je běžné mylné pojetí; mobilní nejprve znamená navrhnout, jako by se vaše celá stránka otáčela kolem mobilního telefonu. To není zcela přesné. Mobile nejprve jednoduše znamená navrhnout nejjednodušší zážitek nejprve, což nás často vede k tomu, abychom snížili režijní náklady, které zažíváme nebo se v budoucnu setkáme.

Ve světě designu; rychlá rozhodnutí; reakce; a kreativní obsah, musíme být v první řadě obezřetní. A být ostražitý se dozvídá, kdy máme problém v našich reakcích a jak je opravit. Dnes děláme právě to.

Odpovědné obrázky jsou už léta tvrdým tématem, protože obvykle existují více než jeden způsob, jak snížit citlivost vašich snímků. Pojďme tímto tématem od začátku, od toho, jak jsme to dělali.

Minulost

Webová stránka Boston Globe je klasickým příkladem tekutého designu.

Než půjdeme dál, musíme přejít na to, jak se chová webová stránka, abychom mohli mluvit o tom, jak to funguje. Rychlý přehled: HTML je načten postupně, pak jsou požadovány prostředky okamžitě, jakmile se objeví, skripty jsou okamžitě spuštěny a všechny soubory cookie jsou odesílány pomocí požadavků HTTP.

Proces požadavku / vytažení / načtení / atd. položil trochu omezení na to, jak můžeme s těmito metodikami získat kreativitu. Přesto to určitě nezastavilo lidi v minulosti. Zde je několik způsobů, jak se dostali kolem.

Nahrazuje atribut "src"

Pro přepsání atributu "src" můžeme použít javascript, takže jej vytahuje a nahradí obrázek podle velikosti prohlížeče, což vypadá, že funguje dobře. To bylo to, co mnoho lidí v minulosti používalo. Problém s tímto je, že používá dvojitý požadavek HTTP. Nejdříve vytáhne původní obrázek a nahradí ji obrázkem javascript. V podstatě děláte víc, než byste udělali, kdybyste na tom nic neudělali, ačkoliv se zdá, že funguje.

Existují pro to řešení? Existují, opravdu!

Existuje metoda, kterou hodně lidí používá, kde na místo namísto skutečného obrázku umístíme obrázek 1px gif, takže místo získání dvou obrázků za cenu dvou získáte v podstatě dva za cenu jednoho - ale to není ani ideální. V tomto případě stále děláte dvě žádosti HTTP.

To také znamená, že se spoléháte na javascript pro všechny obrázky. To je složité, protože mobilní operátoři mohou mít problémy s javascriptem, javascript může způsobit jakýkoli počet dalších věcí a překvapivý počet uživatelů webu jej úmyslně zablokuje.

Noscript

Další metodou, která získala určitou popularitu, je použití tagu "noscript" pro mobilní obrázky a poté pomocí javascriptu vyměnit za obraz s vyšším rozlišením. Zdálo se, že to chvíli trpí komunitou bouřkou kvůli možnosti výměny z verzí mobilních až po vysoce rez, a to se skutečně shodovalo se širokým nesprávným výkladem "mobilního prvního" uvedeného výše. To nefunguje v IE. Pro řešení společnosti Internet Explorer je třeba zapsat následující:

Ale problém s tím je, že teď to nefunguje v populárním prohlížeči Firefox. Takže to, co musíme udělat, je:

Jak můžete vidět, není to příliš jednoduché a rozhodně není příliš robustní. Není to opravdu způsob, jak to udělat čistě nebo prostě vůbec. Ve skutečnosti se mnoho lidí, kteří pracují v citlivých obrazech, snaží tyto problémy vyřešit už léta a skutečně se s nimi příliš nedaří.

Typicky to, co udělali, používá nějaký javascript k řešení problému a přijal dvojí http žádost jako nezbytné zlo.

Řešení na straně serveru?

Typickým řešením na straně serveru je použití javascriptu nahradit "src" HTML5 "-data-highsrc" a uložit velikost prohlížeče do souboru cookie. Přesto však odešle stejný počet požadavků HTTP jako dříve.

Důvodem, proč se tato metoda líbila, bylo to, že se domnívají, že je bezpečnější, jelikož ukládali velikost prohlížeče do cookie a cítili, že existuje méně rozpětí pro chybu. Ve skutečnosti to ale není přesné. Zde je několik důvodů, proč tato metoda není tak velká, jako ostatní doposud uvedené metody. Umožňuje pouze načítání velkých a malých obrázků, nezabývá se změnami orientace zařízení a rozbíjí se špatně, protože prohlížeče předběžně načítá obrazy. Velkou záležitostí je také to, že někdy cookies nejsou nastaveny dostatečně rychle, což vede k tomu, že desktop získává obrazy určené pro mobily.

Z tohoto důvodu, a sice selhání vhodných možností na serveru i na straně klienta, potřebujeme nové řešení.

A to je pravé místo, kde adaptivní obrazy metody kroky v.

Metoda adaptivních obrazů

Přizpůsobivé obrázky jsou pravým řešením tohoto celku. Je to doslova stejně snadné jako přetahování na server a všichni jste hotovi. Tato adaptivní metoda používá jeden soubor htaccess, jeden soubor php a jeden řádek javascriptu a to je ono .

Jednoduše přetáhněte soubor htaccess a php do kořenového adresáře a přidejte javascript na hlavu indexového souboru a jste kompletní. Nic jiného, ​​co by se nemuselo bát. Nyní nabízíme tunu přizpůsobení, ale dostaneme se do toho blízko konce.

Prozatím skočme přímo na začátek Adaptivní metody.

Cíle

Nejprve si určíme cíle projektu. Tvůrce adaptivních obrazů, Matthew Wilcox , označil tyto cíle za své řešení:

• Musí být snadné nastavit a používat.
• Musí být co nejmenší údržba.
• Musí pracovat s existujícím obsahem, není potřeba upravovat značky nebo vlastní CMS.
• Musí být povoleno několik verzí.
• Musí pracovat s hraničními body návrhu a nikoli s hraničními body zařízení.
• Je třeba ji snadno vyměnit, když přichází lepší řešení.

A tyto cíle pro tento projekt se opírají pouze o předpoklad, že

značky na vašem webu již používají obraz s nejvyšším rozlišením, což je podle mého názoru rozumným předpokladem. Typicky budeme mít na našich stránkách nejlepší obrazy, protože vím jen málo webových designérů, kteří dávají své nejlepší snímky na telefonních verzích a jejich nejhorší na webu. To je docela samo vysvětlující.

Jak to funguje

Právě se chystáme se ponořit do kódu, ale ještě než budeme hovořit o tom, jak funguje na vyšší úrovni. Jednoduše řečeno, javascript rozpozná největší rozměry obrazovky, které jsou v tomto zařízení k dispozici, a uloží je do souboru cookie. Soubor .htaccess pak odkazuje na určité požadavky na adaptivní-images.php a na základě těchto pravidel soubor PHP zpracovává. Uvnitř tohoto zpracování je místo, kde se skutečná kouzla stane a všemi prostředky bych doporučil všem, kteří si přečtou tento soubor PHP. Je to nejkrásněji napsaný PHP, který jsem viděl už roky . Je to určitě nutná.

Nyní se podívejme na to, jak rozdělíme specifika toho, jak fungují tyto soubory, a vzájemně se vzájemně soustřeďují. Zde budeme diskutovat o všechno, co získáte při stahování balíčku z webu adaptivních obrázků.

Kód javascript

Kód javascript, který budete muset zkopírovat, je následující:

A musí jít před jiným javaskriptem v hlavě . Za zmínku stojí také to, že pokud byste chtěli využívat zobrazení sítnice u některého z novějších produktů Apple, můžete použít následující řádek javascript:

Jak vidíte, poslední řádek je velmi podobný a jediný rozdíl spočívá v tom, že do takových zařízení, která to dovolí, budou posílány obrázky s vyšším rozlišením - uvědomte si, že to bude znamenat pomalejší stahování pro uživatele sítnice, ale lepší obrázky samozřejmě.

Vezměte na vědomí, že to ještě musí být první javascript ve vaší hlavě.

Soubor .htaccess

Soubor .htaccess je prostě glorifikovaný nástroj pro správu adresářů a pokud již máte webové stránky, o kterých uvažujete o použití adaptivních obrázků, pravděpodobně už máte soubor .htaccess, takže je třeba přidat nějaký obsah . Jednoduše ji otevřete (vždy se nachází v kořenovém adresáři vašeho webu) a přidejte toto:

Options +FollowSymlinksRewriteEngine On# Adaptive-Images ----------------------------------------# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:# RewriteCond %{REQUEST_URI} !some-directory# RewriteCond %{REQUEST_URI} !another-directoryRewriteCond %{REQUEST_URI} !assets# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images ----------------------------------------

Nyní je zajímavá část toho, že opravdu nemusíte dělat žádné změny vůbec.

Typicky stránky budou chtít, aby všechny jejich obrazy reagovaly a hrály v pohodě se všemi formovými faktory, takže vzhledem k tomu, že opravdu nemusíte nic vyloučit. Pokud chcete nebo potřebujete, existuje zde možnost, ale nezapomeňte, že chcete reagovat a postupovat. Soubor .htaccess je pro tento projekt ideální a slouží jako klíč v tomto procesu, takže bez něj nemůžete tuto metodu opravdu použít. V důsledku toho se musíte ujistit, že na to nezapomenete, nebo jej přidáte, pokud nemáte.

Soubor PHP

Vše, co musíte udělat s touto, je přetáhnout ji do kořenového adresáře a postará se o všechno ostatní. K dispozici je malá přizpůsobitelná část, jak můžete vidět zde:

/* CONFIG ------------------------------ */$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Jak se říká o zbytku scénáře, pokud nevíte, co děláte, tak proč to prostě nechte sami? V případě, že se vám líbí tinkering, prostě jen trochu osvětlení.

Rozlišení $ jsou šířky obrazovky, se kterými budeme pracovat. Ve výchozím nastavení bude ukládat obrázek pro větší velikost pro velké obrazovky, normální obrazovky, tablety, telefony a drobné telefony.

$ cache_path, pokud se vám nelíbí uložené snímky uložené v mezipaměti do této složky, můžete ji dát někde jinde. Jednoduše vložte cestu do složky a ujistěte se, že ji vytvoříte na serveru.

$ sharpen provede jemné ostření na zmenšeném obrazu. Obvykle je to v pořádku, ale možná budete chtít vypnout, pokud je váš server velmi zaneprázdněn.

$ watch_cache, pokud je váš server velmi zaneprázdněn, může to pomohou výkonu, aby to změnil na FALSE. Bude to však znamenat, že pokud změníte zdroj, budete muset ručně vymazat adresář vyrovnávací paměti.

Nyní, když víte vše o přizpůsobení, můžete být zvědaví, co dělá přesně soubor PHP? No pojďme to projít krok za krokem:

• Čte soubor cookie a odpovídá výsledku do bodů zlomů, které odpovídají hraničním hodnotám CSS
• Zkontroluje svůj vlastní adresář mezipaměti, aby zjistil, zda existuje verze požadovaného souboru s touto velikostí zarážky.
• Pokud ano, porovná data a původ, aby se zajistila, že verze vyrovnávací paměti nebude zastaralá.
• Pokud neexistuje mezipaměť; pak vytvoří změněný obraz pouze v případě, že zdrojový obrázek je větší než velikost zarážky. Pak je ukládá do mezipaměti pro budoucí použití.

Soubor ai-cookie.php

Tento soubor 'ai-cookie.php' získáte i ve složce, když si stáhnete balík adaptivních obrázků, ale ve skutečnosti to může být smazáno, jelikož jde o alternativní metodu detekce velikosti obrazovky uživatelů. Tvůrce adaptivních obrázků vám doporučuje odstranit toto a jít se standardní metodou.

A to je o obsahu tohoto balíčku. Nyní se ujistěte, že se podíváte na všechny soubory, které se objevují na vašem webu, a zkontrolujte, zda používáte nejlepší postupy s dotazy médií. Také se ujistěte, že máte otázky, pokud máte nějaký obsah nebo zpravodajské dotazy obecně, protože rád mluvím o takových věcech. Nyní se shrňme, co zde máme.

Ve shrnutí:

Je to jistě fascinující systém, a ten, který předpokládám, že se budem užívat po mnoho let. Za prvé, co přesně mohu přizpůsobit tomuto systému jako celku?

Pomocí tohoto systému můžete:

• Nastavte hraniční body tak, aby odpovídaly vašim CSS.
• Zadejte, kde chcete složku mezipaměti.
• Nastavte kvalitu vytvořených JPG.
• Určete, jak dlouho mají prohlížeče mezipaměti snímek.
• Dostatečně ostře vytvořené obrázky.
• Alternativní javascript pro detekci zařízení s vysokým rozlišením DPI.

V budoucnu bych také rád, kdybych zjistil šířku pásma v systému namísto velikosti zařízení nebo šířky prohlížeče. Protože to je skutečný klíč při rozhodování o tom, jaký obrázek poslat tam, ale teď už neexistuje žádný způsob, jak to udělat.

Návštěva adaptive-images.com stáhnout soubory, které jsem v tomto článku odkazoval.