Bildens dimensjoner på skjermen måles i piksler: bredde og høyde.

Et bildes kvalitet bestemmes av mindre materielle faktorer: sammensetning, humør, stil, innhold. Men ingen av det er viktig hvis folk blir utålmodige og venter på at filen skal lastes ned.

Webbilder endres i filstørrelse når de komprimeres. Mindre filer er raskere å laste ned, noe som gir en bedre nettleseropplevelse.

Men klare bilder gir også en bedre opplevelse. Hvor mye og hva slags kompresjon bør vi søke? Er det alternativer til disse rotete avgangene?

Her ser vi på noen overraskende fakta om å forberede bildefiler på nettet .

Å lage sider lastes raskt er viktig for å holde oppmerksomheten til besøkende. De er krevende folk disse brukerne, lett skuffet hvis de ikke får umiddelbare resultater. Når de klikker på en lenke, ønsker de målet med en gang.

En av de største flaskehalsene på nettsidene er størrelsen og antallet bilder. Den åpenbare løsningen er å Bruk færre bilder . Men andre teknikker kan hjelpe oss med å få mest mulig ut av hver piksel.

Piksler er informasjon

Den gamle klichéen at et bilde er verdt tusen ord er sant. Tenk på en piksel (kort for "bildeelement") som en informasjonsenhet.

Flere piksler betyr flere data, noe som påvirker både visning og resampling av et bilde. Akkurat som flere ord kan gjøre et avsnitt mer beskrivende, kan flere piksler gjøre et bilde mer informativt. (Selvfølgelig, ved å bruke de riktige ordene, fører det til et bedre avsnitt, akkurat som å bruke de riktige bildene fører til et bedre bilde.)

diagram over hvor færre piksler forteller mindre av en historie

Foto høflighet av Jan Busby .

Mindre bilder tar ikke bare mindre plass - de forteller mindre av en historie. Over, blir det samme bildet i tre forskjellige størrelser gradvis vanskeligere å "lese".

Det største bildet viser tydelig modellens øyenvipper, tenner og tråder av hår. Det midtre bildet taper disse detaljene. Hvor lenge er de vippene? Ler hun? Det er vanskelig å fortelle. Det minste bildet ligner likevel en person, men bare med litt fantasi. Et bilde av et menneskelig ansikt på mindre enn 400 piksler er vanligvis ikke gjenkjent.

Selv om små bilder er vanskeligere å se, er deres størrelse ikke alltid et problem. Enkle ikoner med enkle meldinger trenger ikke mange piksler. Mange piksler kan være nødvendig for å vise en persons portrett: deres uttrykk, egenskaper, klær og bakgrunn. Men en miniatyrbilde til neste portrett i en serie har bare en ting å si.

Spørsmålet er, hva er det minste antall piksler som kreves for å kommunisere "Klikk dette for å se neste bilde"?

diagram som viser hvordan ekstra piksler ikke er nødvendig

Over, kommuniserer hver av pilene "Next." Grafikk A og B er begge veldig lesbare og formidler samme melding, men grafikk A bruker fire ganger så mange piksler for å si det samme.

I den andre enden er grafisk E ikke en pil så mye som en grå og svart blomstring. Det har ikke nok piksler (dvs. nok informasjon) til å være en gjenkjennelig form.

Hvis grafikk A og B bruker flere piksler enn nødvendig, og E ikke kommuniserer, har grafikk C og D akkurat nok piksler til å foreslå en høyre pekende form. Seksti-fire piksler er bare knapt nok til å skape en pilform (eller å spille Space Invaders).

Målet med størrelsen på et bilde er da å gjøre det stort nok i filstørrelse for å fortelle en historie og liten nok til å laste ned raskt.

Finne den "ideelle" filstørrelsen

Mange faktorer påvirker lesbarheten (eller klarheten i informasjonen uttrykt i piksler): Kontrast, emne, fotografen eller kunstnerens erfaring, belysning, detalj, bakgrunnsstøy og ledig plass på siden. Disse bestemmer alle hvor små eller store et bilde skal være.

diagram som viser hvor kvalitet og filstørrelse møtes

Til slutt velger du den riktige bildestørrelsen et dommekall. Men komprimering er mer enn et bytte mellom bildekvalitet og filstørrelse. Forstå hvordan ulike former for kompresjonsarbeid kan påvirke hvordan du forbereder bildene dine.

Teknisk sett er et digitalt bilde et sett med piksler arrangert på et rutenett kalt bitmap. I en rett ukomprimert bitmap har hver piksel sin egen beskrivelse: piksel nr. 1 har en bestemt blanding av rødt, grønt og blått; piksel nr. 2 har en annen blanding; og så videre.

Komprimeringsalgoritmer rekonstruerer en bitmap, ved å bruke mindre informasjon for å beskrive det samme antall piksler. De fleste bildene på nettet tilhører en av to komprimeringstyper: JPG eller LZW (Lempel-Ziv-Welch, oppkalt etter oppfinnerne).

LZW adresserer både bildekvalitet og filstørrelse

GIF og 8-biters PNG- bilder bruker LZW-komprimering for å minimere filstørrelsen. LZW grupperer identiske farger i et bilde per rad.

En fil i dette formatet har en presis liste over hver farge i den. I stedet for å registrere verdiene for rød, grønn og blå for hver sammenhengende rad piksler, gjør denne fargepaletten filen til å ringe etter "farge # 1".

diagram som viser hvordan LZW-komprimering sparer plass

Over, tilordner LZW-komprimering en farge til 15 piksler på rad. Uten LZW-komprimering, vil hver piksel ha sin egen fargeinformasjon. Redundant informasjon øker filstørrelsen. Men LZW er bare effektiv når rader inneholder mange identiske farger i hverandre.

diagram som viser hvordan du bruker LZW-komprimering mer effektivt

Ovenfor har den øverste gruppen piksler mange forstyrrelser. Komprimeringsalgoritmen kan ikke gå mer enn to eller tre piksler uten å måtte opprette en ny gruppe farger. Fordi hver gruppe må spilles inn i filen, opprettes åtte poster i GIF- og PNG-filene.

Den andre gruppen er mye bedre: bare fire grupper av samtidige farger betyr halvparten så mange poster i en GIF- eller PNG-fil.

Som et resultat fungerer GIF-komprimering bedre horisontalt enn vertikalt. Hvis du har valget, gjør detaljene horisontale. Dette er enda viktigere enn den generelle dimensjonen: Et smalt bilde med horisontale striper har en tendens til å komprimere bedre enn et bredt bilde med vertikale striper. Med LZW-komprimering er det detaljene som teller.

diagram over hvordan LZW-komprimering håndterer to bilder med striper

Over, sparing i GIF gjør stor forskjell når bildet blir 90 °: Horisontale striper krever bare 16% av byte som kreves av vertikale striper.

LZW sies å være "lossless" fordi formatet i seg selv ikke endrer bildet. JPG er forskjellig.

JPG klumper kompliserte detaljer

JPG fungerer best for levende fotografier, som den var laget for. Denne kompresjonsplanen klumper piksler i grupper på rundt 8 × 8 ved å blande sine farger litt.

Mer komprimering betyr at pikslene i en 64-pixel klump blir mer lik. Deretter prøver JPG å forholde fire grupper på 8 × 8 piksler til hverandre. Så grupperer de disse gruppene i en annen 2 × 2, og så videre. Denne teknikken kalles "lossy" komprimering fordi den introduserer endringer i filen.

Endringene som JPG-komprimering introduserer til bilder kalles artefakter. Naturligvis gir flere gjenstander bedre kompresjon, men dårligere bildekvalitet.

Illustrasjon av JPG-artefakter som slår opp et anstendig landskapsfoto

Over, en JPG lagret ved 0%, eller full komprimering, gjør sine klumpete gjenstander åpenbare. Hårde kanter og skarp kontrast er JPGs første tegn. For eksempel mister kanten av fjellet mot skyen fokus, og høyre skygge "hopper" til kanten av nærmeste praktiske 8 × 8 klump.

Heldigvis beholder de fleste bilder nok informasjon for å minimere problemet. Folk er gode til å gjenkjenne former, selv om figurene er litt forvrengt.

Photoshop er 19% trick

Her er et tips for Photoshop-brukere: Photoshops "Save for Web" -funksjon har to deler som plutselig endrer kompresjonen. Image → Save for Web lar deg velge mengden komprimering som prosentandel: 0% er den laveste filstørrelsen, 100% den høyeste. Forskjellen mellom kvalitet og filstørrelse blir mer uttalt mellom 19 og 20%.

infographic som viser hvordan Photoshop komprimerer mer under 19%

Legg merke til den plutselige dråpen i filstørrelsen i bildet ovenfor. Hvis bildekvaliteten er mindre viktig for deg enn nedlastingstid, vil komprimering ikke høyere enn 19% oppnå best kvalitet for den laveste størrelsen. Men hvis bildekvaliteten er viktigere, så lagrer du en JPG uten lavere enn 20%, oppnår den laveste størrelsen for best mulig kvalitet. Du finner et lignende punkt på rundt 30 til 32%, men mindre drastisk.

Forskjellene i dette 100 × 100 bildet er bare noen få byte. Men besparelsene legges opp, spesielt i større bilder.

CSS Sprites

Å være filer, alle bilder på en nettside må bli forespurt fra serveren. Disse forespørsler gir serveren ekstra arbeid å gjøre. Hvis du har mange små bilder-ikoner, for eksempel-som har en lignende fargepalett, kan CSS sprites forbedre innlastingstiden.

En CSS-sprite er en enkelt fil som inneholder mange bilder i den. Bruker width , height og background-position Egenskaper i CSS, kan du lage stykker av filen som vises i divs, linker og andre HTML-elementer. Så, en enkelt fil oppfyller flere roller på siden. Fordelen? Bare en fil å laste ned. Ulempen? Det krever litt planlegging.

Legg til noe her

bekreftet

Avbryt

Beklager, tilgang nektet

Neste side

Rediger et bilde

Start opp

Grønn tag


Ikonene ovenfor (og de i denne setningen) kommer fra bare en fil: CSS sprite eksempel . CSS vil sette et bilde og dets dimensjoner i a , men hvert element må reposisjoneres for å passe. Bruker :hover pseudo-selector gjør matteverdien verdt innsatsen, fordi sprites kan forbedre koblinger og andre elementer på mus-over. Prøv det nedenfor:

Som du ser, gir det samme bildet to tilstander for de fire ikonene. Det eneste trikset er å forberede grafikkfilen på forhånd og finne ut hvert ikons koordinater.

prøv CSS sprite med åtte ikoner

("Silke" ikoner med FamFamFam .)

På grunn av dette skrives begge Yahoo! og Amazon bruk sprites for sine ofte nedlastede navigasjonsetiketter.

Velge riktig filstørrelse

Ikke alle piksler i et bilde er kritiske, men en designerens forsømmelse av filstørrelsen øker ofte med antall bilder på siden.

Et bilde som kan være 5% mindre er ikke en bekymring. To bilder er ikke mye mer av bekymring. Men hva med fem bilder? Ti? På hvilket tidspunkt skal designeren begynne å bekymre seg om bildekomprimering? Alle har en annen terskel. Noen bryr seg ikke i det hele tatt.

Bekymring er vanskelig å gjøre når noen få ekstra kilobytes har ingen konsekvenser. Men å ignorere kompresjon blir et gradvis mer alvorlig problem som bremser nettsteder og driver bort besøkende i det lange løp.


Skrevet utelukkende for Webdesigner Depot by Ben Gremillion . Ben er en freelance webdesigner som løser kommunikasjonsproblemer med bedre design.

Hvilke teknikker bruker du for å få mest mulig ut av dine webbilder? Hvor sannsynlig er du å bruke tid til å barbere av ekstra byte? Del dine tanker i kommentarene nedenfor.