Adaptiva bilder: Lösa det svåra bildproblemet

Responsiv design är inte bara en förändring av layout eller användningen av mediefrågor här och där, det är en sinnestatus och en handling som har tydlig mening.

Responsiv design säger i huvudsak att vi bryr oss mer om innehållet än vi har tidigare. Faktum är att vi bryr oss så mycket att vi även kommer att optimera innehåll som ska läsas och ses på enheter som ännu inte har lanserats.

I huvudsak försöker vi presentera information så tydligt som möjligt och vara så effektiv som möjligt samtidigt. Här är en vanlig missuppfattning; mobilt första sätt att designa som om hela din webbplats roterar runt mobiltelefonen. Det är inte riktigt korrekt. Mobil först betyder bara att designa för den enklaste upplevelsen först, vilket ofta leder oss att skära ut allmänna kostnader som vi upplever eller kan uppleva i framtiden.

I designens värld snabba beslut mottaglighet; och kreativt innehåll måste vi först och främst vara vaksamma. Och att vara vaksam kommer ner till att veta när vi har ett problem i våra lyhörda mönster och hur du fixar det. Idag gör vi just det.

Responsiva bilder har varit ett tufft ämne i flera år, eftersom det ofta har varit mer än en "hack-around" -väg för att göra dina bilder lyhörda. Låt oss gå igenom det här ämnet från grunden och börja med hur vi brukade göra det.

Det förflutna

Boston Globe-webbplatsen är ett klassiskt exempel på flytande design.

Innan vi går längre behöver vi gå över hur en webbsida beter sig så vi kan prata om hur det fungerar. En snabb sammanfattning: HTML-filen laddas i följd, sedan begärs resurser omedelbart när de stöter på, skript utförs sedan omedelbart och sedan skickas alla cookies med HTTP-förfrågningar.

Processen med begäran / dras / hämtas / etc. har lagt en begränsning av hur kreativa vi kan få med dessa metoder. Men det har verkligen inte stoppat folk tidigare. Här är några sätt de har fått runt detta.

Byter attributet "src"

Vi kan använda javascript för att skriva om attributet "src", så att det drar och ersätter en bild baserat på webbläsarens storlek, vilket verkar fungera bra. Detta har varit det som många har använt tidigare. Problemet med detta är att det använder en dubbel HTTP-begäran. Först drar den den ursprungliga bilden, och sedan ersätter den den med javascript'd-bilden. Du gör i stort sett mer än vad du skulle ha gjort om du inte gjorde någonting på allt, trots att det verkar som att det fungerar.

Finns det lösningar för detta? Det finns faktiskt!

Det finns en metod som många använder där vi lägger en 1px gif-bild på webbplatsen i stället för den faktiska bilden så att i stället för att hämta två bilder till priset på två får du i huvudsak två till priset av en - men det är inte Det är inte heller bra. I det här fallet gör du fortfarande två HTTP-förfrågningar.

Detta innebär också att du är beroende av javascript för alla bilder. Det är knepigt, eftersom mobila operatörer kan röra med javascript, några andra saker kan bryta javascript, och ett överraskande antal webbplatsanvändare inaktiverar det medvetet.

NoScript

En annan metod som har fått lite popularitet är att använda taggen "noscript" för mobila bilder och sedan använda javascript för att byta ut det för en högre upplösningsbild. Detta tycktes ta samhället med storm en stund tillbaka på grund av möjligheten att byta från mobil upp till high-rez-versioner, och det sammanföll verkligen med den stora felinterpretationen av "mobil först" som jag nämnde ovan. Detta fungerar inte i IE. För en Internet Explorer-lösning måste du skriva följande:

Men problemet med det är att det nu inte fungerar i den populära webbläsaren Firefox. Så vad vi måste göra är:

Som du kan se är det inte så enkelt och det är verkligen inte särskilt robust. Det finns verkligen inget sätt att göra det rent eller enkelt alls. Faktum är att många av de personer som arbetar i lyhörda bilder har försökt lösa dessa problem i flera år, och har verkligen inte blivit för långt med det.

Vanligtvis har de gjort en typ av javascript för att arbeta genom problemet och accepterade dubbla http-förfrågan som en nödvändig ondska.

Server sida lösning?

Den typiska serverns lösning för detta är att använda javascript för att ersätta "src" med HTML5 "-data-highsrc" och lagra webbläsarens storlek i en cookie. Men skickar den samma flera HTTP-förfrågningar som tidigare.

Anledningen till att folk tyckte om den här metoden var att de tyckte att det var säkrare med tanke på att de lagrade webbläsarens storlek i en kaka och de kände att det fanns mindre marginal för fel. I själva verket är det emellertid inte korrekt. Här är några anledningar till varför denna metod inte är lika stor som de andra metoderna hittills. Det tillåter bara hämtning av stora och små bilder, det handlar inte om enhetsorienteringsändringar, och det bryter dåligt för att webbläsare nu hämtar bilder. Också en stor nedgång är att ibland är kakor inte inställda tillräckligt snabbt vilket resulterar i att skrivbordet får bilder avsedda för mobiler.

På grund av allt detta, nämligen ett fel på lämpliga alternativ på servern och klientsidan, behöver vi en ny lösning.

Och det här är rätt där adaptiva bilder metod steg i.

Den adaptiva bildmetoden

Adaptiva bilder är den sanna lösningen på hela denna konfrontation. Det är bokstavligen lika lätt som ett drag och släpp på din server och du är allt klar. Den här adaptiva metoden använder en htaccess-fil, en php-fil och en enda rad javascript, och det är det .

Du drar helt enkelt htaccess och php-filen till din rotkatalog och lägger till javascript i huvudet på din indexfil och du är klar. Inget annat att ens oroa sig för. Nu erbjuder det ett stort antal anpassningar, men vi kommer att komma in i det nära slutet.

För nu kan vi hoppa direkt in i början av den adaptiva metoden.

Målen

Låt oss först identifiera projektets mål. Skaparen av adaptiva bilder, Matthew Wilcox , har identifierat dessa som hans mål för denna lösning:

• Måste vara lätt att installera och använda.
• Måste vara så lågt underhåll som möjligt.
• Måste arbeta med befintligt innehåll, inga markupredigeringar eller anpassade CMS behövs.
• Måste tillåta flera versioner.
• Måste arbeta med designbrytningspunkter och inte brytpunkter för enheter.
• Ska enkelt bytas ut när en överlägsen lösning kommer fram.

Och dessa mål för detta projekt bygger alla på antagandet att

Taggar på din webbplats använder redan den högsta upplösningsbilden, som enligt min mening är rimligt antagande. Vanligtvis kommer vi att ha de bästa bilderna på vår sida redan, som jag vet väldigt få webbdesigners som sätter sina bästa bilder på telefonversioner och deras värsta på webben. Det är också ganska självförklarande.

Hur det fungerar

Vi ska bara dyka in i koden, men innan vi gör det, pratar vi om hur det fungerar på en högre nivå. Enkelt uttryckt upptäcker javascript de största skärmdimensionerna som finns tillgängliga på den enheten och lagrar den i en kaka. .Htaccess-filen pekar sedan vissa förfrågningar till adaptive-images.php, och sedan baseras på dessa regler gör PHP-filen lite bearbetning. Inuti är bearbetningen där den verkliga magien händer, och med alla medel skulle jag rekommendera alla att läsa denna kolla in PHP-filen. Det är det vackraste skrivna PHP jag har sett i år . Det är definitivt ett måste-se.

Låt oss nu flytta in på detaljerna om hur dessa filer fungerar och samspelar med varandra. Här kommer vi att diskutera allt du får när du laddar ner paketet från webbplatsen för adaptiva bilder.

Javascript-koden

Den javascript-kod du behöver kopiera är detta:

Och det måste gå före alla andra javascript i huvuddelen . Också värt att notera är att om du skulle vilja utnyttja näthinnans skärm på någon av de senaste Apple-produkterna kan du använda följande javascript-linje:

Som du kan se är den sista raden mycket lika och den enda skillnaden är att den kommer att skicka högupplösta bilder till sådana enheter som tillåter det - var medveten om att det kommer att innebära långsammare nedladdningar för näthinnanvändare, men bättre bilder förstås.

Observera att detta fortfarande måste vara det första javascript i huvuddelen.

.Htaccess-filen

En .htaccess-fil är helt enkelt ett förhöjd registerhanteringsverktyg, och om du redan har en webbplats som du funderar på med hjälp av adaptiva bilder då har du än mer än en gång en .htaccess-fil, så det vi behöver göra är att lägga till lite innehåll . Öppna det helt enkelt (det finns alltid i rotkatalogen på din webbplats) och lägg till följande:

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 ----------------------------------------

Nu är den intressanta delen av det här att du verkligen inte behöver göra några förändringar alls.

Typiskt vill webbplatser ha alla sina bilder att vara mottagliga och spela bra med alla formfaktorer så att du verkligen inte behöver utesluta någonting. Om du vill eller behöver, finns det alternativet där men kom ihåg att du vill vara lyhörd och progressiv. .Htaccess filen här är perfekt för detta projekt, och fungerar som en nyckel i hela processen så det kan du verkligen inte använda den här metoden. Som ett resultat måste du se till att du inte glömmer bort det här, eller lägg till det om du inte har en.

PHP-filen

Allt du behöver göra med detta är att dra och släpp det i din rotkatalog, och det tar hand om allt annat. Det finns en liten anpassningsbar sektion som du kan se här:

/* 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 -------------- */

Som det står om resten av manuset, om du inte vet vad du gör så varför inte bara lämna det ensam? Om du gillar tinkering låt oss bara kasta lite ljus här.

$ upplösningar är skärmens bredder vi ska arbeta med. I standarden lagras en nybildad bild för stora skärmar, vanliga skärmar, tabletter, telefoner och små telefoner.

$ cache_path om du inte gillar att de cachade bilderna skrivs till den mappen, kan du lägga den någon annanstans. Ställ bara in sökvägen till mappen här och se till att du skapar den på servern.

$ sharpen kommer att göra en subtil skärpa på de avskalade bilderna. Vanligtvis är det bra, men du kanske vill stänga av den om din server är väldigt upptagen.

$ watch_cache om servern blir mycket upptagen kan det vara så att prestanda ändrar till FALSE. Det betyder emellertid att du måste manuellt rensa ut cachemappen om du ändrar en resurs.

Nu när du vet allt om anpassningen kan du vara nyfiken, precis vad gör PHP-filen exakt? Nåväl, låt oss gå igenom det steg för steg:

• Den läser kakan och passar resultatet i brytpunkter som matchar CSS-brytpunkterna
• Den kontrollerar sin egen cachekatalog för att se om en version av den begärda filen finns vid den punkten som bryts.
• Om det gör så jämför det datumen med det och ursprunget för att säkerställa att cacheversionen inte är gammal.
• Om det inte finns cachade då skapas en återkalad bild endast om källbilden är större än brytpunktstorleken. Sedan caches det för framtida bruk.

Ai-cookie.php-filen

Du får också den här filen "ai-cookie.php" i din mapp när du laddar ner det adaptiva bildpaketet, men det kan faktiskt raderas eftersom det har att göra med en alternativ metod för att upptäcka användarnas skärmstorlek. Skaparen av adaptiva bilder rekommenderar att du tar bort detta och går med standardmetoden.

Och det handlar om innehållet i det paketet. Nu ska du se till att du tittar på alla filerna du poppar in på din webbplats och dubbelkollar du använder bästa praxis med mediefrågor. Också, var noga med att ställa frågor om du har något på det här innehållet eller mediefrågor i allmänhet eftersom jag älskar att prata om den typen av saker. Låt oss nu sammanfatta vad vi har här.

I summering:

Det är verkligen ett fascinerande system, och en som jag förutser att jag ska använda i de kommande åren. För det första, vad kan jag justera med det här systemet som helhet?

Med det här systemet kan du:

• Ange brytpunkter för att matcha din CSS.
• Ange var du vill ha cachemappen.
• Ställ in kvaliteten på de genererade JPG-filerna.
• Ange hur länge webbläsare ska cache bilden för.
• Skärpa genererade bilder.
• Alternativt javascript för att upptäcka höga DPI-enheter.

I framtiden skulle jag också alla älska det att upptäcka bandbredd på ett system, i stället för enhetsstorlek eller webbläsarbredd. Eftersom det är den verkliga nyckeln att bestämma vilken bild som ska skickas var, men från och med nu finns det inget genomförbart sätt att göra det.

Besök adaptive-images.com för att ladda ner de filer jag har refererat till i den här artikeln.