Hvordan komprimere bilder: En webdesigners guide

Sep 13, 2025

hvordan

[1. 3]

Gjennomsnittlig hastighet på en moderne Internett-tilkobling ville høres veldig futuristisk for webmastere fra fortiden. Tilbake i de tidlige dagene på nettet var mengden overførte data avgjørende, både når det gjelder tid og kostnader, derfor prøvde alle som er involvert i å ha noe på nettet, prøvde å lage bilder mindre.

Ironisk nok har problemet ikke gått bort i dag. Hver gang du besøker et skript-tungt nettsted (for eksempel Mainstream World News), trekker det ofte et dusin megabyte Javascript-kode, bilder, videoer og hva som helst. Det kan fortsatt være smertefullt sakte og til og med koste en pen penny for noen mobile data-brukere (dette bør ikke være et problem hvis du bruker en anstendig Nettstedbygger , og bra Web Hosting. bør holde øye med det for deg).

I denne opplæringen vil vi finne ut hvordan du kan slanke bitmapfiler på nettet. Så lenge det benytter de gode gamle PNG- og JPEG-formatene (se mer om bildefilformater Her, og vær sikker på å lagre filene dine i høyre side skylagring Også), vi får se hvordan vi kan gjøre dem mindre uten å gå på kompromiss med kvaliteten, med litt varmt Open Source Projects. . Til slutt har vi vesentlig mindre filer som fortsatt vil se bra ut, men krever mindre tid og data for å bli gjengitt i brukerens nettlesere.

Les videre for å dykke inn i detaljene. Først, et raskt notat på programvare. Alle de nevnte verktøyene er åpen kildekode - hopp til bunnen for en guide til Hvordan få programvaren du trenger.

De beste wordpress porteføljen temaer

Velg riktig format

Det kan høres trivielt å fortsatt haarking på om filstørrelse, men det er nok eksempler hvor et bilde er enten for massivt uten noe formål eller ser forferdelig til tross for å være liten. For å unngå slike feil, velg et format for å lagre eller konvertere et bilde klokt. Bruk av JPEG innebærer å bryte et bilde i fliser på 8x8 piksler, hvor hver flis blir komprimert. Komprimeringsnivået avhenger av brukeren (det er den skyveknappen når du lagrer et bilde), men typisk JPEG tillater 10: 1 filstørrelse gevinst med et akseptabelt tap i kvalitet.

Den perceptuelle forskjellen mellom JPEG-filer som er laget med høyt (80-100) og lavt (40-60) kompresjonsforhold, er minimal for fotografiske bilder, men svært merkbar for ting som digital kunstverk, ikoner og skjermbilder. Derfor anbefales det å velge JPEG for bilder og gå med noe annet for de andre typene bitmap-bilder.

PNG er en av de mest passende formatene for nettverksgrafikk (faktisk, det er det forkortelsen betyr). Mens JPEG-formatet alltid er lossy (selv med kvalitetssett til 100), kan PNG-formatet enten være lossy eller ikke. Videre, selv når det er, komprimerer den data ved å redusere antall farger som brukes i bildet, slik at resultatet vanligvis fortsatt ser skarpt ut og klart ut. Så velg PNG for å skifte skjermgrabs eller noen andre typer bilder med solid fylling.

Start med praktiske metoder

Imagine is based on Electron and provides a friendly interface for processing several images at once — Tenk deg er basert på elektron og gir et vennlig grensesnitt for å behandle flere bilder samtidig

Optimalisering av bitmapfiler er mulig med en haug med freeware-verktøy, slik at du ikke trenger å stole på en fullverdig bildedaktør. Tenk deg er en slik søknad, og det er utrolig enkelt å bruke. Bare dra et bilde (eller en bunke med bilder) over Imagine-vinduet og bruk de små glidebryterne til å justere kompresjonsforholdet.

Tenk deg arbeider med JPEG, PNG og WebP-filer, og det er ideelt for lossy koding. Den største fordelen er at verktøyet er interaktivt; Det viser deg øyeblikkelig hvordan bildet vil se ut med de nåværende innstillingene og vise den foreslåtte filstørrelsen. Tenk deg fungerer bra for batchbehandling - i det minste kan det lagre alle åpne bilder på en gang hvis du trenger det.

Unødvendig å si, det er dusinvis, om ikke hundrevis, av andre JPEG og PNG optimals, inkludert noen praktiske online tjenester (som Tinyjpg. ). Men ikke haste av ennå - vi har noe bedre opp vår erme.

Avanserte komprimeringsteknikker

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 brukte vi et testbilde av en stråhatt på en sløret bakgrunn; Guetzli redusert filstørrelse med 33 prosent og lepton med ytterligere 23 prosent

Ved første øyekast ser det ut som om vi ikke kan ta mye mer av en bit av lossy JPEG-filstørrelser, noe som umiddelbart kan bevises av ubrukelige forsøk på å videre arkivere bilder ved hjelp av glidelås eller annen komprimeringsteknikk. Men her kommer Guetzli, en smart sveitsisk kake og sofistikert perceptuell koder for JPEG.

Guetzli gjør en gjennomsnittlig JPEG mindre med 20 til 30 prosent ved å øke kompresjonens tetthet. Hemmeligheten er at algoritmen er klar over måten mennesker oppfatter hva de ser, så det resulterende bildet ser fortsatt bra ut til øyet. Guetzli er et kommandolinjeverktøy for korsplattform, som bruker følgende syntaks:

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

Det opprinnelige bildet kan enten være PNG eller JPEG, mens utgangen alltid er JPEG. Derfor kan du bruke Guetzli til å konvertere PNG til JPEG takket være sin state-of-the-art komprimering. Kvaliteten skal falle mellom 0-100. Guetzli er en utrolig ressurs-tung programvare; Det forbruker nesten 300 MB minne per 1 megapiksel og også mye CPU-kraft. Vi håper dine superoptimaliserte JPEGs vil ikke øke global oppvarming ...

Portable Network Graphics er en annen historie, så lenge den ble designet for lossless image koding. Når du lagrer et bilde som PNG i en bilderedigerer som GIMP, har du en kompresjonsforholdskyving med verdier fra 0 til 9. Her betyr 0 ingen komprimering, og det gjør bildet veie som om det ble lagret som en TIFF. I motsetning til, 9 striper bort det meste av den unødvendige fargeinformasjonen og resulterer i en fil som er 15-20 ganger mindre enn TIFF.

Denne gangen vil vi prøve å lage en allerede liten PNG-fil (med forholdet på 9) enda mindre. For dette formålet bruker vi Zopfli, et annet åpent kildeverktøy som igjen har røtter i Google Labs. Zopfli er en kompressor av høy kvalitet for deflate, gzip og zlib data koding.

Den interessante delen er at Zopfli inneholder to kodere i en pakke: den generelle binære og det dedikerte 'Zopflipng' verktøyet. Sistnevnte er akkurat det vi trenger! Zopflipng er en deflate-basert koder med visse algoritmer backported fra webp-formatet. Det er smart nok til å automatisk velge den beste strategien ved hjelp av Scanline-koder og fjerne forskjellige unødvendige biter i PNG. Bruk den med denne enkle syntaksen:

zopflipng original_png output_png

Zopflipng kan nok gjøre jobben enda bedre med følgende eksplisitte alternativer:

 ZOPFLIPNG --iterasjoner = 500 - Filtre = 01234MEPB --Lossy_8bit --Lossy_Transparent Original_png
output_png

Prisen du betaler er den samme som med Guetzli: Verktøyet tar mye tid å behandle et bilde, spesielt hvis det er stort. Jo flere iterasjoner du bruker, jo lenger det vil ta, men 500 er et rimelig tall. Filstørrelsen gevinst med Zopfli ligger mellom 8 til 20 prosent, noe som er veldig bra for visuelt perfekte bilder. Kort sagt, å få 8 prosent er vanlig for skjermbilder, mens 20 prosent er mulig med fotografier (når du trenger å lagre dem som Pngs).

Oppgrader til neste Gen-filformater

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-bildet var et vanlig 1920x1080 skjermbilde; Følgelig komprimering av ZOPFLIPNG og deretter falt FLIF 14 prosent uten å redusere antall farger

Formelt går denne delen utover omfanget av PNG og JPEG, men det er veldig praktisk, siden du kan organisere filkonvertering på-fly. Det vi mener her bruker alternative og nye bildeformater som overgår de beste industristandarder (les webp).

Den ene er Flif, et nytt lossless bildeformat basert på maniac (meta-adaptiv nær-null heltall aritmetisk koding) komprimeringsmetode, som kan overgå PNG, FFV1, lossless webp, lossless bpg og lossless jpeg 2000 i form av kompresjonsforhold. Flif er tilgjengelig for alle plattformer, og noen bildevisere støtter det allerede, men det har en lang vei å gå for å slå den vanlige. Akkurat nå er det fornuftig å bruke Flif for lagring eller på serversiden. Det kan fungere som et effektivt arkiveringsformat. Du må ta koden fra prosjektets Github-side og kompilere den. Når du har Flif. Binær installert, bruk følgende kommando for å kode et PNG-bilde:

 flif -e original_png output_flif

Erstatte -E med -D og legg filene i omvendt rekkefølge for å "uncompresse" bildet ditt tilbake til PNG. Når det gjelder verktøy, akkurat nå, er det Flif Wic API-komponenten for Windows, QT Flyt-pluginet for Linux og Phew Image Viewer og QuickLook-plugin for MacOS (se koblingsdelen for detaljer). Sammenlignet med bildet som tidligere ble torturert av Zopflipng, reduserer Flif sin filstørrelse lenger ned med ~ 10 prosent. Imponerende resultater!

Vår siste helten er lepton, et annet åpent kildeformat som er sjenerøst publisert av Dropbox-utviklerne. Lepton gjør med jpeg hva flif gjør med png. Lepton kan slanke JPEG med opptil 22 prosent i lossless-modusen, noe som betyr at koderen ikke forårsaker noe tap i kvalitet i forhold til den originale JPEG-filen. Under hetten innebærer Lepton smarte teknikker for å komprimere de 8x8 JPEG-blokkene. I stedet for å skrive nuller og de, koder LEPTON BITMAP-data ved hjelp av VP8-aritmetiske koderen, som respekterer kontekst rundt hver blokk.

Vår test viste at Lepton skulle være svært effektiv og rask. Kommandoen så ut som følgende:

 lepton original.jpg output.lep

Og i et sekund eller to produserte verktøyet .lep-filen som var mindre med nesten en fjerdedel av originalen. Sammenlignet med den tidkrevende Guetzli, er Lepton blazingly fort. Du kan bruke Lepton på samme måte Dropbox gjør. Formatet gjør at du kan redusere lagringskostnadene med 20 til 25 prosent, og siden det er så snappy, kan du gjøre på-fly-koding / dekoding sekvenser uten store ulemper. Forresten, dekoding kommandoen er like enkelt, det trenger bare å bytte de to filene, og den resulterende filen er identisk med den originale JPEG:

 LEPTON ORIGINAL.LEP OUTPUT.JPG

Bruk de beskrevne teknikkene for å optimalisere brukerdataoppbevaring eller ytterligere forbedre lasthastighetene til webprosjektene dine.

Hvordan få programvaren

Hvert stykke programvare som er beskrevet i denne opplæringen, er åpen kildekode, slik at du kan bruke den fritt. Det er ikke nødvendig å plage å kompilere alt fra kilder, da de fleste verktøyene nedenfor har binære nedlastinger. Slik får du programvaren opp og kjører.

Ta tak i Guetzli binær her . Det er den enkleste tingen å gjøre. Zopfli gir bare koden (bygge den med "gjør") på GitHub. . Det kan imidlertid være klokere for deg å få det gjennom Node.js Package Manager:

  NPM Installer node-zopfli

Noen nyttige linker for Flif:

Flif-hub : Referanseimplementering, kilder og Windows Binaries
Xnview mp. : En tvers av fotograferingsplattform med innebygd flifstøtte
qt-flif-plugin : En himmel for Linux-brukere
Puh : En seer og QuickLook-plugin-moduler for MacOS
Lepton. : Kildekode og Windows Binaries

Denne artikkelen ble opprinnelig publisert i utgave 316 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 316 her eller Abonner her .

Relaterte artikler:

Den ultimate guiden til bildeoppløsning
Slik lager du feil tekst og bildeeffekter i CSS
Designerens veiledning for å bruke bilder mer effektivt
4 Essential Image Optimization Tips

Hvordan komprimere bilder: En webdesigners guide

Velg riktig format

Start med praktiske metoder

Avanserte komprimeringsteknikker

Oppgrader til neste Gen-filformater

Hvordan få programvaren

hvordan - Mest populære artikler

Hvordan teste reagere Nettsteder og Apps

Kom i gang med eiendeler i affinitetsdesigner

Hvordan lage glasur med akvarell

Slik smelter du et 3D-objekt med tre.js

Hvordan blande skyggefarge i maling

Design SVG-grafikk i nettleseren din

Mal et portrett som de gamle mestere

Hvordan fange bevegelse i dine 3D-render

Kategorier