Planlegging for Responsive Bilder

0
15

Første gang jeg laget et bilde responsiv, det var så enkelt som koder for disse fire linjer:

img {
maks bredde: 100%;
høyde auto; /* standard */
}

Selv om det virket for meg som en utvikler, det var ikke det beste for publikum. Hva skjer hvis bildet i src-attributtet er tung? På high-end utvikler enheter (som meg med 16 GB RAM), er det få eller ingen ytelse oppstår problemer. Men på low-end enheter? Det er en annen historie.

Illustrasjonen over er ikke detaljert nok. Jeg er fra Nigeria, og dersom produktet fungerer i Afrika, så du bør ikke se på det. Se på denne grafen i stedet:

I dag, de lavest priset iPhone selger for et gjennomsnitt på $300. Gjennomsnittlig Afrikansk kan ikke råd til det selv om iPhone er en terskel for måling rask enheter.

Det er alle business analysis du må forstå at CSS bredde ikke klippe det for responsive bilder. Hva ville du spørre? La meg først forklare hva bilder er ca.

Nyanser av bilder

Bilder er tiltalende for brukerne, men som er en møysommelig utfordring for oss utviklere som må vurdere følgende faktorer:

  • Format
  • Disk størrelse
  • Gjengi dimensjon (layout bredde og høyde i nettleseren)
  • Original dimensjon (original bredde og høyde)
  • Størrelsesforholdet

Så, hvordan gjør vi plukke de riktige parametere og smertefritt mikse og matche dem for å levere en optimal opplevelse for publikum? Svaret avhenger i sin tur av svarene på disse spørsmålene:

  • Er det bilder som er opprettet dynamisk av brukeren eller statisk med et design team?
  • Hvis bredden og høyden på bildet er endret uforholdsmessig, ville det påvirke kvaliteten?
  • Alle bildene er gjengitt på samme bredde og høyde? Når gjengitt, må de har bestemte proporsjoner, eller som er helt annerledes?
  • Det må tas i betraktning når du presenterer bildene på forskjellige viewports?

Skriv ned svarene dine. De vil ikke bare hjelpe deg til å forstå dine bilder — deres kilder, tekniske krav og slikt — men også gjøre deg i stand til å ta de riktige valgene i levering.

Foreløpig strategier for bilde levering

Bildet levering har utviklet seg fra en enkel tillegg av Nettadresser til src-attributtet til komplekse scenarier. Før vi ser på dem, la oss snakke om flere alternativer for å presentere bildene, slik at du kan utforme en strategi for hvordan og når du skal levere og yte ditt.

Først må du finne kilder til bilder. På den måten, antall obskure kant tilfeller kan bli redusert, og bilder kan behandles så effektivt som mulig.

Generelt, bildene er enten:

  • Dynamisk: Dynamiske bilder er lastet opp av publikum, etter å ha blitt generert av andre hendelser i systemet.
  • Statisk: En fotograf, designer, eller du (utbygger) lage bilder for nettstedet.

La oss grave i strategi for hvert av denne typer bilder.

Strategi for dynamiske bilder

Statiske bilder som er ganske lett å jobbe med. På den annen side, dynamiske bilder er vanskelig og utsatt for problemer. Hva kan gjøres for å redusere sin dynamiske karakter og gjøre dem mer forutsigbar som statiske bilder? To ting: validering og intelligent beskjæring.

Validering

Satt ut et par regler for publikum på hva som er akseptabelt og hva som ikke er det. I dag kan vi validere alle egenskapene til et bilde, nemlig:

  • Format
  • Disk størrelse
  • Dimensjon
  • Størrelsesforholdet

Merk: Et bilde er gjengi størrelse fastsettes under rendring, derav ingen validering på vår del.

Etter validering, en forutsigbar sett av bilder vil dukke opp, som er enklere å konsumere.

Intelligent Beskjæring

En annen strategi for håndtering av dynamiske bilder er å beskjære dem på en intelligent måte for å unngå å slette viktig innhold og refokusere på (eller re-center) primær innhold. Det er vanskelig å gjøre. Men, du kan dra nytte av kunstig intelligens som tilbys av åpen-kilde verktøy eller SaaS selskaper som spesialiserer seg i bildet ledelse. Et eksempel er i de kommende avsnittene.

Når en strategi har vært naglet ned for dynamiske bilder, oppretter du en regel tabell med alle layout alternativer for bilder. Nedenfor er et eksempel. Det er også verdt å se nærmere på analytics for å finne de viktigste enheter og viewport størrelser.

Nettleser Vindu
HP Laptop
PS4 Slank
Kameralinsen / Bildeforhold
< 300 100 vw 100 vw 100 vw/1:2
300 – 699 100 vw 100 vw 100 vw/1:1
700 – 999 50 vw 50 vw 50 vw/1:1
> 999 33 vw 33 vw 100 vw/1:2

Den nakne (sub-optimal) minimum

Nå satt til side kompleksiteten av respons og bare gjøre det vi gjør best — enkel HTML-koding med maksimal bredde CSS.

Følgende kode gjengir et par bilder:

<main>
<figur>
<img src=”https://res.cloudinary.com/…w700/ps4-slim.jpg” alt=”PS4 Slank”>
</figure>

<figur>
<img src=”https://res.cloudinary.com/…w700/x-box-one-s.jpg” alt=”X-Boksen One S”>
</figure>

<!– Flere bilder –>

<figur>
<img src=”https://res.cloudinary.com/…w700/tv.jpg” alt=”Tv”>
</figure>
</main>

Merk: Den ellipse (…) i bildet URL angir mappen, dimensjon, og beskjæring av strategi, som er for mye detaljer å inkludere, derav trunkering for å fokusere på det som betyr noe nå. For den komplette versjonen, se den CodePen eksempel ned nedenfor.

Dette er den korteste CSS eksempel på Internett som gjør bilder responsive:

/* Foreldrene beholder */
main {
visning: rutenett;
grid-mal-kolonner: repeat(auto-fyll, minmax(300px, 1fr));
}

img {
maks bredde: 100%;
}

Hvis bildene ikke har lik bredde og høyde, erstatte maks bredde med objekt-fit og angi verdien som skal dekke.

Jo Franchetti blogg innlegget på felles responsive layout med CSS Rutenett forklarer hvordan verdien av grid-mal-kolonner gjør det hele layout tilpasset (responsive).

Se Penn
Grid Galleri av Chris Nwamba (@codebeast)
på CodePen.

Det ovenstående er ikke hva vi er ute etter, men fordi…

  • bildet størrelse og vekt er de samme på begge high-end og low-end enheter, og
  • vi ønsker kanskje å være strengere med bildet bredde i stedet for å sette den til 250 og la den vokse.

Vel, denne delen dekker “minimum” så det er det.

Layout variasjoner

Det verste som kan skje med et bilde layout er vanstyre av forventninger. Fordi bilder kan ha varierende dimensjoner (bredde og høyde), må vi spesifisere hvordan å gjengi bildene.

Bør vi intelligent beskjære alle bildene til en jevn dimensjon? Bør vi beholde størrelsesforholdet for en viewport og endre forholdet for en annen en? Ballen er i vår domstolen.

I tilfelle av bilder i et rutenett, slik som i eksemplet ovenfor med forskjellige sideforhold, kan vi bruke teknikken av art direction til å gjengi bildene. Art direction kan bidra til å oppnå noe som dette:

For detaljer om oppløsning bytte og art direction i responsive bilder, lese Jason Grigsby s-serien. En annen informativ referanse er Eric Portis er Responsive Bilder Guide, del 1, 2, og 3.

Se koden eksempel nedenfor.

<main>
<figur>
<bilde>
<source media=”(min-width: 900px)” srcset=”https://res.cloudinary.com/…/c_fill,g_auto,h_1400,w_700/camera-lens.jpg”>

<img src=”https://res.cloudinary.com/…/c_fill,g_auto,h_700,w_700/camera-lens.jpg” alt=”kameralinse”>
</bilde>
</figure>

<figur>
<bilde>
<source media=”(min-width: 700px)” srcset=”https://res.cloudinary.com/…/c_fill,g_auto,h_1000,w_1000/ps4-pro.jpg”></source>
</bilde>
<img src=”https://res.cloudinary.com/…/c_fill,g_auto,h_700,w_700/ps4-pro.jpg” alt=”PS4 Pro”>
</figure>
</main>

I stedet for gjengivelse av bare én 700px bredt bilde, vi gjengi 700px x 700px bare hvis viewport bredden overskrider 700px. Hvis vinduet er større, da følgende gjengivelse oppstår:

  • Kameralinsen bilder er gjengitt som et portrett bilde av 700px i bredde og 1000px. i høyden (700px x 1000px).
  • PS4 Pro bildene er gjengitt på 1000px x 1000px.

Art direction

Ved å beskjære bilder for å få dem til å reagere, vi kan utilsiktet slette den primære innhold, som ansiktet på motivet. Som nevnt tidligere,