Cum să comprimați imaginile: un ghid de designer web

Sep 11, 2025

să

Viteza medie a unei conexiuni moderne de internet ar părea foarte futuristă la maeștrii web ai trecutului. Înapoi în primele zile ale Web-ului, suma datelor transferate a fost crucială, atât în ceea ce privește timpul cât și costul, prin urmare toți cei implicați în găzduirea ceva online încercat să facă imagini mai mici.

În mod ironic, problema nu a dispărut în zilele noastre. De fiecare dată când vizitați un site web greu de script (cum ar fi Mainstream World News), adesea trage o duzină de megaocteți de cod JavaScript, imagini, videoclipuri și ceea ce nu. Este posibil să fie încă dureros de lent și chiar să costă un penny frumos pentru unii utilizatori de date mobile (aceasta nu ar trebui să fie o problemă dacă utilizați un decent Builder de site-uri web , si bun web hosting ar trebui să țină ochii pentru tine).

În acest tutorial, vom afla căile pe care le puteți diminua fișierele Bitmap pentru web. Atâta timp cât folosește formatele vechi vechi PNG și JPEG (vezi mai multe despre Formate de fișiere imagine Aici, și asigurați-vă că salvați fișierele în dreapta Stocare in cloud La fel de bine), vom vedea cum le putem face mai mici fără a compromite calitatea, folosind unele fierbinți Proiecte open source . În cele din urmă, vom avea fișiere în mod substanțial mai mici, care vor arăta în continuare bune, dar necesită mai puțin timp și date pentru a fi redate în browserele Web ale utilizatorilor.

Citiți mai departe pentru a vă scufunda în detalii. În primul rând, o notă rapidă privind software-ul. Toate instrumentele menționate aici sunt Open Source - Salt la partea de jos pentru un ghid pentru Cum să obțineți software-ul ai nevoie.

Cele mai bune teme de portofoliu WordPress

Alegeți formatul potrivit

S-ar putea suna trivial ca inca mai gãpãþi despre dimensiunea fișierului, dar sunt suficiente exemple în care o imagine este fie prea masivă fără nici un scop, fie pare teribilă, în ciuda faptului că este mic. Pentru a evita astfel de greșeli, alegeți un format pentru a salva sau a converti o imagine cu înțelepciune. Utilizarea JPEG implică ruperea unei imagini în plăci de 8x8 pixeli, unde fiecare țiglă devine comprimată. Nivelul de compresie depinde de utilizator (este acel cursor atunci când salvați o imagine), dar în mod obișnuit JPEG permite obținerea dimensiunii de fișier 10: 1 cu o pierdere acceptabilă a calității.

Diferența perceptuală dintre fișierele JPEG realizate cu un raport de compresie ridicată (80-100) și scăzută (40-60) este minimă pentru imagini fotografice, dar foarte vizibilă pentru lucruri cum ar fi lucrările de artă digitale, icoane și capturi de ecran. Prin urmare, este recomandat să alegeți JPEG pentru fotografii și să mergeți cu altceva pentru celelalte tipuri de imagini Bitmap.

PNG este una dintre cele mai potrivite formate pentru grafica de rețea (de fapt, asta înseamnă abreviere). În timp ce formatul JPEG este întotdeauna pierderi (chiar și cu setul de calitate la 100), formatul PNG poate fi fie pierdută, fie nu. Mai mult decât atât, chiar și atunci când este, aceasta comprimă date prin reducerea numărului de culori utilizate în imagine, astfel încât rezultatul să pară în mod obișnuit clar și clar. Deci, alegeți PNG pentru a descrie screengrabs sau orice alt fel de imagini cu umplutură solidă.

Începeți cu metode convenabile

Imagine is based on Electron and provides a friendly interface for processing several images at once — Imaginați-vă că se bazează pe electron și oferă o interfață prietenoasă pentru procesarea mai multor imagini simultan

Optimizarea fișierelor Bitmap este posibilă cu o grămadă de unelte freeware, deci nu trebuie să vă bazați pe un editor de imagini cu drepturi depline. Imaginați-vă că este o astfel de aplicație și este incredibil de ușor de utilizat. Doar trageți o imagine (sau o stivă de imagini) în fereastra Imaginei și utilizați cele mici glisoare pentru a regla raportul de compresie.

Imaginați-vă că funcționează cu fișiere JPEG, PNG și WebP și este ideal pentru codificarea pierderilor. Cel mai mare avantaj este că instrumentul este interactiv; Vă arată instantaneu modul în care imaginea va arăta cu setările curente și afișează dimensiunea fișierului propus. Imaginați-vă lucrări excelente pentru prelucrarea lotului - cel puțin poate salva toate imaginile deschise simultan, dacă aveți nevoie.

Inutil să spun că există zeci, dacă nu sute, al altor optimizari JPEG și PNG, inclusiv unele servicii on-line la îndemână (cum ar fi Tinyjpg. ). Dar nu vă grăbiți încă - avem ceva mai bun în mânecă.

Tehnici avansate de compresie

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 — Pentru JPEG, am folosit o fotografie de testare a unei pălării de paie pe un fundal neclar; Guetzli a redus dimensiunea fișierului cu 33% și lepton cu încă 23%

La prima vedere, se pare că nu putem lua mai mult de o mușcătură din dimensiuni de fișiere JPEG pierdute, ceva care poate fi dovedit instantaneu de încercări inutile de a arhiva imagini folosind ZIP sau orice altă tehnică de comprimare. Dar aici vine Guetzli, un cookie inteligent elvețian și un codificator perceptual sofisticat pentru JPEG.

Guetzli face o medie JPEG mai mică cu 20-30% prin creșterea densității sale de compresie. Secretul este că algoritmul este conștient de modul în care oamenii percep ceea ce văd, astfel încât imaginea rezultată arată foarte bine la ochi. Guetzli este un instrument de linie de comandă încrucișată, care utilizează următoarea sintaxă:

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

Imaginea originală poate fi fie PNG, fie JPEG, în timp ce ieșirea este întotdeauna JPEG. Prin urmare, puteți utiliza Guetzli pentru a converti PNG la JPEG datorită compresiei sale de ultimă oră. Calitatea ar trebui să scadă între 0 și00. Guetzli este un software incredibil de resurse de resurse; Acesta consumă aproape 300 MB de memorie la 1 megapixel și, de asemenea, o mulțime de putere CPU. Sperăm că JPEG-urile dvs. super-optimizate nu vor stimula încălzirea globală ...

Grafica de rețea portabilă reprezintă o poveste diferită, atâta timp cât a fost proiectată pentru codificarea imaginii fără pierderi. Când salvați o imagine ca PNG într-un editor de imagini, cum ar fi GIMP, aveți un cursor de compresie cu valori de la 0 la 9. Aici 0 înseamnă nici o comprimare și face ca imaginea să cântărească ca și cum ar fi fost salvată ca tiff. În contrast, 9 benzi îndepărtează majoritatea informațiilor de culoare nevăzute și rezultă într-un fișier care este de 15-20 ori mai mic decât TIFF.

De data aceasta vom încerca să facem un fișier PNG deja mic (cu raport de 9) chiar mai mic. În acest scop, vom folosi Zopfli, un alt instrument open-sursă care are din nou rădăcini în Google Labs. ZOPFLI este un compresor de înaltă calitate pentru codarea datelor de defilare, GZIP și ZLIB.

Partea interesantă este că ZOPFLI conține doi encodere într-un singur pachet: Binarul general binar și instrumentul dedicat "Zopflipng". Acesta din urmă este exact ceea ce avem nevoie! Zopflipng este un encoder bazat pe defilare cu anumiți algoritmi din format WebP. Este suficient de inteligent să alegeți automat cea mai bună strategie utilizând codurile de scanline și eliminarea diferitelor bucăți inutile în interiorul PNG. Utilizați-l cu această simplă sintaxă:

zopflipng original_png output_png

Zopflipng poate face probabil lucrarea chiar mai bună cu următoarele opțiuni explicite:

 Zopflipng --iterații = 500 - Filters = 01234Mapb --lossy_8bit --lossy_transparent original_png
ieșire_png

Prețul pe care îl plătiți este același cu Guetzli: Instrumentul durează mult timp pentru a procesa o imagine, mai ales dacă este mare. Cele mai multe iterații pe care le folosiți, cu atât mai mult va dura, dar 500 este un număr rezonabil. Câștigul dimensiunii fișierului cu ZOPFLI se află între 8 și 20%, ceea ce este foarte bun pentru imagini perfect vizuale. Pe scurt, câștigarea a 8% este comună pentru capturile de ecran, în timp ce 20% sunt posibile cu fotografii (când trebuie să le stocați ca PNG).

Upgrade la formatele de fișiere Next-Gen

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 — Imaginea de testare PNG a fost o screenshot obișnuit de 1920x1080; compresie ulterioară prin Zopflipng și apoi FLIF a câștigat 14% fără a reduce numărul de culori

În mod oficial, această parte depășește domeniul de aplicare al PNG și JPEG, dar este foarte practic, deoarece puteți organiza conversia fișierului pe-the-fly. Ceea ce înțelegem aici utilizează formate alternative și noi de imagini care depășesc cele mai bune standarde din industrie (citiți Webp).

Unul este FLIF, un nou format de imagine fără pierderi, bazat pe metoda de compresie a maniacului (meta-adaptivă de codificare aritmetică în apropierea zero-zero-integer), care poate depăși PNG, FFV1, Webp fără pierderi, BPG fără pierderi și IPEG fără pierderi 2000 în ceea ce privește raportul de compresie. FLIF este disponibil pentru toate platformele și unele vizualizări de imagini îl susțin deja, dar are un drum lung de a merge pentru a lovi mainstream-ul. Chiar acum, are sens folosind FLIF pentru depozitare sau pe partea serverului. Acesta poate acționa ca un format eficient de arhivare. Va trebui să luați codul din pagina GitHub și să o compilați. Odată ce ai FLIF. Binar instalat, utilizați următoarea comandă pentru a codifica o imagine PNG:

 FLIF -E ORIGINAL_PNG ISIGUT_FLIF

A inlocui -E. cu -D. și puneți fișierele în ordine inversă pentru a "necomprima" imaginea înapoi la PNG. În ceea ce privește instrumentele, chiar acum există componenta FLIF WIC API pentru Windows, pluginul QT Flif pentru Linux și PHEW Image Viewer și pluginul QuickLook pentru MACOS (consultați secțiunea de link-uri pentru detalii). În comparație cu imaginea care a fost torturată anterior de Zopflipng, FLIF reduce dimensiunea fișierului în continuare de ~ 10%. Rezultate impresionante!

Ultimul nostru erou este lepton, un alt format open-sursă publicat generos de dezvoltatorii Dropbox. Lepton face cu JPEG ce face FLIF cu PNG. Leptonul poate scădea JPEGS cu până la 22% în modul pierdut, ceea ce înseamnă că codificatorul nu provoacă nici o pierdere în calitate în comparație cu fișierul JPEG original. Sub Hood Lepton implică tehnici inteligente de comprimare a celor 8x8 blocuri JPEG. În loc să scrieți zerouri și cele, leptonul codifică datele bitmap utilizând coderul aritmetic VP8, care respectă contextul în jurul fiecărui bloc.

Testul nostru a demonstrat că leptonul este foarte eficient și rapid. Comanda arăta ca următoarele:

 Lepton original.jpg Output.Lep

Și într-o secundă sau două instrumente a produs fișierul. Fleg care a fost mai mic cu aproape un sfert din original. În comparație cu Guetzli-ul consumator de timp, leptonul este blând rapid. Puteți utiliza Lepton la fel ca Dropbox Drop. Formatul vă permite să reduceți costurile de depozitare cu 20-25% și, deoarece este atât de snappy, puteți face secvențe de codare / decodificare pe jos fără dezavantaje majore. Apropo, comanda de decodare este la fel de simplă, trebuie doar să schimbe cele două fișiere, iar fișierul rezultat este identic cu originalul JPEG:

 Lepton original.Lep ieșire.jpg

Utilizați tehnicile descrise pentru a optimiza stocarea datelor utilizatorului sau pentru a îmbunătăți în continuare vitezele de încărcare ale proiectelor dvs. web.

Cum să obțineți software-ul

Fiecare bucată de software descrisă în acest tutorial este Open Source, astfel încât să îl puteți folosi liber. Nu este nevoie să vă deranjeze compilarea totul de la surse, deoarece majoritatea instrumentelor de mai jos au descărcări binare. Iată cum să obțineți software-ul în sus și să rulați.

Apuca binarul guetzli Aici . Este cel mai ușor lucru de făcut. Zopfli dă numai codul (construiți-l cu "Make") la Github. . Cu toate acestea, poate fi mai înțelept pentru tine să o primești prin managerul de pachete NODE.JS:

NPM Instalare NODE-ZOPFLI

Unele link-uri utile pentru FLIF:

Flif-hub. : Implementarea de referință, surse și binari de ferestre
Xnview mp. : Un vizualizator de fotografie încrucișat cu suport încorporat FLIF
QT-FLIF-Plugin : Un cer pentru utilizatorii Linux
PHEW. : Un plug-in de vizualizator și Quicklook pentru MacOS
Lepton. : Codul sursă și binari de ferestre

Acest articol a fost inițial publicat în numărul 316 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpărați problema 316 aici sau Abonați-vă aici .

Articole similare:

Ghidul final pentru rezolvarea imaginii
Cum se creează textul glitch și efectele imaginii în CSS
Ghidul designerului de a folosi imagini mai eficient
4 sfaturi esențiale de optimizare a imaginilor

Cum să comprimați imaginile: un ghid de designer web

Alegeți formatul potrivit

Începeți cu metode convenabile

Tehnici avansate de compresie

Upgrade la formatele de fișiere Next-Gen

Cum să obțineți software-ul

să - Cele mai populare articole

Cum să curățați pensule: Ghidul definitiv

21 pași pentru JavaScript Super Speedy

5 caracteristici noi CSS și cum să le folosească

Creați un meniu de diapozitive

Prototipuri perfecte și modele de mână cu Marvel

Îmbunătățiți-vă textul în substanța de designer de substanțe

Cum se proiectează formularele responsabile și agnostice

Construiți un site de comerț electronic de la zero

Categorii