Pagina principala
- 28 martie 2018 Astăzi, vom vorbi despre un subiect apropiat și drag inimii mele, compresia imaginii! Glumesc pe jumătate, dar există ceva ciudat de satisfăcător în a rade procente uriașe din dimensiunea unui fișier imagine fără a diminua nicio calitate.
Inspirația pentru această postare a venit dintr-o postare foarte populară din grupul de Facebook Beaver Builders. Tocmai filmasem un tutorial video despre activarea și utilizarea noului algoritm Guetzli de la Google în ImageOptim și am fost șocat de toate celelalte opțiuni cu care nu eram familiarizat anterior. În acest articol, vom vorbi despre câteva sfaturi și instrumente pentru comprimarea imaginilor pentru web.
Înainte de a aprofunda, să stabilim o terminologie comună.
JPEG, PNG, SVG – Acestea sunt cele mai populare trei tipuri de fișiere de imagine de pe web. Pentru acest tutorial, ne vom concentra în principal pe JPEG și PNG, deoarece acestea beneficiază cel mai mult de compresie și optimizare.
JPEG-urile sunt de obicei mai bune pentru imagini de înaltă fidelitate, cum ar fi fotografiile și grafica web, care nu au nicio transparență.
PNG-urile sunt grozave pentru lucruri precum pictograme și logo-uri sau orice are nevoie de transparență. PNG-urile pot fi, de asemenea, optimizate semnificativ după ce ies din Photoshop sau din instrumentul dvs. de editare grafică la alegere.
Lossless și Lossy - Acestea sunt metode de compresie. Compresa fără pierderi înseamnă că imaginea dvs. nu va pierde nicio calitate. Literal, deloc. Aceasta implică eliminarea metadatelor din imagine sau orice altceva care nu afectează calitatea.
Cu pierdere înseamnă că algoritmul de compresie va reduce calitatea imaginii dvs. Veți obține rezultate de compresie mai bune, dar veți sacrifica calitatea imaginii. Majoritatea instrumentelor de compresie cu pierderi oferă un glisor procentual, astfel încât să puteți alege echilibrul dintre calitate și dimensiunea fișierului.
Sfat: pentru fundaluri mari de imagine, adesea voi estompa puțin imaginea sau voi adăuga un strat de culoare opac peste fotografie. Reducerea detaliilor și/sau normalizarea culorii este o alegere frumoasă de stil estetic care reduce semnificativ dimensiunea fișierului. Puteți vedea acest lucru în acțiune pe pagina noastră de locuri de muncă.
Scopul compresiei imaginii este de a reduce dimensiunea fișierului cât mai mult posibil, fără a sacrifica prea mult calitatea. Aceasta este o artă la fel de mult decât o știință, iar nivelul de „calitate acceptabilă” va varia în funcție de situație.
Un studio de fotografie va dori probabil să-și evidențieze munca la cea mai înaltă calitate, în timp ce un site imobiliar ar putea fi dispus să sacrifice calitatea în schimbul afișării mai multor imagini pe pagină.
Majoritatea programelor de editare a imaginilor vă permit să exportați imagini la o calitate diferită. Deși, dacă utilizați un instrument dedicat de compresie a imaginii, uneori este mai bine să alimentați acel software cu cea mai bună calitate posibilă și să lăsați algoritmii de compresie să funcționeze de acolo.
După cum am descoperit recent, opțiunile nu lipsesc atunci când vine vorba de instrumente și servicii pentru compresia imaginii.
Am început cu, și încă prefer, ImageOptim. ImageOptim este disponibil numai pe OSX, dar acceptă compresia cu pierderi și fără pierderi atât pentru fișierele JPEG, cât și pentru PNG. De asemenea, poate fi configurat să utilizeze algoritmul de compresie relativ nou de la Google, Guetzli. Guetzli, în medie, poate reduce dimensiunile fișierelor cu 20-30% mai mult decât alți algoritmi.
ImageOptim este un program care se află în Dock-ul Mac-ului dvs. și puteți pur și simplu să glisați și să plasați imagini pe pictograma programului și le va comprima. Tind să optimizez una sau două imagini odată, așa că această soluție funcționează grozav pentru mine. Dar, dacă lucrați la un număr mare de imagini sau imagini cu fișiere de dimensiuni mari, unele dintre celelalte opțiuni ar putea fi o alegere mai bună pentru lucrări mari.
Smush este un plugin gratuit WordPress de la WPMU Dev care poate fi configurat pentru a optimiza imaginile existente în instalarea WordPress și/sau pe măsură ce le încărcați în WordPress. Smush este grozav pentru că munca grea este făcută de serverele WPMU Dev și ambele optimizează și redimensionează imaginile.
Dacă construiți site-uri web pentru clienți - în special pentru cei cărora le place să încarce imagini de mai mulți megaocteți direct de pe camera lor digitală - Smush este o opțiune excelentă de setat și de uitat.
TinyPNG este un compresor de imagini bazat pe web. Puteți încărca imaginile (până la 5bm) și descărca versiunea comprimată. Acest lucru va consuma lățime de bandă, așa că s-ar putea să nu fie cea mai bună opțiune dacă aveți o conexiune la internet lentă sau cu plată pentru utilizare. Acceptă tipurile de fișiere JPEG și PNG. Este gratuit. Nu pare să ofere niciun control asupra nivelului de calitate al compresiei.
După ce m-am jucat cu TinyPNG, cred că încă prefer ImageOptim, dar ar fi o opțiune grozavă pentru utilizatorii de Windows, locuri de muncă rapide și unice sau utilizatori care caută în mod special un compresor bazat pe web. Sau, dacă încercați să descărcați procesarea în cloud față de mașina dvs. locală.
Imagify este o altă opțiune SASS bazată pe web care oferă un plugin WordPress dedicat pentru optimizarea și redimensionarea imaginilor pe măsură ce le încărcați sau direct din zona de administrare WordPress. Plugin-ul Imagify WordPress se mândrește cu o recenzie medie impresionantă de 4,5 stele și multe recenzii notează că calitatea imaginii obținută cu Imagify este mai bună decât alternativele.
Imagify are un plan gratuit care vă permite să încărcați și să optimizați imagini sub 2 MB. Versiunea optimizată a imaginilor va rămâne disponibilă pentru descărcare de pe serverele lor timp de 24 de ore.
JPEGMini este un serviciu SASS care ar trebui să atragă oamenii care caută o soluție de lucru. Imaginați-vă că aveți sarcina de a optimiza zeci de mii de imagini de produse de înaltă rezoluție pentru un magazin de comerț electronic. JPEGMini v-ar permite să descărcați toată procesarea pe serverele lor cloud, probabil, rapide și optimizate.
ShortPixel este un alt SASS bazat pe web. Dacă doriți să descărcați compresia imaginii pe un server cloud, este o opțiune excelentă de verificat. Planul lor gratuit vă permite să optimizați până la 100 de imagini pe lună și au planuri premium care încep de la 5 USD/lună pentru mai mult. ShortPixel are, de asemenea, un plugin pentru WordPress și sunt favoriții de rulare printre restul echipei BB.
Imaginează
Dacă vizitați firul original de Facebook care a inspirat această postare, veți vedea alte câteva opțiuni și oameni care preferă una sau alta dintr-o varietate de motive. Ne lipsește preferatul tău? Spune-ne ce este și de ce îți place în comentarii.
De asemenea, dacă sunteți genul care mănâncă, doarme și respiră performanță, acest interviu cu Jon Brown despre cele mai bune practici moderne de performanță va atrage probabil.
pe 30 aprilie 2018 la ora 11:35Haha. Da, majoritatea companiilor care au o mascota animală sunt destul de solide.
pe 28 martie 2018 la 16:30Tinypng are, de asemenea, un plugin pentru Wordpress https://wordpress.org/plugins/tiny-compress-images/ și API-ul lor este bun pentru a lucra dacă trebuie să configurați ceva pe server.
pe 28 martie 2018 la 20:45Genial. Tocmai am început să folosesc ShortPixel. bine conceput, prietenos cu pluginul (Activați înlocuirea media) și rentabil.
Mi-ar plăcea să văd un articol care integrează S3 Offload cu Beaver, inserarea în cache a pluginului bb o face deosebit de dificilă.
pe 29 martie 2018 la ora 9:02Eu folosesc EWWW. Pentru site-urile cu tone de imagini licențiați nelimitat cu CDN. Pentru 10 o dată, utilizați https://ewww.io/online-image-optimizer/
pe 29 martie 2018 ora 10:51Am testat toate pluginurile de compresie/optimizare a imaginilor WordPress pentru cele peste 20 de site-uri WordPress ale mele, dintre care unele cu conținut generat de utilizatori (adică imagini cu fundul mare) și pentru mine, cea mai bună opțiune, de departe, este ShortPixel. Am descoperit că compresia lor are cel mai bun raport calitate/dimensiune din clasă, iar modelul lor de preț este corect. În plus, nu sunt limitat de dimensiunea fișierului și se optimizează complet chiar dacă sunteți în planul gratuit.
pe 31 martie 2018 la 23:05Am folosit TinyPNG în tot acest timp, par să umfle imaginea după încărcare și apoi o comprimă (s-ar putea să greșesc, dar văd o dimensiune mai mare a imaginii după încărcare decât dimensiunea reală) N-am știut niciodată despre ImageOptim pare foarte util instrument.
pe 4 aprilie 2018 la ora 5:58 Frumoasa recenzie. Înainte de a încărca, folosesc webresizer.com ca alternativă la TinyPNG. Vă oferă un control bun asupra produsului final. Au un redimensionator/compresor în vrac, dar este cel mai bine utilizat cu un număr de imagini care ar trebui să aibă toate aceeași dimensiune.
Pe site-ul nostru, am descoperit că Imagify funcționează bine.
pe 10 aprilie 2018 la 10:17Aceste servicii sunt grozave, mulțumim pentru compilarea acestei liste.
Vreau să subliniez că, dacă utilizați deja Photoshop, puteți face acest lucru și prin Photoshop. În loc de „Salvare ca…”, accesați:
Fișier –> Exportare –> Salvare pentru web (moștenire)
Apoi, în presetarea, schimbați la JPEG High, JPEG Medium sau JPEG Low compresie. Apoi faceți clic pe „salvare”. Acest lucru atinge același rezultat ca și serviciile de mai sus.
pe 10 aprilie 2018 la 15:11În mod surprinzător, multe dintre aceste instrumente și servicii sunt mai bune la reducerea dimensiunii fișierului decât Photoshop.
pe 2 mai 2018 la ora 3:07Eu fac același lucru cu Photoshop, dar cred că ImageOptim și Smush vor reduce și mai mult dimensiunea fișierului fără o pierdere vizibilă a calității.
pe 11 aprilie 2018 la ora 7:56Cred că oamenii ar trebui să se uite mult mai în serios la instrumentele de optimizare a conținutului precum IMGIX și Cloudinary.
pe 15 aprilie 2018 la ora 8:56Mai bine folosești compressman! Nu folosește internet și este doar site-ul web
pe 19 aprilie 2018 la 6:52 amTindem să folosim Smush și Short Pixel pentru clienții noștri. Pixelul scurt oferă o compresie mai bună, dar Smush este, de asemenea, bun, setați și uitați de el.
pe 23 aprilie 2018 la ora 7:25Sunt un mare fan al folosirii ImageOptim pe OSX! Îl folosesc pe fiecare imagine pe care o trimit pe web, indiferent de platforma pe care va fi afișată!
pe 26 aprilie 2018 la 19:10În ceea ce privește modificările setărilor din ImageOptim, lași nivelul de Optimizare implicit, Extra?
pe 30 aprilie 2018 la ora 11:34În majoritatea cazurilor, da.
pe 26 aprilie 2018 la 21:56Sunt surprins că nimeni nu a menționat Kraken.io (https://kraken.io/). Poate fi folosit din interfața lor web sau ca plugin WordPress.
pe 3 mai 2018 la ora 10:07Folosesc un Chromebook care arată ca o alternativă bună. Am folosit http://guetzliconverter.linuxadm.hu/
pe 29 aprilie 2018 la ora 6:06Cea mai bună bibliotecă pe care am găsit-o pentru PNG este PNGQuant, dar m-am străduit să o fac să funcționeze local. Așa că acum îmi rulez toate imaginile prin http://compresspng.com/ care folosește PNGQuant. Îmbunătățire uriașă față de ImageOptim.
pe 2 mai 2018 la ora 3:05Am folosit ImageOptim și versiunea gratuită Smush. Îmi place în special Smush. Există și alte beneficii ale trecerii la versiunea plătită, în afară de posibilitatea de a optimiza mai multe imagini simultan?
pe 3 mai 2018 la ora 10:04Acest lucru optimizează mult mai bine decât Smush, după părerea mea.
pe 26 octombrie 2018 la ora 2:07Mulțumesc pentru listă.. în prezent, utilizând Smush de la WPMU Dev și funcționează perfect..
pe 21 noiembrie 2018 la 20:01Știu că probabil că sunt depășit, dar am un control excelent asupra compresiei imaginii cu Fireworks. În umila mea părere, cel mai bun program raster/vector de acolo.
pe 22 noiembrie 2018 la 13:09Focuri de artificii a fost sau este un program grozav. Nu l-am folosit de ani de zile, totuși, ar putea fi timpul să-l deschid înapoi pentru a vedea cât de mult îmi lipsește.
pe 18 decembrie 2018 la 22:46Mulțumesc pentru acest articol frumos! Folosesc pluginul Image Optimizer pentru site-ul meu.
Buletinul nostru informativ este scris personal și trimis aproximativ o dată pe lună. Nu este deloc enervant sau spam.
Promitem.
Votul nostru este pentru Tinypng. Ne place pluginul lor, care se poate optimiza pe măsură ce încărcați pe site-ul dvs. – și nouă ne place Panda! Vom arunca o privire și la ImageOptim pe măsură ce folosim Mac. Super listă băieți.