Adaptive Images: Løsning af det Responsive Image Problem

Responsivt design er ikke kun en ændring i layout eller brug af medieforespørgsler her og der, det er en tankestatus og en handling, der har en klar betydning.

Responsivt design siger i det væsentlige, at vi er mere opmærksomme på indholdet end tidligere. Faktisk bekymrer vi os så meget, at vi selv optimerer indhold, der skal læses og ses på enheder, der endnu ikke er blevet lanceret.

I det væsentlige forsøger vi at præsentere oplysninger så klart som muligt og være så effektive som muligt alle sammen på samme tid. Her er en almindelig misforståelse; mobile første måder at designe som om hele dit websted drejer rundt om mobiltelefonen. Det er ikke helt korrekt. Mobile først betyder simpelthen at designe for den enkleste oplevelse først, hvilket ofte fører til, at vi reducerer omkostninger, som vi oplever eller kan opleve i fremtiden.

I verden af ​​design; hurtige beslutninger; lydhørhed; og kreativt indhold skal vi først og fremmest være opmærksomme. Og være vågent kommer ned til at vide, hvornår vi har et problem i vores lydhørige design, og hvordan du løser det. I dag gør vi bare det.

Responsive billeder har været et hårdt emne i årevis, da der typisk har været mere end en "hack-around" måde at gøre dine billeder lydhøre. Lad os gå gennem dette emne fra bunden, begyndende med, hvordan vi plejede at gøre det.

Fortiden

Boston Globe-webstedet er et klassisk eksempel på flydende design.

Før vi går videre, skal vi gå over, hvordan en webside opfører sig, så vi kan tale om, hvordan det virker. En hurtig gennemgang: HTML'en læsses i rækkefølge, så ressourcer bliver straks anmodet om, da de opstår, scripts udføres straks, og derefter sendes alle cookies med HTTP-anmodninger.

Processen med anmodning / trukket / hentning / etc. har lagt en smule begrænsning på, hvordan kreative vi kan få med disse metoder. Men det har bestemt ikke stoppet folk i fortiden. Her er et par måder, de har fået omkring dette.

Udskiftning af attributten "src"

Vi kan bruge javascript til at omskrive attributten "src", så den trækker og erstatter et billede baseret på browserstørrelse, som ser ud til at fungere fint. Dette har været, hvad mange mennesker har brugt tidligere. Problemet med dette er, at det bruger en dobbelt HTTP-anmodning. Først trækker det det oprindelige billede, og det erstatter det med javascript'd billedet. Du gør i det væsentlige mere, end du ville have gjort, hvis du ikke gjorde noget på, selvom det ser ud til at virke.

Er der løsninger på dette? Der er faktisk!

Der er en metode, som mange mennesker bruger, hvor vi lægger et 1px gif billede på stedet i stedet for det faktiske billede, så i stedet for at hente to billeder til prisen på to, får du i det væsentlige to til prisen på en - men det er ikke Det er heller ikke ideelt. I dette tilfælde stiller du stadig to HTTP-anmodninger.

Det betyder også, at du er afhængig af javascript for alle billeder. Det er vanskeligt, fordi mobiloperatører kan rod med javascript, et antal andre ting kan bryde javascript, og et overraskende antal websitebrugere deaktiverer det med vilje.

NoScript

En anden metode, der har fået en vis popularitet, er at bruge taggen "noscript" til mobile billeder og derefter bruge javascript til at bytte det ud til et højere opløsningsbillede. Dette syntes at tage samfundet med storm engang tilbage på grund af evnen til at bytte fra mobile op til high-rez versioner, og det faldt virkelig sammen med den brede fejlfortolkning af "mobile først" jeg nævnte ovenfor. Dette virker ikke i IE. For en Internet Explorer-løsning skal du skrive følgende:

Men problemet med det er, at det nu ikke virker i den populære webbrowser Firefox. Så hvad vi skal gøre er:

Som du kan se, er det ikke meget enkelt, og det er bestemt ikke meget robust. Der er virkelig ingen måde at gøre det rent eller simpelt overhovedet. Faktisk har mange af de mennesker, der arbejder i lydhøre billeder, forsøgt at løse disse problemer i årevis nu, og har virkelig ikke været for langt med det.

Typisk hvad de har gjort bruges en form for javascript til at arbejde igennem problemet og accepterede dobbelt http-anmodningen som et nødvendigt onde.

Server side løsning?

Den typiske server side løsning til dette er at bruge javascript til at erstatte "src" med HTML5 "-data-highsrc", og gem browserens størrelse i en cookie. Selvom det så sender de samme flere HTTP-anmodninger som tidligere.

Grunden til, at folk kunne lide denne metode var, at de følte, at det var mere sikkert, da de lagrede browserstørrelsen i en cookie, og de følte, at der var mindre fejlmargin. I virkeligheden er det dog ikke korrekt. Her er nogle få grunde til, at denne metode ikke er så stor som de andre metoder, der er opført hidtil. Det gør det kun muligt at hente store og små billeder, det handler ikke om enhedsretningsændringer, og det bryder dårligt, fordi nu browsere forudser billeder. Også en stor tilbagegang er, at nogle gange er cookies ikke sat hurtigt nok, hvilket resulterer i, at skrivebordet får billeder beregnet til mobiltelefoner.

På grund af alt dette, nemlig en mangel på passende muligheder på serveren og klientsiden, har vi brug for en ny løsning.

Og det er her, hvor adaptive billeder metode trin i.

Den adaptive billeder metode

Adaptive billeder er den rigtige løsning på hele denne konfrontation. Det er bogstaveligt sagt lige så nemt som en træk og slip på din server, og du er helt klar. Denne adaptive metode bruger en htaccess-fil, en php-fil og en enkelt linje af javascript, og det er det .

Du trækker blot htaccess og php-filen til din rodmappe og tilføjer javascript til hovedet på din indeksfil, og du er færdig. Intet andet end at bekymre sig om. Nu tilbyder det et væld af tilpasninger, men vi kommer ind i det tæt på slutningen.

Lad os nu hoppe lige ind i begyndelsen af ​​den adaptive metode.

Målene

Lad os først identificere projektets mål. Skaberen af ​​adaptive billeder, Matthew Wilcox , har identificeret disse som hans mål for denne løsning:

• Må være let at oprette og bruge.
• Skal være så lav vedligeholdelse som muligt.
• Er nødt til at arbejde med eksisterende indhold, der kræves ingen markupredigeringer eller brugerdefineret CMS.
• Skal tillade flere versioner.
• Skal arbejde med design breakpoints og ikke enhed breakpoints.
• Skal nemt udskiftes, når en overlegen løsning ankommer.

Og disse mål for dette projekt er alle afhængige af antagelsen om, at

tags på dit websted bruger allerede det højeste opløsningsbillede, som efter min mening er rimelig antagelse. Typisk har vi de bedste billeder på vores websted allerede, som jeg kender meget få webdesignere, der sætter deres bedste billeder på telefonversioner og deres værste på nettet. Det er også ret selvforklarende.

Hvordan det virker

Vi skal bare dykke ind i koden, men inden vi laver, skal vi snakke om, hvordan det virker på et højere niveau. Simpelthen registrerer javascript de største skærmdimensioner, der er tilgængelige på den pågældende enhed, og gemmer den i en cookie. .Htaccess-filen peger derefter på visse anmodninger til adaptive-images.php, og derefter baseret på disse regler gør PHP-filen noget behandling. Inde i forarbejdning er hvor den virkelige magi sker, og på alle måder vil jeg anbefale alle at læse denne tjekke PHP-filen. Det er den smukkeste skrevet PHP jeg har set i år . Det er absolut et must-see.

Lad os nu gå ind på detaljerne om hvordan disse filer fungerer, og samspil med hinanden. Her diskuterer vi alt, hvad du får, når du downloader pakken fra webstedet til adaptive billeder.

Javascript-koden

JavaScript-koden, du skal kopiere, er dette:

Og det skal gå før andre javascript i dit hovedafsnit . Det er også værd at bemærke, at hvis du vil udnytte nethinden på nogen af ​​de nyere Apple-produkter, kan du bruge følgende javascript-linje:

Som du kan se, er den sidste linje meget ens, og den eneste forskel er, at den vil sende billeder med højere opløsning til sådanne enheder, der tillader det. Vær opmærksom på, at det vil betyde langsommere downloads til nethinden, men selvfølgelig bedre billeder.

Bemærk, at dette stadig skal være det første javascript i dit hovedafsnit.

.Htaccess filen

En .htaccess-fil er simpelthen et glorificeret bibliotekshåndteringsværktøj, og hvis du allerede har en hjemmeside, som du overvejer at bruge adaptive billeder på, har du sandsynligvis allerede en .htaccess-fil, så det vi skal gøre er at tilføje noget indhold . Du skal blot åbne den (den er altid placeret i rodmappen på dit websted), og tilføj følgende:

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 er den interessante del af dette, at du virkelig ikke behøver at foretage nogen ændringer overhovedet.

Typiske websteder vil have alle deres billeder til at være lydhør og spille godt med alle formfaktorer, så du behøver virkelig ikke at udelukke noget. Hvis du vil eller har brug for det, er der mulighed her, men husk at du vil være lydhør og progressiv. .Htaccess filen her er den perfekte til dette projekt, og tjener som en nøgle i hele processen, så uden det kan du virkelig ikke bruge denne metode. Som følge heraf skal du sørge for at du ikke glemmer dette, eller tilføj det, hvis du ikke har en.

PHP-filen

Alt du har at gøre med dette er at trække og slip det i din rodmappe, og det vil tage sig af alt andet. Der er et lille brugerdefineret afsnit som du kan se her:

/* 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 af ​​scriptet, hvis du ikke ved hvad du laver, hvorfor ikke bare lade det være alene? Hvis du kan lide tinkering, lad os bare kaste lidt lys her.

$ opløsninger er skærmens bredder, vi vil arbejde med. I standarden gemmes det et nyt billede for store skærme, normale skærme, tabletter, telefoner og små telefoner.

$ cache_path Hvis du ikke kan lide at de cachelagrede billeder bliver skrevet til den mappe, kan du sætte det et andet sted. Du skal bare lægge stien til mappen her og sørg for at du opretter den på serveren.

$ sharpen vil udføre en subtil skarphed på de forkortede billeder. Normalt er det fint, men du vil måske slukke for den, hvis din server er meget meget travl.

$ watch_cache Hvis din server bliver meget travlt, kan det medvirke til ydeevne for at gøre dette til FALSE. Det vil dog betyde, at du skal manuelt rydde cache-biblioteket, hvis du ændrer en ressource.

Nu hvor du ved alt om tilpasningen, kan du være nysgerrig, hvad gør PHP-filen præcis? Nå, lad os gå igennem det trin for trin:

• Det læser cookien og passer til resultatet i breakpoints, der matcher CSS breakpoints
• Det kontrollerer sin egen cache-mappe for at se, om der findes en version af den anmodede fil ved den pausestørrelse.
• Hvis det gør det, sammenligner det datoerne på det og oprindelsen for at sikre, at cacheversionen ikke er forældet.
• Hvis den ikke findes cached så opretter det kun et rescaled billede, hvis kildebilledet er større end breakpointstørrelsen. Så caches det til senere brug.

Ai-cookie.php filen

Du får også denne 'ai-cookie.php'-fil i din mappe, når du downloader den adaptive billedpakke, men det kan faktisk slettes, da det har at gøre med en alternativ metode til at registrere brugerens skærmstørrelse. Skaberen af ​​adaptive billeder anbefaler dig at slette dette og gå med standardmetoden.

Og det handler om det for indholdet af denne pakke. Sørg nu for at tage et kig på alle de filer, du popper ind på dit websted, og dobbeltsjekke, at du bruger bedste praksis med medieforespørgsler. Sørg også for at stille spørgsmål, hvis du har nogen på dette indhold eller medieforespørgsler generelt, som jeg elsker at tale om den slags ting. Lad os nu opsummere hvad vi har her.

I sammenfatning:

Det er bestemt et fascinerende system, og en, som jeg forudser at være i brug i de kommende år. For det første, hvad kan jeg tilpasse til dette system som helhed?

Med dette system kan du:

• Indstil breakpoints for at matche din CSS.
• Angiv, hvor du vil have cachemappen.
• Indstil kvaliteten af ​​de genererede JPG'er.
• Angiv, hvor længe browsere skal cache billedet til.
• Subtly sharpen genererede billeder.
• Alternativt javascript til at registrere høj DPI-enheder.

I fremtiden vil jeg også alle elske det til at opdage båndbredde på et system, i stedet for enhedens størrelse eller browserbredde. Fordi det er den rigtige nøgle til at bestemme hvilket billede der skal sendes hvor, men fra nu af er der ingen mulig måde at gøre.

Besøg adaptive-images.com at downloade de filer, jeg har henvist til i denne artikel.