Bilder er beryktet en av de mest utfordrende aspektene av responsivt webdesign. I dag ser vi på hvordan element, en løsning på problemet med responsive bilder, kan brukes akkurat nå.
Først, problemet
Dagene med fast bredde, piksel perfekt webdesign er godt og virkelig bak oss. I dagens dag med widescreen-skjermer, internett-TVer, multimediatabletter og smarte telefoner, må våre design nå imøtekomme alt fra 320px bred opp til potensielt så høyt som 7680px bredt.
Sammen med dette multi-oppløsnings landskapet kommer et behov for at bilder strekker seg eller krympes for å passe disse vilt varierende kravene. Dette kan vise seg å være noe av et problem gitt at, med unntak av vektorgrafikk, har det store flertallet av bilder spesifikke pikselbaserte bredder som ikke endres.
Så hva gjør vi?
Den nåværende, vanligste løsningen
Som en generell regel finner du følgende i omtrent hvilket som helst responsivt nettsteds CSS:
img maksimal bredde: 100%; høyde: auto;
Denne koden bruker maksimal bredde: 100%; Innstilling for å sikre at bilder aldri går utover bredden på foreldrebeholderen. Hvis foreldrebeholderen krympes under bredden på bildet, vil bildet skalere sammen med det. De høyde: auto; Innstillingen sikrer at bildens aspektforhold blir bevart når dette skjer.
Ett flytende bilde for alle forhold
Det løser problemet i en respekt, slik at vi kan vise det samme bildet under mange forskjellige forhold. Men det tillater oss ikke å spesifisere forskjellig bilder for ulike forhold.
En ny løsning:
er et nytt element som er satt til å bli en del av HTML5.
Det vil bringe prosessen for å plassere responsive bilder opp til hastighet med måten den nåværende og elementene fungerer. Det vil tillate deg å plassere flere kilde koder, som spesifiserer forskjellige bildefilnavn sammen med betingelsene de burde lastes inn.
Det vil tillate deg å laste et helt annet bilde avhengig av:
Mediesøkresultater, f.eks. visningshøyde, bredde, orientering
Pixel tetthet
Dette betyr igjen at du kan:
Last inn passende filstørrelser, slik at du får best mulig utnyttelse av tilgjengelig båndbredde.
Legg ulikt beskårne bilder med forskjellige størrelsesforhold for å passe layoutendringer på forskjellige bredder.
Last inn høyere oppløsningsbilder for høyere pixeldensitetsdisplayer.
Ulike bilder servert, avhengig av omstendighetene
Hvordan gjør Arbeid?
De grunnleggende trinnene med å jobbe med er:
Lag åpning og lukking tags.
Innenfor disse kodene lager du en element for hvert spørsmål du vil kjøre.
Legg til en media Attributt som inneholder søket ditt på ting som visningshøyde, bredde, orientering osv.
Legg til en srcset Tilordne med tilhørende bildefilnavn for å laste inn.
Legg til ekstra filnavn i din srcset Tilordne hvis du vil angi forskjellige pikseldensiteter, f.eks. Retina viser.
Legg til en tilbakebetaling element.
Her er et grunnleggende eksempel som kontrollerer om visningsporten er mindre enn 768px, så hvis det lastes et mindre bilde:
Du vil legge merke til at syntaksen brukes i media Attributtet er det samme som du kan være vant til fra å lage CSS-mediesøk. Du kan bruke de samme kontrollene, noe som betyr at du kan spørre max bredde, en minstebredde, max-høyde, min-høyde, orientering og så videre.
Du kan bruke disse kontrollene til å gjøre ting som å legge til landskap eller portrettversjoner av et bilde avhengig av enhetens orientering, og du kan fortsatt blande i størrelsesforespørsler samtidig. For eksempel:
Koden ovenfor laster en mindre, landskapsskåret versjon av bildet på en mindre, landskapsrettet enhet. Den laster en større versjon av det samme bildet på en større landskapsrettet enhet.
Hvis enheten er portrett orientert, laster den en portrett beskåret versjon, med liten størrelse på en liten enhet eller i stor størrelse på en stor enhet.
Hvis du vil gi forskjellige oppløsningsversjoner av bildene dine for høyere tetthetsdisplayer, gjør du det ved å legge til ekstra filnavn i srcset Egenskap. For eksempel, la oss se på vår første kodestykke ovenfra med håndtering for Retina 2x oppløsning lagt til:
Medieforespørselen evalueres fortsatt først, slik at du kan kontrollere dimensjonene bildet ditt vises på på skjermen. Da vil skjermens piksel tetthet bli sjekket, og hvis høyere tetthet både støttes og tillates av brukerens preferanser, vil den høyere tetthetsversjonen av bildet lastes inn.
Ved hjelp av I dag
Foreløpig innfødt implementering for er i verkene for Chrome, Firefox og Opera. I fremtiden er det sannsynlig at vi vil se omfattende støtte som andre nettlesere også får tak i. Men for øyeblikket er støtten fremdeles fremdeles.
I mellomtiden trenger du ikke vente hvis du vil begynne å bruke akkurat nå. Du må bare bruke Picturefill 2.0; en polyfill levert av de klare folkene på Filament Group.
Etter nedlasting av picturefill.js fil til prosjektet ditt, det kan implementeres ved ganske enkelt å laste det inn i nettstedet ditt:
Det er også et alternativ å laste skriptet asynkront for økt effektivitet, som du kan lese om i Picturefills dokumentasjon.
Med dette skriptet lastet, ble elementet vil fungere som jeg har forklart, med bare noen få begrensninger.
Bildefyllingsbegrensninger
IE9
Picturefill fungerer fint med andre IE-versjoner, men IE9 gjenkjenner ikke kilde elementer som er pakket inn bilde tags. For å komme seg rundt dette, krev du kildemedlemmene betinget video merker som vil gjøre dem synlige for IE9, for eksempel:
Android 2.3
Som iE9, kan Android 2.3 ikke se kilde elementer inne i a bilde element. Men det kan forstå srcset attributt når det brukes på en vanlig måte img stikkord. Pass på at du alltid inkluderer tilbakebetaling img element med standard filnavn i srcset attributt for Android 2.3 og andre nettlesere som kan ha det samme problemet.
Krever JavaScript og Native Media Query Support
Da dette er en JavaScript-basert løsning, krever det derfor at JavaScript aktiveres i nettleseren. Picturefill 2.0 gir ikke en "no-js" løsning fordi hvis det gjorde det, vil flere bilder vises når opprinnelig nettleser støtter for er rullet ut. Men du har muligheten til å bruke Picturefill 1.2 hvis et "no-js" -alternativ er et must for deg.
Det andre kravet Picturefill har, er for mediefunksjonsstøtte for å aktivere spørringene i media attributt til arbeid. Alle moderne nettlesere støtter medieforespørsler, med IE8 og lavere er den eneste ikke-støttende nettleseren med en liten gjenværende brukerbase.
Mulige ekstra HTTP-forespørsler
I nettlesere som har opprinnelig støtte for srcset, men ikke ennå for bilde, det er mulig filnavnet som er angitt i tilbakebetaling img element kan bli bedt om før et bedre passende bilde fra kilde elementene er bestemt.
Dette er bare et midlertidig problem, og vil gå bort en gang innfødt bilde implementeringen er rullet ut.
Mer informasjon
Les mer om Picturefill 2.0 og last den ned for prosjektet på Picturefill-siden
Få full informasjon om element fra responsiveimages.org.
Share
Ett flytende bilde for alle forhold
Accentsconagua
Ulike bilder servert, avhengig av omstendighetene
