JPEG-optimalisering for Internett - Ultimate Guide

Bildekomprimering finnes i alle native mediaformater. Men forskjellen mellom GIF, PNG og JPEG er hvordan informasjonen komprimeres og vises på skjermen. Det er så mange tips for å komponere flotte bildemedier som er publisert på nettet, og likevel forstår mange designere fremdeles ikke noen av grunnleggende.

I denne veiledningen vil jeg dele noen ideer for riktig JPEG-komprimering. Du vil optimalisere bildene dine for å redusere nettsidens lastetider samtidig som du har et anstendig kvalitetsnivå. Det handler om å finne balanse mellom filstørrelser og skjermbilder. Det er ingen perfekt løsning for designere å følge. Det tar litt innledende praksis, men når du forstår JPEG-komprimering blir det mye enklere å utvikle nettsteder i fremtiden.

Unngå alltid sparing ved 100%

Du bør nesten aldri lagre JPEG-bildene dine med 100% kvalitet. Dette vil ikke produsere mest mulig “optimalisert” bilde. Den beregner faktisk gjennom en optimaliseringsgrenseformel som øker filstørrelsene ublu. Selv i forhold til 90% eller 95% kvalitet, ser du en betydelig nedgang i filstørrelsen.

De fleste ganger vil du bli anbefalt å lagre bilder mye lavere enn 90% kvalitet. Hvis du åpner dialogboksen Lagre for web i Photoshop, vil du legge merke til at de tilbyr forhåndsdefinerte verdier du kan velge mellom. Jeg har lagt til de mulige JPEG-verdiene nedenfor - Legg merke til de iboende navngivningskonvensjonene.

Lav - 10%
Medium - 30%
Høy - 60%
Veldig høy - 80%
Maksimum - 100%

Selv i Adobe Photoshop betraktes 60% bildekvalitet som "høy". Mange webutviklere vil garantere mellom 50% - 70% er et trygt område å holde seg til.

Hvor lavt er for lavt?

Verdiene du velger for optimalisering er helt avhengig av prosjektet ved hånden. Du må vurdere hvilke typer grafikk som vil sende de høyeste filstørrelsene - disse er de som virkelig trenger komprimering.

Jeg ville hevde at under 30% du virkelig hakker av grunnleggende bildekvalitet. Andre designere vil sverge 50% som en “grense” å redusere den optimale verdien. Men det beste rådet her er å bare prøve ut forskjellige innstillinger og se hva som ser best ut! Du kan ikke gå galt med noen teststudier som optimaliserer JPEG-bilder på nettet.

Komprimeringsalternativer

Vi bør først avklare de to begrepene 'kompresjon' og 'kvalitet' som er omvendt av hverandre. Dette betyr at hvis du lagrer en JPEG på 40% komprimering, får du 60% kvalitet (sammenlignet med maksimalt 100% kvalitet uten komprimering).

Dette er de mest grunnleggende alternativene for å utnytte - og de bør være nok når de lagres på nettet. Generelle brukere kommer ikke inn i mye dypere tilpasninger. Subsampling kommer inn i mer kompliserte saker hvor du konverterer RGB-bilder til YCbCr (Luminans, Chroma Blue, Chroma Red).

(Bildekilde: Kara Monroe)

De luminans eller lysstyrkeinnstillingen holdes alltid til høyest mulig verdi i JPEG-komprimering. Med denne lysstyrkeverdien på en egen kanal er det lettere å optimalisere de individuelle fargeverdiene for Rød og Blå. Dette er også kjent som chroma subsampling. Designere interessert i å få hendene skitne vil gjerne lese litt mer om denne komprimeringsalgoritmen. Sjekk ut dette flotte blogginnlegget på chroma-sampling, spesielt fokusert på JPEG-bilder.

(Bildekilde: Derek Hatfield)

Som et interessant sido notat bruker Adobe Photoshop ikke alltid subsampling for komprimering. Eventuelle bilder lagret via “Lagre for web” dialogen vil bare bruke chroma subsampling under en 50% kvalitetsverdi.

Ulike webmedier

Internett er også fullt av forskjellige typer bildemedier. Du kan få bilder, ikoner, knapper, merker og tonnevis med annen grafikk. Men det er bemerkelsesverdig at sammenligning av kvalitet mellom en knapp og et fotografi bare ikke gir mening.

Når du bruker fotografier eller detaljerte bilder, bør du koble til en egen, mindre komprimert JPEG-fil. Deretter kan du sette opp miniatyrbilder på nettstedet ditt med et høyere komprimeringsforhold og mye mindre filstørrelser. Den eneste ulempen er at du må gi to sett med bilder for et mediegalleri. Ta vare på de mange forskjellige grafikkene du har syet gjennom et nettsted, og betrakt optimeringsteknikker for hver enkelt enkelt.

Planlegger en grafikkmodell

Du vil ha et organisert filsystem som er lett nok til å rive gjennom. Noen webmastere vil velge å være vert for sine bilder andre steder på nettet - som Flickr eller Picasa. Likevel vil du fortsatt bruke et komprimeringsverktøy for å redusere bildestørrelser, men hvordan du viser dem på nettstedet ditt, vil variere. Dette gjelder særlig med den populære oppveksten av mobile enheter med tilgang til Internett.

Jeg fant en interessant artikkel som diskuterer JavaScript JPEG-koding som ville skje i din frontend-kode. Det er ikke mye nytte for billedgallerier av høy kvalitet, men det kan barbere belastningstider for de mobile besøkende. Det vil også være en nyttig teknikk når du kobler hotlinking-bilder eller re-cropping miniatyrbilder dynamisk.

Et annet fancy verktøy for å sjekke ut er Yahoo! Smush.it. Det er en nettleserbasert webapp hvor du kan laste opp et bilde og Smush.it fjerner alle unødvendige ekstra byte for å optimalisere filstørrelsen. Det er 100% lossless, noe som betyr at bildekvaliteten ikke vil nedbrytes i det hele tatt. Og enda bedre kan du batch-laste opp bilder fra direkte nettadresser hvis du har dem vert på nettstedet ditt eller en tredjepartsserver.

Tilleggsverktøy

Det er rikelig med programvare for å prøve med hensyn til bildemanipulering. Eventuelle ekstra bytes du kan barbere av hver fils størrelse er avgjørende. Det er ikke mye programvare der ute, men alternativene som er tilgjengelige er fantastiske.

IrfanView

Denne gratis programvare for Windows lar deg se og optimalisere et sett med store bilder. Jeg liker spesielt denne programvaren fordi den støtter batchkonvertering fra bilder i flere kataloger. Du kan bruke de samme funksjonene automatisk over hundrevis av JPEG-bilder automatisk.

Hva er enda bedre er plugin-støtten fra tredjeparts utviklere. Et slikt eksempel er RIOT (Radical Image Optimization Tool). Denne plugin-funksjonen fungerer for andre lignende grafikkredigerere som GIMP. Den gir et dobbeltbildevisning der du manuelt kan justere komprimeringsparametere for hver av bildene dine.

Programvarestøtte er fantastisk, og RIOT-funksjonene er veldig enkle å bruke. Sammen med bildekomprimering har du også tilgang til å fjerne tilleggsmetadata som EXIF og Adobe XMP. Disse ekstra bitene av data kan bare legge til din totale filstørrelse, og de trengs sjelden.

ImageOptim for Mac

Hvis du kjører OS X og trenger en kraftig komprimeringsapp, så se ikke lenger. ImageOptim er et kraftig verktøy for å komprimere bilder til nettet - til tider enda bedre enn Photoshop.

Hele applikasjonen støtter dra-og-slipp-funksjonalitet, slik at det er enkelt å optimalisere store sett med bilder. Du kan også kjøre kommandoer rett fra Terminal- og oppsettskriptene. Ta en titt på Google-kodesiden for mer informasjon og teknisk støtte.

Det har vært noen mindre problemer med den nyeste 1.3.3 stabile utgivelsen i gjengivelse av pixelerte JPEG-bilder i Opera. Prøv å sjekke alle dine optimaliserte bilder i de fire store nettleserne - Chrome, Safari, Firefox og Opera (og kanskje IE). Hvis noe ser skjev ut, kan du prøve å laste ned ImageOptim 1.3.0 som konverterer litt renere.

Nyttige ressurser

JPEG 101: En Crash Course Guide på JPEG
Høyre komprimeringsinnstillinger for å lagre JPG-bilder for WordPress
Klare JPEG-optimaliseringsteknikker
Hvordan optimalisere JPEG-bilder for nettsteder
Alt du trenger å vite om bildekomprimering

Konklusjon

JPEG-komprimering er vanskelig siden du må finne den rette balansen mellom kvalitet og substans. Selv når våre moderne Internett-tilkoblingshastigheter øker, er det fortsatt behov for å redusere størrelsen på websider. Nye rammer som jQuery og Typekit kan takle hundrevis av ekstra kilobytes, selv på en godt optimalisert design.

Jeg må fortsatt anbefale Adobe Photoshop som min premiere bilderedigeringsprogramvare. Det er andre eksempler som muligens bedre for JPEG-optimaliseringsprosessen. Men webdesignere kan komme med med enda mindre kjente open source-løsninger. Hvis du har lignende triks eller ideer om JPEG-komprimering, vennligst del med oss i diskusjonsområdet nedenfor.