JPEG-optimering til internettet - Ultimate Guide

Billedkomprimering findes i alle native medier. Men forskellen mellem GIF, PNG og JPEG er hvordan Oplysningerne komprimeres og vises på skærmen. Der er så mange tips til at komponere flotte billedmedier, der udgives på internettet, og alligevel kan mange designere stadig ikke forstå nogle af de grundlæggende.

I denne vejledning vil jeg gerne dele et par ideer til korrekt JPEG-komprimering. Du vil optimere dine billeder for at reducere websidens belastningstider, samtidig med at du har et anstændigt kvalitetsniveau. Det handler om at finde balance mellem filstørrelser og skærmbillede. Der er ingen perfekt løsning for designere at følge. Det tager nogle initial praksis, men når du forstår JPEG-komprimering bliver det meget nemmere at udvikle hjemmesider i fremtiden.

Undgå altid at spare ved 100%

Du skal næsten aldrig gemme dine JPEG-billeder med 100% kvalitet. Dette vil ikke producere det mest mulige “optimeret” billede. Det beregnes faktisk gennem en optimeringsgrænseformel, som øger dine filstørrelser ublu. Selv i forhold til 90% eller 95% kvalitet vil du se et betydeligt fald i filstørrelsen.

De fleste gange anbefales det at gemme billeder, der er meget lavere end 90% kvalitet. Hvis du åbner dialogboksen Gem til web i Photoshop, bemærker du, at de tilbyder forudindstillede værdier, du kan vælge imellem. Jeg tilføjede de mulige JPEG værdier nedenfor - læg mærke til de iboende navngivningskonventioner.

Lav - 10%
Medium - 30%
Høj - 60%
Meget høj - 80%
Maksimum - 100%

Selv i Adobe Photoshop betragtes 60% billedkvalitet som "høj". Mange webudviklere garanterer mellem 50% - 70% er et sikkert interval at holde fast i.

Hvor lav er for lav?

De værdier du vælger til optimering er helt afhængige af det aktuelle projekt. Du skal overveje, hvilke typer grafik der vil producere de højeste filstørrelser - det er dem der virkelig har brug for kompression.

Jeg vil hævde, at under 30% afværger du virkelig den grundlæggende billedkvalitet. Andre designere vil sværge 50% som en “begrænse” at reducere den optimale værdi. Men det bedste råd her er at bare prøve forskellige indstillinger og se, hvad der ser bedst ud! Du kan ikke gå galt med et par teststudier, der optimerer JPEG-billeder til internettet.

Kompressionsindstillinger

Vi skal først afklare de to begreber "kompression" og "kvalitet", som er omvendt af hinanden. Det betyder, at hvis du gemmer en JPEG ved 40% kompression, får du 60% kvalitet (sammenlignet med maksimalt 100% kvalitet uden kompression).

Disse er de mest grundlæggende muligheder for at udnytte - og de skal være nok, når de gemmes til internettet. Generelle brugere kommer ikke ind i langt dybere tilpasninger. Subsampling kommer ind i mere komplicerede sager, hvor du konverterer RGB-billeder til YCbCr (Luminance, Chroma Blue, Chroma Red).

(Billedkilde: Kara Monroe)

Det luminans eller lysstyrke indstilles altid til den højest mulige værdi i JPEG-komprimering. Med denne lysstyrkeværdi på en separat kanal er det lettere at optimere de individuelle farveværdier for Rød og Blå. Dette er også kendt som chroma subsampling. Designere interesseret i at få deres hænder beskidte vil elske at læse lidt mere om denne komprimeringsalgoritme. Tjek dette fantastiske blogindlæg på chroma-prøveudtagning, der er specielt fokuseret på JPEG-billeder.

(Billedkilde: Derek Hatfield)

Som en interessant side note Adobe Photoshop benytter ikke altid subsampling til kompression. Eventuelle billeder gemt via “Gem til web” dialog vil kun bruge chroma subsampling under en 50% kvalitetsværdi.

Forskellige webmedier

Weben er også fuld af forskellige slags billedmedier. Du kan have fotografier, ikoner, knapper, badges og tonsvis af anden grafik. Men det er bemærkelsesværdigt, at sammenligning af kvalitet mellem en knap og et billede bare ikke giver mening.

Når du bruger fotografier eller detaljerede billeder, overveje at linke til en separat mindre komprimeret JPEG-fil. Derefter kan du opsætte miniaturebilleder på dit websted med et højere komprimeringsforhold og meget mindre filstørrelser. Den eneste ulempe er, at du skal levere to sæt billeder til et mediegalleri. Vær opmærksom på de mange forskellige grafik, du har syet gennem en hjemmeside, og overvej optimeringsteknikker for hver enkelt enkelt.

Planlægning af en grafisk model

Du vil have et organiseret filsystem, der er let nok til at ryste igennem. Nogle webmastere vælger at være vært for deres billeder andre steder på nettet - som Flickr eller Picasa. Men du vil stadig bruge et komprimeringsværktøj til at reducere billedstørrelser, men hvordan du viser dem på dit websted, vil variere. Dette gælder især med den populære stigning af mobile enheder med adgang til internettet.

Jeg fandt en interessant artikel, der diskuterede JavaScript JPEG-kodning, som ville ske i din frontend-kode. Der er ikke særlig stor fordel for billedgallerier af høj kvalitet, men det kan fjerne barneindlæsningstider for dine mobile besøgende. Det ville også være en nyttig teknik, når hotlinking-billeder eller re-cropping miniaturer dynamisk.

Et andet fancy værktøj til at tjekke ud er Yahoo! Smush.it. Det er en browserbaseret webapp, hvor du kan uploade et billede, og Smush.it fjerner alle unødvendige ekstra bytes for at optimere filstørrelsen. Det er 100% tabsløst, hvilket betyder, at billedkvaliteten slet ikke vil nedbrydes. Og endnu bedre kan du batch-upload billeder fra direkte webadresser, hvis du har dem hostet på din hjemmeside eller en tredjepartsserver.

Yderligere værktøjer

Der er masser af software til at prøve med hensyn til billedmanipulation. Eventuelle ekstra bytes du kan barbere af hver fils størrelse er afgørende. Der er ikke en masse software derude, men de muligheder, der er tilgængelige, er fantastiske.

IrfanView

Denne gratis software til Windows giver dig mulighed for at se og optimere et sæt store billeder. Jeg kan især lide denne software, fordi den understøtter batch-konvertering fra billeder i flere mapper. Du kan automatisk anvende de samme funktioner over hundredvis af JPEG-billeder.

Hvad er endnu bedre er plugin support fra tredjepart udviklere. Et sådant eksempel er RIOT (Radical Image Optimization Tool). Dette plugin fungerer for andre lignende open source-grafiske redaktører som GIMP. Det giver en dobbeltbilledvisning, hvor du manuelt kan justere komprimeringsparametre for hver af dine billeder.

Software support er fantastisk, og RIOT-funktionerne er meget nemme at bruge. Sammen med billedkomprimering har du også adgang til at fjerne yderligere metadata som EXIF og Adobe XMP. Disse ekstra bits data kan kun føje til din samlede filstørrelse, og de er sjældent nødvendige.

ImageOptim til Mac

Hvis du kører OS X og har brug for en kraftig komprimeringsapp, så kig ikke længere. ImageOptim er et kraftfuldt værktøj til at komprimere billeder til internettet - til tider endnu bedre end Photoshop.

Hele applikationen understøtter træk-og-slip-funktionalitet, så det er nemt at optimere store sæt billeder. Du kan ligeledes køre kommandoer lige inden for Terminal og setup shell scripts. Tjek Google kode siden for mere information og teknisk support.

Der har været nogle mindre problemer med den seneste 1.3.3 stabile udgivelse ved gengivelse af pixelerede JPEG-billeder i Opera. Prøv at kontrollere alle dine optimerede billeder i de 4 store browsere - Chrome, Safari, Firefox og Opera (og måske IE). Hvis der ser noget skævt ud, kan du prøve at downloade ImageOptim 1.3.0, som konverterer en smule renere.

Nyttige ressourcer

JPEG 101: En Crash Course Guide på JPEG
Højre komprimeringsindstillinger for at gemme JPG-billeder til WordPress
Klare JPEG-optimeringsteknikker
Sådan optimeres JPEG-billeder til websites
Alt du behøver at vide om billedkomprimering

Konklusion

JPEG-komprimering er vanskelig, da du skal finde den rette balance mellem kvalitet og stof. Selv da vores moderne internetforbindelseshastigheder stiger, er der stadig behov for at reducere størrelsen på websider. Nye rammer som jQuery og Typekit kan klare sig på hundredvis af ekstra kilobytes, selv på et godt optimeret design.

Jeg skal stadig anbefale Adobe Photoshop som min premiere billedredigeringssoftware. Der er andre eksempler muligvis bedre for JPEG-optimeringsprocessen. Men webdesignere kan komme med endnu mindre kendte open source-løsninger. Hvis du har lignende tricks eller ideer om JPEG-kompression, kan du dele med os i nedenstående diskussionsområde.