Sådan komprimeres billeder: En webdesignervejledning

Sep 11, 2025

hvordan

Den gennemsnitlige hastighed på en moderne internetforbindelse ville lyde meget futuristisk til webmastere fra fortiden. Tilbage I de tidlige dage af internettet var mængden af overførte data afgørende, både hvad angår tid og omkostninger, derfor alle involverede i hosting noget online forsøgt at lave billeder mindre.

Ironisk nok er problemet ikke gået væk i dag. Hver gang du besøger et script-tung hjemmeside (f.eks. Mainstream World News), trækker det ofte et dusin megabyte JavaScript-kode, billeder, videoer og WhatNot. Det kan stadig være smerteligt langsomt og endda koste en smuk penny for nogle mobile data brugere (dette bør ikke være et problem, hvis du bruger en anstændig Website Builder. , og godt Web Hosting. bør holde øje med det for dig).

I denne vejledning vil vi finde ud af, hvordan du kan slanke bitmap-filer til internettet. Så længe det udnytter de gode gamle PNG- og JPEG-formater (se mere om Billedfilformater her, og sørg for at gemme dine filer til højre Sky lagring Også), vi får se, hvordan vi kan gøre dem mindre uden at gå på kompromis med kvaliteten ved hjælp af nogle varme Open Source Projects. . I sidste ende har vi væsentligt mindre filer, der stadig vil se godt ud, men kræver mindre tid og data for at blive gengivet i brugernes webbrowsere.

Læs videre for at dykke ind i detaljerne. For det første en hurtig note på software. Alle de nævnte værktøjer er Open Source - Gå til bunden for en vejledning til Sådan får du softwaren du mangler.

De bedste wordpress portefølje temaer

Vælg det rigtige format

Det kan lyde trivielt at have stadig at have på om filstørrelse, men der er nok eksempler, hvor et billede er enten for massivt uden nogen form for eller ser forfærdeligt trods at være lille. For at undgå sådanne fejl skal du vælge et format for at gemme eller konvertere et billede klogt. Brug af JPEG indebærer at bryde et billede i fliser på 8x8 pixels, hvor hver flise bliver komprimeret. Kompressionsniveauet afhænger af brugeren (det er den skyder, når du gemmer et billede), men typisk giver JPEG mulighed for 10: 1 filstørrelsesforøgelse med et acceptabelt tab i kvalitet.

Den perceptuelle forskel mellem JPEG-filer, der er lavet med høj (80-100) og lavt (40-60) kompressionsforhold, er minimal for fotografiske billeder, men meget mærkbare for ting som digital kunst, ikoner og skærmbilleder. Derfor anbefales det at vælge JPEG for billeder og gå med noget andet for de andre typer bitmapbilleder.

PNG er en af de mest egnede formater til netværksgrafik (faktisk, det er det, som dets forkortelse betyder). Mens JPEG-formatet altid er lossy (selv med kvalitetssæt til 100), kan PNG-formatet være enten lossy eller ej. Desuden, selv når det er, komprimerer det data ved at reducere antallet af farver, der anvendes i billedet, så resultatet normalt stadig ser skarpt ud og klart ud. Så vælg PNG for at skildre screengraber eller andre slags billeder med fastfyldning.

Start med bekvemme metoder

Imagine is based on Electron and provides a friendly interface for processing several images at once — Forestil dig er baseret på elektron og giver en venlig grænseflade til behandling af flere billeder på én gang

Optimering af bitmap-filer er muligt med en flok freeware værktøjer, så du behøver ikke at stole på en fuldbygget billedredaktør. Forestil dig er en sådan applikation, og det er utroligt nemt at bruge. Bare træk et billede (eller en stak billeder) over vinduet Imagine og brug de små skydere til at justere kompressionsforholdet.

Forestil dig at fungere med JPEG, PNG og WEBP-filer, og det er ideelt til lossy-kodning. Den største fordel er, at værktøjet er interaktivt; Det viser øjeblikkeligt, hvordan billedet vil se ud med de aktuelle indstillinger og viser den foreslåede filstørrelse. Forestil dig at fungere godt til batchbehandling - i det mindste kan det gemme alle åbne billeder på én gang, hvis du har brug for det.

Det er overflødigt at sige, at der er snesevis, hvis ikke hundredvis af andre JPEG- og PNG-optimisører, herunder nogle praktiske online-tjenester (som Tinyjpg. ). Men ikke skynd dig af lige endnu - vi har noget bedre op vores ærme.

Avancerede kompressionsteknikker

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — For JPEG brugte vi et testbillede af en halmhue på en sløret baggrund; Guetzli reduceret filstørrelse med 33 procent og Lepton med en anden 23 procent

Ved første øjekast ser det ud til, at vi ikke kan tage meget mere af en bid af Lossy JPEG-filstørrelser, noget der øjeblikkeligt kan bevist af forgæves forsøg på yderligere arkivbilleder ved hjælp af ZIP eller en anden komprimeringsteknik. Men her kommer Guetzli, en smart schweizisk cookie og sofistikeret perceptuel encoder til JPEG.

Guetzli gør en gennemsnitlig JPEG mindre med 20 til 30 procent ved at øge dens kompressionstæthed. Hemmeligheden er, at algoritmen er opmærksom på, hvordan mennesker opfatter, hvad de ser, så det resulterende billede stadig ser godt ud til øjet. Guetzli er et Cross-Platform Command-line værktøj, som bruger følgende syntaks:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Det oprindelige billede kan enten være PNG eller JPEG, mens udgangen altid er JPEG. Derfor kan du bruge Guetzli til at konvertere PNG til JPEG takket være dens state-of-the-art kompression. Kvaliteten skal falde mellem 0-100. Guetzli er en utrolig ressource-tung software; Det forbruger næsten 300 MB hukommelse pr. 1 megapixel og også en masse CPU-strøm. Vi håber, at dine superoptimerede JPEG'er ikke vil øge global opvarmning ...

Portable Network Graphics er en anden historie, så længe den er designet til tabsfri billedkodning. Når du gemmer et billede som PNG i en billedredaktør som GIMP, har du en kompressionsforholdsskyder med værdier fra 0 til 9. Her betyder 0 ingen kompression, og det gør billedet vejer som om det blev gemt som en TIFF. I modsætning hertil er 9 strimler væk de fleste af de unødvendige farveinformation og resulterer i en fil, der er 15-20 gange mindre end TIFF.

Denne gang vil vi forsøge at lave en allerede lille PNG-fil (med forhold på 9) endnu mindre. Til dette formål bruger vi Zopfli, et andet open source-værktøj, der igen har rødder i Google Labs. Zopfli er en højkvalitets kompressor til deflate, GZIP og ZLIB datakodning.

Den interessante del er, at Zopfli indeholder to encodere i et bundt: det generelle binære og det dedikerede 'Zopflipng' værktøj. Sidstnævnte er præcis det, vi har brug for! ZopFlipng er en deflate-baseret encoder med visse algoritmer, der er modsat fra WEBP-formatet. Det er smart nok til automatisk at vælge den bedste strategi ved hjælp af scanlinekoder og fjerne forskellige unødvendige klumper inde i PNG. Brug det med denne enkle syntaks:

zopflipng original_png output_png

Zopflipng kan nok gøre jobbet endnu bedre med følgende eksplicitte muligheder:

 ZopFlipng -->> 500 --filters = 01234MeB - Lossy_8bit - Lossy_transparent Original_png
output_png

Den pris, du betaler, er den samme som med Guetzli: Værktøjet tager meget tid til at behandle et billede, især hvis det er stort. Jo flere iterationer du bruger, jo længere det vil tage, men 500 er et rimeligt antal. Filstørrelsesgavet med Zopfli ligger mellem 8 og 20 procent, hvilket er meget godt for visuelt perfekte billeder. Kort sagt, idet der opnås 8 procent er fælles for skærmbilleder, mens 20 procent er muligt med fotografier (når du skal gemme dem som PNGS).

Opgrader til næste genfilformater

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — Test PNG-billedet var et almindeligt 1920x1080 screenshot; Følgende kompression ved Zopflipng og derefter FLIF fik 14 procent uden at reducere antallet af farver

Formelt går denne del ud over PNG- og JPEG's omfang, men det er meget praktisk, da du kan organisere filkonvertering på-flyve. Det, vi mener her, bruger alternative og nye billedformater, der overgår de bedste industristandarder (læs webp).

Den ene er flif, et nyt tabløst billedformat baseret på den maniac (meta-adaptive nær-nul-heltal-aritmetisk kodning) komprimeringsmetode, som kan overgå PNG, FFV1, tabless WebP, Lossless BPG og LossLess JPEG 2000 med hensyn til kompressionsforhold. FLIF er tilgængelig for alle platforme, og nogle billedvisere understøtter det allerede, men det har en lang vej at gå for at ramme mainstream. Lige nu er det fornuftigt at bruge flif til opbevaring eller på serversiden. Det kan fungere som et effektivt arkiveringsformat. Du skal få fat i koden fra projektets Github-side og kompilere det. Når du har den flif. Binær installeret, brug følgende kommando til at kode et PNG-billede:

 FLIF -E original_png output_flif

Erstatte -E. med -d. og sæt filerne i omvendt rækkefølge for at "ucompress" dit billede tilbage til PNG. Med hensyn til værktøjer, lige nu er der FIF WIC API-komponenten til Windows, QT FLIF-plugin til Linux og Phew Billed Viewer og QuickLook plugin til MacOS (se afsnittet Links for detaljer). Sammenlignet med billedet, der tidligere blev tortureret af ZopFlipng, reducerer FIF sin filstørrelse længere nede med ~ 10 procent. Imponerende resultater!

Vores sidste helt er Lepton, et andet open source format, der er generøst udgivet af Dropbox-udviklerne. Lepton gør med jpeg hvad flif gør med png. Lepton kan slanke JPEG'er med op til 22 procent i den tabløse tilstand, hvilket betyder, at encoderen ikke forårsager noget tab i kvalitet i forhold til den originale JPEG-fil. Under hætten indebærer Lepton smarte teknikker til at komprimere disse 8x8 JPEG-blokke. I stedet for at skrive nuller og dem koder Lepton bitmap-data ved hjælp af VP8-arithmetiske koder, som respekterer kontekst omkring hver blok.

Vores test viste sig, at Lepton skulle være meget effektiv og hurtig. Kommandoen lignede følgende:

 Lepton Original.jpg Output.lep

Og i et sekund eller to producerede værktøjet den .lep-fil, der var mindre med næsten en fjerdedel af originalen. Sammenlignet med den tidskrævende Guetzli er Lepton blæser hurtigt. Du kan bruge Lepton på samme måde Dropbox gør. Formatet giver dig mulighed for at reducere lageromkostningerne med 20 til 25 procent, og da det er så snappy, kan du gøre on-the-fly-kodning / dekodningssekvenser uden større ulemper. Forresten er dekodningskommandoen lige så enkel, det skal kun bytte de to filer, og den resulterende fil er identisk med den originale JPEG:

 Lepton Original.lep Output.jpg

Brug de beskrevne teknikker til at optimere brugerdatablade eller yderligere forbedre indlæsningshastigheder på dine webprojekter.

Sådan får du softwaren

Hvert stykke software beskrevet i denne vejledning er åben kilde, så du kan bruge det frit. Der er ikke behov for at genere kompilering af alt fra kilder, da de fleste af værktøjerne nedenfor har binære downloads. Her er hvordan man får softwaren op og kører.

Grib Guetzli binære her . Det er den nemmeste ting at gøre. Zopfli giver kun koden (bygg den med 'make') på Github. . Det kan dog være klogere for dig at få det gennem Node.js Package Manager:

  NPM Installer Node-Zopfli

Nogle nyttige links til flif:

Flif-hub. : Reference implementering, kilder og Windows Binaries
Xnview MP. : En platform foto viewer med indbygget fleks support
qt-flif-plugin : En himmel til Linux-brugere
Phew. : En Viewer og QuickLook-plug-in til MacOS
Lepton. : Kilde kode og Windows Binaries

Denne artikel blev oprindeligt offentliggjort i udstedelse 316 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 316 her eller Abonner her .

Relaterede artikler:

Den ultimative vejledning til billedopløsning
Sådan oprettes glitchtekst og billedeffekter i CSS
Designerens vejledning til at bruge billeder mere effektivt
4 Essential Image Optimization Tips

Sådan komprimeres billeder: En webdesignervejledning

Vælg det rigtige format

Start med bekvemme metoder

Avancerede kompressionsteknikker

Opgrader til næste genfilformater

Sådan får du softwaren

hvordan - Mest populære artikler

Kompositioner i animation: Lær det grundlæggende

Sådan tegner du en løve

Opret spøgelsesagtige teksturer med blandede medieteknikker

Mal en ondskabsfuld hare i akvarel

Mal en energisk seascape i olier

Sådan får du mere fra GIFS

Sådan opretter du et stiliseret 3D-tegn til spil

Sådan designer man en animeret helt

Kategorier