Bildeoptimalisering som en viktig komponent i CRO-prosessen. Sette opp Jpegoptim-programmet
I den nåværende tidsalderen for mobilteknologi er bildeoptimalisering i PNG-formater og JPG, JPEG ble aktuelt igjen, ettersom det var aktuelt i de dager da Internett nettopp kom inn i livene våre og var universelt treg og oppringt. Mobilt internett er selvfølgelig ikke helt riktig å sammenligne med oppringt, men på steder hvor tilkoblingen er dårlig er tilgangshastigheten ganske lav. Og selv i disse dager hadde brukeren ingen steder å gå, og måtte vente på at siden skulle lastes. Nå har Internett vokst, det er et stort utvalg av nettsteder. Brukeren ble lunefull og utålmodig, og den gjennomsnittlige sideinnlastingstiden gikk kraftig ned. Det er lettere for brukeren å finne et annet raskere nettsted.
Ja, og søkegiganter som Google eller Yandex begynte å ta hensyn til hvor raskt nettsteder lastes, og ga preferanse i søkeresultatene til de som er raskere. Vekten på siden spiller også en viktig rolle i dette, som igjen avhenger sterkt av vekten av bildene som ligger på den. Det er ganske åpenbart at det å ha kompakt komprimerte bilder kommer alle til gode. Derfor vil jeg her snakke om hvordan du forbereder PNG- og JPG-, JPEG-filer for opplasting til hosting.
Grunnleggende bildeoptimalisering
Dette innebærer å trimme unødvendige felt, redusere fargedybden, fjerne kommentarer og lagre bildet i et passende format. Til dette kan du bruke Adobe Photoshop, eller hvis du ikke har en, MS Paint eller GIMP.
Selv grunnleggende beskjæring av bildet vil redusere vekten ganske bra.
Hvordan gjøre et bilde mindre i MS Paint
Ved å bruke MS Paint som et eksempel, skal jeg vise deg hvordan du reduserer et bilde til ønsket størrelse.
La oss ta for eksempel NGINX-logoen og dens nginx.png-bilde som måler 2000x417 piksler, som må beskjæres til 1024 i bredden, fordi Dette er bredden på sideoppsettet, og det er ingen vits i å gjøre mer.
Utgangen er et bilde som har gjennomgått minimal grunnleggende optimalisering. Det er på tide å gå videre til å komprimere vekten hennes.
File Optimizer for PNG og JPG, JPEG-komprimering
Den enkleste og rask måte oppnå optimal bildekomprimering uten tap av kvalitet - bruk File Optimizer-programmet
Offisiell nettside og programbeskrivelse :
Last ned File Optimizer du kan med
Beskrivelse
. Det er en effektiv optimering ikke bare for bilder, men også for .pdf, .docx, txt og andre tekst-, lyd- og videofiler, så vel som arkiver. En fullstendig liste over støttede utvidelser finner du på offisiell side prosjekt.
Her er noen av verktøyene som brukes i arbeidet: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngrewrite, Tru, png5Reg, pngwolf,pngwolf,png5,png,png,,png,. Jeg synes selv denne delvise listen er ganske imponerende.
Installere og bruke File Optimizer
Første nedlasting siste versjon programmer enten i form av et installasjonsprogram eller et arkiv med filer. Arkivet har forresten en versjon for 32-biters og 64-biters versjoner av Windows.
Grensesnittet er ganske enkelt og intuitivt.
Trenger ingen innstillinger, men du kan tilpasse noen formater for deg selv ved å bruke Alternativer-knappen...
Bruk
. Du enten drar og slipper de nødvendige filene og til og med mapper (kataloger) inn i programvinduet, eller du velger de du trenger gjennom Legg til filer...-menyen.
For å optimalisere filer, klikk på Optimaliser alle filer
De optimaliserte filene vil erstatte kildefilene, og kategorihierarkiet vil også bli bevart. Motsatt hver fil vil statistikk vises, som en prosentandel av original størrelse Den optimaliserte versjonen av filen veier.
Etter endt arbeid vil statistikk over antall behandlede filer vises nedenfor i statuslinjen, samt hvor mye som er lagret.
Etter min mening gjør File Optimizer jobben sin veldig bra.
Det eneste negative er at hvis listen over filer er stor, kan du vente lenge på resultater, men det er verdt det.
Hvis du er interessert i detaljer om optimaliseringsmetoder som kan konfigureres på din egen måte, vil vi snakke om å sette opp og bruke verktøy for bildekomprimering
Komprimer PNG uten å miste kvalitet
La oss se på 3 programmer for PNG-optimalisering:
- Adobe Photoshop
- OptiPNG
- PNGOUT
La oss sammenligne dem når det gjelder bildekomprimeringskvalitet. Vi vil komprimere nginx.png fra forrige seksjon. Den opprinnelige vekten er 27,5 KB.
Komprimer PNG med Adobe Photoshop
Den første på listen er Photoshop, som er godt kjent for alle. En multifunksjonell prosessor for en designer som kan gjøre nesten alt, inkludert å komprimere bilder.
Åpne i Photoshop Fil-lagre for web eller bruk en kombinasjon Alt+Shift+Ctrl+S
Som et resultat får vi 22,7 KB, dvs. krympet med 17,5 %
Dessverre de fleste grafikk programmer er ikke i stand til å utløse det fulle potensialet til algoritmene som brukes til å komprimere PNG. Hovedårsaken er at for å bestemme den optimale komprimeringsstrategien, bruker de heuristiske algoritmer som lar dem estimere effektiviteten til visse parametere uten å utføre komprimering, som som et resultat produserer en stor prosentandel av feil. Derfor, for å komprimere PNG bruker vi verktøy spesielt laget for dette formålet, nemlig OptiPNG og PNGOUT.
Bruke OptiPNG til å komprimere PNG
Hvordan installere og bruke OptiPNG
Lastet ned .exe, lastet den opp til C:\Windows, tok ønsket PNG-fil og la den i en mappe. Bruk nå FAR Manager eller en annen filbehandler med konsollstøtte, gå til denne mappen og skriv inn kommandoen i konsollen
Optipng -o7 nginx.png
Kommandoen tvinger deg til å komprimere PNG i mappen. Senere skal vi se på et enkelt alternativ for hvordan du gjør komprimering med ett klikk.
Men først, la oss ta en titt på resultatet.
18,8 KB, dvs. krympet med 31,6 %, nesten en tredjedel. Ikke verst i det hele tatt, er det ikke? Photoshop ble mye verre.
Bruke PNGOUT for å komprimere PNG
Hvordan installere og bruke PNGOUT
Alt er nøyaktig det samme som for OptiPNG. Last ned PNGOUT.exe, slipp den inn i C:\Windows, åpne mappen med PNG i en filbehandler, for eksempel Far Manager, og skriv på kommandolinjen
Pngout nginx.png
Resultatet er nedenfor
Resultatet er 23,4 KB, dvs. klarte å komprimere med 15 %. Veldig bra.
Generelt vil jeg si med en gang at jeg hadde forskjellige resultater med forskjellige filer, noen steder fungerte PNGOUT mer effektivt, andre steder OptiPNG, så jeg anbefaler deg å kjøre bildene én etter én gjennom begge verktøyene.
Hvordan raskt komprimere PNG i OptiPNG og PNGOUT
Lag en png.reg-fil og skriv registerdataene der
Windows Registerredigering versjon 5.00 @="Kjør OptiPNG på mappe" @="cmd.exe /c \"TITEL Kjører OptiPNG på %1 && FOR /r \"%1\" %%f IN (*.png) GJØR optipng -o7 \"%%f\" \"" @="Kjør PNGOUT på mappen" @="cmd.exe /c \"TITEL Kjører PNGOUT på %1 && FOR /r \"%1\" %%f IN (*.png) GJØR pngout \"%%f\" \""
Deretter kjører du denne filen og skriver dataene til Windows-registeret.
Nå, når du klikker på en mappe med PNG-filer som må komprimeres, velg kommandoene du trenger, komprimering vil skje automatisk for alle bilder samtidig.
For å fjerne alt fra kontekstmenyen, skriv følgende kode inn i png.reg og kjør den
Windows Registerredigering versjon 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\Classes/MACHINE\Classes] -HKEY_LOCAL_MACHINE\SOFTWARE\Klasser\Folder\shell\PNGOUT\command]
JPG, JPEG-komprimering uten kvalitetstap
For å optimalisere JPG, JPEG, analogt med PNG, er det verktøy: jpegtran og jpegoptim. Selvfølgelig kan du bruke Photoshop, men for JPG- og JPEG-komprimering anbefaler jeg å bruke dem.
Hvordan installere, konfigurere og bruke jpegtran
jpegtran - kraftig verktøy, som lar deg utføre både enkel JPG-komprimering uten tap av kvalitet, samt komprimering med et visst nivå av anti-aliasing, og til og med konvertering til progressiv JPEG.
Du kan laste ned jpegtran her http://jpegclub.org/jpegtran/ (se etter og last ned jpegtran.exe).
Hvordan komprimere JPG, JPEG ved hjelp av jpegtran
Last opp jpegtran.exe til C:\Windows
Åpne deretter mappen med ønsket JPEG i Far Manager og skriv inn i konsollen
Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Grunnleggende optimalisering 1.jpg # -copy none fjerner metadata fra JPG # -optimize optimerer bildet
Progressiv JPG, JPEG
Dette er en type JPG som, når siden laster, først viser den generelle omrisset, deretter laster og bringer bildekvaliteten til maksimal. Veldig praktisk for sakte mobilt internett, og derfor må den brukes.
Jpegtran -progressiv -outfile 1.jpg 1.jpg # Transformerer 1.jpg-formatet til progressivt
Hvordan sjekke om et bilde er en progressiv JPEG
Avanserte funksjoner i jpegtran
Her er alle mulige alternativer for bruk av jpegtran
Jpegtran --hjelpebruk: jpegtran inputfile outputfile Brytere (navn kan forkortes): -copy none Kopier ingen ekstra markører fra kildefilen -kopier kommentarer Kopier kun kommentarmarkører (standard) -kopier alle Kopier alle ekstra markører -optimaliser Optimaliser Huffman-tabell (mindre fil, men treg komprimering) - progressiv Opprett progressiv JPEG fil Brytere for å endre bildet: -beskjær BxH+X+Y Beskjær til et rektangulært underområde -speil speilbilde (venstre-høyre eller topp-bunn) -gråtoner Reduser til gråtoner (utelat fargedata) -perfekt Mislykkes hvis det ikke er transformerbare kantblokker -roter Roter bildet (grader med klokken) -skala M/N Skaler utgangsbilde etter brøk M/N, f.eks. 1/8 -transponer Transponer bilde -tverrgående transponer bilde -trim Slipp ikke-transformerbare kantblokker -wipe BxH +X+Y Slett (grå ut) et rektangulært delområde Brytere for avanserte brukere: -aritmetisk Bruk aritmetisk koding -restart N Sett omstartsintervall i rader, eller i blokker med B -maxmemory N Maksimalt minne å bruke (i kbyte) -utfilnavn Spesifiser navn for utdatafil -verbose eller -debug Send ut feilsøkingsutgang Brytere for veivisere: -skanner fil Lag flerskannende JPEG per skriptfil
Hvordan raskt automatisk komprimere JPEG ved hjelp av jpegtran i Windows
Du vil ikke kunne komprimere via kontekstmenyen på grunn av måten verktøyet fungerer på, men du kan sette opp komprimering av flere JPEG-er samtidig automatisk.
For å gjøre dette, må vi lage en fil med filtypen .bat (for å hjelpe) og skrive den der
Cd/d. for %%j i (*.jpg) ring:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2 "
Hvordan installere, konfigurere og bruke jpegoptim
Hvordan komprimere JPG, JPEG ved hjelp av jpegoptim
Last opp jpegoptim.exe til C:\Windows. Åpne deretter mappen med JPG-bilder ved å bruke Far Manager og gå inn i konsollen
Jpegoptim *.jpg --strip-all --all-progressive
Hvordan optimalisere flere JPG-er, JPEG-er samtidig ved å bruke jpegoptim
I motsetning til jpegtran, lar jpegoptim-verktøyet deg jobbe med det ganske bra fra kontekstmenyen.
La oss lage en fil jpegoptim.reg, for eksempel ved å bruke Far Manager, og skrive der
Windows Registerredigering versjon 5.00 @="Kjør jpegoptim på mappe" @="cmd.exe /c \"TITEL Kjører jpegoptim på %1 && FOR /r \"%1\" %%f IN (*.jpg) GJØR jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""
Vi lanserte den og la inn dataene i registeret. Nå kan du komprimere mange JPEG-filer ved hjelp av kontekstmenyen, bare legg de ønskede bildene i én mappe, RMB og "Kjør jpegoptim på mappe".
Hvis du vil fjerne jpegoptim fra registeret og kontekstmenyen, skriv jpegoptim.reg
Windows Registerredigering versjon 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]
Lagre, kjør, gjør endringer i registeret.
Hvor godt komprimerer jpegtran og jpegoptim jpg, jpeg
La oss gå videre til testene. Ta for eksempel filen caching.jpg. I originalen veier den 29,5 KB
Jpegtran tester for JPG, JPEG komprimeringskvalitet
jpegtran -copy none -optimize -progressive caching.jpg caching.jpg
Utgangen var 29,1 KB, komprimering spart 1,36 %
Jpegoptim tester for JPG, JPEG komprimeringskvalitet
jpegoptim caching.jpg --strip-all
I Windows utforsker dette er ikke synlig; komprimeringen var flere hundre byte.
Vel, den originale filen var ganske godt forberedt, så komprimeringen hadde ingen merkbar effekt, men når du behandler de uoptimaliserte bildene dine, vil du noen ganger bli overrasket over hvor mye du kan spare i størrelse.
Hvordan sette opp png og jpg, jpeg-komprimering automatisk
Hvis du har lest til denne delen, men fortsatt er misfornøyd med alternativene som tilbys, foreslår jeg at du setter sammen en bærbar hogstmaskin selv - en tjeneste for å komprimere bilder, bilder, bilder som vil fungere som du trenger rett på skrivebordet ditt.
Må være forhåndsinstallert jpegtran, jpegoptim, optng, pngout Yu
Installasjonsinstruksjoner er ovenfor.
Så for dette må vi sette sammen mappearkitekturen riktig. La oss si at du har en bildemappe med sitt eget hierarki av undermapper med PNG og JPG som du må behandle.
Lag en mappeoptimus, legg bildemappen med alle undermapper og filer inn i den.
Åpne , åpne optimus i den, lag en go.bat-fil der og skriv den der
@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Navn på mappen der råbildene er plassert sett mappe=bilder ekko Behandler *.JPG-filer via jpegtran:: Opprett en mappe der råbildene skal være lagret komprimert jpg. I vårt tilfelle er dette jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: For hver .jpg optimaliserer vi ved å bruke jpegtran. Output.jpg vil bli skrevet til jpeg_images for /r %folder% %%a i (*.jpg) do (sett fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~ dp0 =!%home_path%!fn:%~dp0=!) ekko Behandling av *.JPG-filer via jpegtran er fullført:: Vi indikerer at kjøringen nå skal utføres i en ny mappe jpeg_images set folder = jpg_%folder% ekkobehandling av *.JPG-filer via jpegoptim for /r %mappe% %%a i (*.jpg) do (sett fn=%%a& jpegoptim %%~a --strip-all) ekkobehandling av *.JPG-filer via jpegoptim fullført ekko Behandling av *.PNG-filer via optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a i (*.png) do (sett fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) ekko Behandler *.PNG-filer via optipng fullført sett folder=png_%mappe% ekko Behandler *.PNG-filer via pngout for /r %folder% %%a in (*.png) do (sett fn=%%a& pngout %%~a) ekko Behandling av *.PNG-filer via pngout fullført pause
Koden er kommentert i viktige deler. Faktisk, ingenting komplisert, du kan finne ut av det hvis du trenger det.
Lagre nå go.bat og kjør den.
Hvis det er mange filer, vil bildekomprimering ta litt tid. Vent til konsollen varsler deg om at prosessen er fullført.
Komprimering skjer ved å skille JPG-filer separat, som nå ligger i jpg_images, og PNG-filer separat, som ligger i png_images.
Hvis du trenger å endre kvalitet eller andre parametere, se beskrivelsen av verktøyene ovenfor og endre koden slik at den passer dine behov.
Hvordan optimalisere og komprimere GIF
Endelig
I denne artikkelen prøvde jeg å dekke så fullstendig som mulig metodene for å optimalisere PNG og JPG. Hvis du har spørsmål eller tillegg, skriv i kommentarene, så diskuterer vi
Hei kjære venner. I dag skal jeg fortelle deg hvordan du kan optimalisere bilder for å øke hastigheten på lasting av nettsider. Men først skal jeg fortelle deg hvorfor jeg ikke har skrevet på nesten en uke. Denne uken kjempet jeg med byråkratiet, prøvde å få et nytt pass. Du kan bare ikke forestille deg hva som skjer i passkontorene nå - det er bare et mareritt (køer, folkemengder, skandaler). Enda verre enn vanlig. Alt går veldig sakte. Jeg har en følelse av at første gang jeg fikk pass var mye enklere og raskere.
Generelt "spytter" jeg på det. Jeg gikk til Internett, registrerte meg på den offentlige tjenesteportalen og registrerte meg for denne tjenesten, uten å stå i kø og kaste bort dyrebar tid.
Hva snakker jeg om alt dette om, men til det faktum at denne situasjonen minner meg om tingenes tilstand med nettsider og blogger. Langsom lasting av et nettsted er ikke bare irriterende, men fører generelt til at mange besøkende lukker nettstedet uten å vente på at det skal lastes. Besøkende vet kanskje ikke engang om din nyttig innhold, hvis de ikke kan vente på at nettstedet skal lastes inn.
Og selv om i dag nesten hver bruker høyhastighets internett Og synlig lasting nettsteder er ikke så merkbare, søkemotorer tar fortsatt hensyn til parameteren "Sideinnlastingshastighet", som en av nettstedsrangeringsfaktorene. Dessuten har lastehastighet en positiv effekt på atferdsmessige faktorer, som heller ikke er uviktig.
Selvfølgelig er det ganske mange parametere som påvirker lastehastigheten til et nettsted. Og det er ikke mulig å vurdere alt dette i én artikkel. La oss derfor starte med den vanligste årsaken til at nettstedets lastehastighet reduseres - uoptimaliserte bilder.
Hvor kan du finne ut om årsakene til treg sidelasting
Det er mange tjenester for å sjekke lastehastigheten på nettstedet. Men vi vil snakke om tjenester som viser årsakene til sakte lasting.
Jeg bruker to tjenester:
Først laster du ned bildet til datamaskinen din, rediger det og last det opp tilbake til samme adresse. Du trenger ikke gjøre noe mer i WodrPress. Men hvis dette er en selvskrevet side, ikke glem å spesifisere de nødvendige parametrene for bredde (bredde=”200″) og høyde (høyde=”200″) i HTML-koden. Fraværet av disse parameterne påvirker lastehastigheten til nettstedet, som det fremgår av parameteren "Spesifiser bildedimensjoner" når du analyserer et nettsted i GTmetrix.
Som du kan se på skjermbildet, har ikke temaet mitt nok parametere (16x16, 32x32) for kommentarikoner, kategorier, datoer og så videre.
Hvordan spesifisere bildebredde og høydealternativer i et WordPress-tema
Så la oss se på eksemplet mitt. Emnet mitt angir ikke størrelsen på disse bildene:
Bilder uten størrelsesangivelse
Dette betyr at du må finne et sted i malen hvor disse bildene vises. Og de vises på hovedsiden og på materialsiden. Filen som er ansvarlig for hovedsiden ( index.php), og filen er ansvarlig for materialet ( singel.php).
Så vi river det administrative WordPress-panel– « Utseende» > "Redaktør"- den nødvendige filen. Og legg til bredde- og høydeparametere basert på de foreslåtte dimensjonene i GTmetrix-rapporten.
Det er alt, det er ingen triks. Og så, analogt, finjusterer du alle bildene dine. Men husk, når du arbeider med kildekoden, vær veldig forsiktig, se nøye hvor du skriver parametrene. Tross alt er det nok å slette anførselstegnet, og ingenting vil skje. Generelt, hvis du ikke er sikker, ta sikkerhetskopier av filene du redigerer. Dette vil hjelpe deg å rette opp alt hvis du gjør en feil.
Og mest sannsynlig vil rapporten din ha lav poengsum for parameteren «Kombiner bilder med CSS-sprites». Denne parameteren forteller deg at nettstedet har identiske bilder som kan kombineres til sprites for å øke hastigheten på sidens lasting. Men dette kan ikke sies med få ord. Derfor vil vi snakke om dette i de følgende artiklene. I mellomtiden har du noe å jobbe med.
Se også videoopplæringen, i den viser jeg tydelig hvordan du bruker tjenestene og hvordan du kan optimalisere bilder.
Det var alt for meg i dag. Jeg ønsker dere lykke til, venner. Å optimalisere bildene dine er det første skrittet mot rask lasting nettstedet.
Vi sees i de neste artiklene.
Hastigheten på å laste inn nettsider er en av faktorene i søkemotorenes "holdning" til nettstedet ditt. Jo raskere sidene lastes, desto mer lojale er brukerne mot siden – ingen liker å vente lenge og kaste bort mye trafikk.
Den (tilsynelatende) lukkede Google-tjenesten PageSpeed Insights er viden kjent, slik at du kan sjekke alle publiserte nettsteder for lastehastighet og, basert på resultatene av kontrollen, gi en vurdering på en hundrepunkts skala og anbefalinger. Vanligvis inkluderer anbefalinger optimalisering og reduksjon av programkode, komprimering av bilder, oppsett av server- og nettleserbufring, etc.
For den gjennomsnittlige innholdsressursen på og gratis CMS som WordPress(ja, jeg snakker om mine og tusenvis av lignende nettsteder) optimeringsalternativer er begrenset til å installere caching-plugins og arbeide med bilder. "Snarvei" temaet og forkort HTML, CSS og JavaScript-kode Ikke alle kan, og slike handlinger fører som regel til forskjellige feil og tap av funksjonalitet.
For å jobbe med bilder under WordPress finnes det en rekke plugins som konverterer og komprimerer bilder med eller uten tap, på farten eller på forespørsel. Den beste, etter min mening, av disse pluginene er EWWW Image Optimizer.
Som et alternativ kan du koble til en CDN-tjeneste slik at statisk innhold, nemlig grafikk, serveres fra tredjepartsservere, noe som letter belastningen litt filserver hosting og ved å distribuere kilder, øke hastigheten på sidelasting. I mitt tilfelle gjøres dette av Photon-modulen som en del av den ekstremt populære og periodisk kritiserte JetPack-pluginen.
Alt dette fungerer i ulik grad, men det er en universell måte å optimalisere bilder for ethvert nettsted som kjører ikke bare på WordPress - for å komme i gang trenger du bare en Google-konto.
Vi snakker merkelig nok om Google Photos - en tjeneste som er utviklet for å lagre bilder tatt på Android-smarttelefoner og sikkerhetskopierte bilder og videoer installert spesiell nytte databrukere.
Anbefalt av eksperter i PageSpeed Insights-hjelpen Google-prosessen bildeoptimalisering er beskrevet som følger:
Optimaliser bildene dine
Denne regelen utløses når PageSpeed Insights oppdager at størrelsen på bildene på siden kan reduseres uten stort tap av kvalitet.
generell informasjon
Prøv å holde størrelsen på bildene til et minimum: dette vil øke hastigheten på lasting av ressurser. Riktig format og komprimering av bilder kan redusere størrelsen. Takket være dette kan brukere spare tid og penger.
Grunnleggende og avansert optimalisering bør utføres på alle bilder. Som en del av grunnleggende optimalisering trimmes unødvendige felt, fargedybden reduseres (til minimum akseptabel verdi), kommentarer fjernes og bildet lagres i et passende format. Grunnleggende optimalisering kan gjøres ved å bruke et hvilket som helst bilderedigeringsprogram, for eksempel GIMP. Avansert optimalisering utfører komprimering JPEG-filer og PNG (lossless).
Bruk bildekomprimeringsverktøy
Det finnes verktøy som utfører ekstra komprimering på JPEG- og PNG-filer uten tap eller reduksjon i kvalitet. For JPEG-filer anbefales det å bruke jpegtran eller jpegoptim (bare tilgjengelig på Linux, kjør med --strip-all-alternativet). For PNG er det bedre å bruke OptiPNG eller PNGOUT.
Det siste avsnittet ser ut til å beskrive verktøy som Googles servere bruker for automatisk å optimalisere brukerbilder lastet opp til Bilder. Videofiler som er inkludert i tjenesten er forresten også optimalisert, men dette er helt uviktig gitt YouTubes fortsatte eksistens.
La oss se på et eksempel. I dag fotograferte jeg en brettekniv til neste publikasjon og kjørte de resulterende bildene gjennom applikasjonen FastStone-bilde Viewer (“kunstnerisk” beskjæring + endre størrelse på opptil 1280 piksler i bredden). Resultatet ble en mappe med åtte filer som veier mer enn 3 (!) megabyte.
Tilsynelatende nyinstallert FastStone-visning Image Viewer lagrer som standard redigerte bilder i nær maksimal kvalitet, noe som fører til en urimelig stor "vekt" av filer. Men en slik setting i vårt tilfelle er ganske berettiget, fordi Google algoritmer de komprimerer bilder uten synlig tap av kvalitet med 100 % skalering, noe som betyr at bilder av god kvalitet forblir slik selv etter opplasting til Google Foto.
For enkelhets skyld er det bedre å plassere de nedlastede bildene i et nytt album, som kan lastes ned i sin helhet nesten umiddelbart etter opprettelse som et ZIP-arkiv:
Hvis du sammenligner bilder komprimert i Google Photos med de originale, får du betydelige besparelser.
816 KB mot 3,27 MB. Samtidig ble kvaliteten på fotografiene, etter min mening, ikke skadet i det hele tatt. Facebook og VKontakte bør lære av Google hvordan man kan optimalisere bilder. Dessuten er GPhotos utstyrt med gode bilderedigeringsverktøy - fra å bruke filtre til å manuelt justere kontrast, lysstyrke, metning osv.
Dermed er Google Photos ikke bare en utmerket sky for lagring og publisering av bilder, men også kraftig verktøy optimalisere bilder for publisering på nettet. Bare når det gjelder WordPress, ikke glem å deaktivere optimalisering av plugins og den samme Jetpack Photon-modulen, ellers vil fotografier som allerede er klargjort for publisering gjennomgå ytterligere komprimering, noe som vil føre til et merkbart tap av kvalitet (se for eksempel skjermbildene som gikk gjennom Google Foto og deretter Photon i dette innlegget ).
Grunnen til denne artikkelen var følgende innlegg: . På et tidspunkt måtte jeg skrive mye forskningskode i C#, som implementerte ulike komprimerings- og prosesseringsalgoritmer. Det er ingen tilfeldighet at jeg nevnte det faktum at koden er forskning. Denne koden har unike krav. På den ene siden er ikke optimalisering veldig viktig – det er tross alt viktig å teste ideen. Selv om jeg vil at denne sjekken ikke skal vare i timer og dager (når en lansering utføres med ulike parametere, eller et stort korpus av testbilder behandles). Metoden som ble brukt i innlegget ovenfor for å få tilgang til piksellysstyrker bmp.GetPixel(x, y) er hvordan mitt første prosjekt startet. Dette er den tregeste, men enkleste måten. Er det verdt bryet her? La oss måle det.
Vi vil bruke den klassiske bitmap (System.Drawing.Bitmap). Denne klassen er praktisk fordi den skjuler detaljene for koding av rasterformater for oss - som regel interesserer de oss ikke. Alle vanlige formater støttes, slik som BMP, GIF, JPEG, PNG.
Forresten, jeg vil tilby den første fordelen for nybegynnere. Bitmap-klassen har en konstruktør som lar deg åpne en fil med et bilde. Men det har han ubehagelig funksjon– den lar tilgangen til denne filen være åpen, så gjentatte anrop til den fører til et unntak. For å korrigere denne oppførselen kan du bruke denne metoden til å tvinge punktgrafikken til å "frigi" filen umiddelbart:
Offentlig statisk bitmap LoadBitmap(string fileName) (bruker (FileStream fs = new FileStream(fileName, FileMode.Open, FileAccess.Read, FileShare.Read)) returner ny bitmap(fs); )
Måleteknikk
Vi vil måle ved å destillere bildebehandlingsklassikeren Lena til en array og tilbake til Bitmap (http://en.wikipedia.org/wiki/Lenna). Dette er et gratis bilde, det kan finnes i mange bildebehandlingsarbeider (og i tittelen på dette innlegget også). Størrelse – 512*512 piksler.Litt om metodikken - i slike tilfeller foretrekker jeg å ikke jage ultrapresise timere, men bare utføre den samme handlingen mange ganger. Selvfølgelig, på den ene siden, i dette tilfellet vil dataene og koden allerede være i prosessorens cache. Men på den annen side identifiserer vi kostnadene ved den første lanseringen av koden knyttet til oversettelse av MSIL-kode til prosessorkode og andre overheadkostnader. For å garantere dette kjører vi først hver kode en gang - vi utfører den såkalte "oppvarmingen".
Kompilerer koden for utgivelse. Vi lanserer den definitivt ikke fra studio. Dessuten er det også tilrådelig å lukke studioet - jeg har kommet over tilfeller der selve "forsømmelsen" noen ganger påvirker de oppnådde resultatene. Det er også tilrådelig å lukke andre applikasjoner.
Vi kjører koden flere ganger, og oppnår typiske resultater - vi må sørge for at den ikke blir påvirket av en uventet prosess. La oss si at antiviruset våknet eller noe annet. Alle disse tiltakene lar oss oppnå stabile, repeterbare resultater.
"Naiv" metode
Dette er metoden som ble brukt i den opprinnelige artikkelen. Den består i å bruke Bitmap.GetPixel(x, y)-metoden. Her er den komplette koden for en lignende metode som konverterer innholdet i en bitmap til en tredimensjonal byte-array. I dette tilfellet er den første dimensjonen fargekomponenten (fra 0 til 2), den andre er y-posisjonen, den tredje er x-posisjonen. Slik ble det i mine prosjekter, hvis man ønsker å ordne dataene annerledes tror jeg det ikke blir noen problemer.Offentlig statisk byte[,] BitmapToByteRgbNaive(Bitmap bmp) ( int width = bmp.Width, høyde = bmp.Height; byte[,] res = ny byte; for (int y = 0; y< height; ++y) { for (int x = 0; x < width; ++x) { Farge farge= bmp.GetPixel(x, y); res = farge.R; res = farge.G; res = farge.B; ) ) returner res; )
Den omvendte konverteringen er lik, bare dataoverføringen går i en annen retning. Jeg vil ikke gi dens kode her - interesserte kan se på kildekoder prosjekt på lenken på slutten av artikkelen.
100 konverteringer til og fra et bilde på min bærbare datamaskin med en I5-2520M 2,5 GHz prosessor krever 43,90 sekunder. Det viser seg at med et bilde på 512*512, blir det bare brukt omtrent et halvt sekund på dataoverføring!
Direkte arbeid med bitmapdata
Heldigvis gir Bitmap-klassen en raskere måte å få tilgang til dataene dine på. For å gjøre dette, må vi bruke koblingene gitt av BitmapData-klassen og adressearitmetikk:Offentlig utrygg statisk byte[,] BitmapToByteRgb(Bitmap bmp) ( int width = bmp.Width, height = bmp.Height; byte[,] res = new byte; BitmapData bd = bmp.LockBits(new Rectangle(0, 0, width) , høyde), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb); prøv ( byte* curpos; for (int h = 0; h< height; h++) { curpos = ((byte*)bd.Scan0) + h * bd.Stride; for (int w = 0; w < width; w++) { res = *(curpos++); res = *(curpos++); res = *(curpos++); } } } finally { bmp.UnlockBits(bd); } return res; }
Denne tilnærmingen gir oss 0,533 sekunder per 100 transformasjoner (82 ganger raskere)! Jeg tror dette allerede svarer på spørsmålet - er det verdt å skrive mer kompleks konverteringskode? Men kan vi fremskynde prosessen ytterligere mens vi holder oss innenfor den administrerte koden?
Matriser vs pekere
Flerdimensjonale arrays er ikke de raskeste datastrukturene. Her sjekkes det for å gå utover indeksen, selve elementet beregnes ved hjelp av multiplikasjons- og addisjonsoperasjoner. Siden adressearitmetikk allerede har gitt oss en betydelig akselerasjon en gang når vi arbeider med bitmapdata, vil vi kanskje prøve å bruke den til flerdimensjonale arrays? Her er koden for direkte konvertering:Offentlig utrygg statisk byte[,] BitmapToByteRgbQ(Bitmap bmp) ( int width = bmp.Width, height = bmp.Height; byte[,] res = new byte; BitmapData bd = bmp.LockBits(new Rectangle(0, 0, width) , høyde), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb); prøv ( byte* curpos; fixed (byte* _res = res) ( byte* _r = _res, _g = _res + width*height, _b = _res + 2*width* høyde; for (int h = 0; h< height; h++) { curpos = ((byte*)bd.Scan0) + h * bd.Stride; for (int w = 0; w < width; w++) { *_b = *(curpos++); ++_b; *_g = *(curpos++); ++_g; *_r = *(curpos++); ++_r; } } } } finally { bmp.UnlockBits(bd); } return res; }
Resultat? 0,162 sek per 100 konverteringer. Så vi akselererte ytterligere 3,3 ganger (270 ganger sammenlignet med den "naive" versjonen). Det var denne typen kode jeg brukte når jeg undersøkte algoritmer.
Hvorfor overføre i det hele tatt?
Det er ikke helt åpenbart hvorfor du i det hele tatt trenger å overføre data fra Bitmap. Kanskje alle transformasjonene burde gjennomføres der? Jeg er enig i at dette er en av de mulige alternativer. Men faktum er at mange algoritmer er mer praktiske å teste på flyttalldata. Da er det ingen problemer med overløp eller tap av presisjon på mellomtrinn. Du kan konvertere til en dobbel/float-array på lignende måte. Den omvendte konverteringen krever kontroll ved konvertering til byte. Her er en enkel kode for en slik sjekk:Privat statisk byte Limit(dobbel x) ( if (x< 0) return 0; if (x >255) retur 255; returnere (byte)x; )
Å legge til slike sjekker og typekonverteringer bremser koden vår. Versjonen med adressearitmetikk på doble matriser tar 0,713 sekunder å fullføre (per 100 transformasjoner). Men sammenlignet med det "naive" alternativet, er hun bare lyn.
Hva om du trenger det raskere?
Hvis du trenger det raskere, skriver vi overføringen, behandlingen i C, Asm og bruker SIMD-kommandoer. Laster rasterformat direkte, uten bitmap-omslaget. Selvfølgelig går vi i dette tilfellet utover den administrerte koden, med alle påfølgende fordeler og ulemper. Og å gjøre dette gir mening for en allerede feilsøkt algoritme.Oppdatering 2013-10-08:
Etter forslag fra kommentatorer la jeg til koden et alternativ for å overføre data til en matrise ved å bruke Marshal.Copy(). Dette gjøres utelukkende for testformål - denne måten å jobbe på har sine begrensninger:
- Rekkefølgen på dataene er nøyaktig den samme som i den originale bitmap. Det vil si at komponentene er blandet. Hvis vi vil skille dem fra hverandre, må vi fortsatt gå gjennom matrisen og kopiere dataene.
- Typen lysstyrke forblir byte, samtidig er det ofte praktisk å utføre mellomberegninger med flytende komma.
- Marshal.Copy() fungerer med endimensjonale arrays. Ja, de er selvfølgelig de raskeste og det er ikke veldig vanskelig å skrive rgb overalt, men likevel...
Flere av de fleste kjente programmer for å optimalisere bilder. La meg ta en reservasjon med en gang: vi snakker om algoritmer for å redusere filstørrelsen betydelig, "med tap" ("lossy"). Tapsfri JPEG-komprimering er ikke av spesiell interesse, siden JPEG i seg selv er et format for lagring av "tap"-bilder, og tapsfri komprimering på noen måte gir en maksimal gevinst på 3-5%. Her snakker vi om programmer som kan redusere filstørrelsen flere ganger.
Forresten, optimering av filer lastet opp av deltakere har lenge vært implementert i Gallerix Art Club; det utføres automatisk i to trinn: den første - umiddelbart ved opplasting (lossfri, Jpegtran brukes) og den andre - etter en tid med JpegMini-programmet.
Hvis hjemmearkivet ditt aldri har blitt optimalisert og nå opptar for eksempel 100 GB, er det fullt mulig å redusere dette tallet med 2-2,5 ganger (opptil 45-50 GB) uten å forstyrre bildekvaliteten og med 3-4 ganger (opptil 20- 25 GB) med en liten, ikke særlig merkbar reduksjon i kvalitet.
Litt om den tekniske delen av spørsmålet. For å si det veldig grovt, kan arbeidet med bildekomprimeringsverktøy sammenlignes med oppfinnelsen av variabel bitrate for lydfiler. Lydseksjoner som er mer mettet med ulike lyder, er kodet med høy bitrate, stillhet - med den laveste. I motsetning til lydfiler med konstant bithastighet, JPEG-format har allerede innebygd optimalisering, hvis kraft bestemmes av kvalitetsinnstillingen som er satt når du lagrer en fil fra et hvilket som helst program. Arbeidet med bildekomprimeringstjenester er også basert på tilnærmingen med variabel bithastighet - å identifisere bildefragmenter hvis koding på snedig vis kan neglisjeres for å spare diskplass.
For disse formålene er det flere kommersielle løsninger på markedet, og ifølge mange russiske og utenlandske kolleger er JpegMini nummer én når det gjelder et sett med parametere. Hensikten med denne testen er å sette alle kommersielle og gratis verktøy for bildeoptimalisering opp mot hverandre for å oppdatere "rangetabellen".
Kildefiler
Den første av dem - tatt fra hånden på mobiltelefon tidligere år - Samsung Note II, med minimum filoppløsning. Hver av oss har millioner av slike fotografier, slike filer er ikke belønnet med kvalitet, det er mange av dem og de er vanligvis litt uskarpe og veldig kornete.
Den andre filen er helt teknisk i opprinnelse - det er en gradienttabell generert bruker Adobe Photoshop og lagret med 100 % kvalitet. Synlige endringer i behandlingen av denne tabellen vil tjene til å evaluere den endelige kvaliteten.
Den tredje filen ble skutt på et "gjennomsnittlig" amatørkamera Panasonic GF3 in automatisk modus fra hånden Dette er et husholdningssystemkamera, uten speil, men med utskiftbare objektiver. Takk til optisk stabilisering, skarpheten er bedre her, det er ikke en mobiltelefon, men støyen er nesten den samme.
Den siste filen er fra Unsplash.com, av Karl Fredrickson. Fungerer som eksempel på et bilde tatt profesjonelt kamera med dyr optikk.
Verktøy
JpegMini
JpegMini, betalt program. Det finnes versjoner for 20 og 149 USD, samt en dyr serverversjon. Desktop-versjoner fungerer på samme måte, den yngre har to begrensninger: i prosesseringshastighet og maksimal filoppløsning (28MP), er den eldre begrenset av filstørrelse (60MP). Fungerer på Windows og Mac.
TinyJPG
Det finnes en betalt versjon i form av en plugin for Adobe Photoshop (50 USD) og en gratis nettversjon med begrensninger på filstørrelse og antall nedlastinger per dag (som imidlertid er veldig enkel å administrere). Programtillegget fungerer også på Windows og Mac. De første 500 filene per måned via API er gratis, deretter 0,009 USD per fil.
Compressor.io
Velkjent nettjeneste. Den eneste grensen er maksimal filstørrelse, 10 MB.
Kraken.io
Populært i Vesten profesjonell tjeneste med høye tollsatser og strenge kvoter. Gratis nettversjon er begrenset maksimal størrelse filen er på 1 MB og kan knapt oppfattes som et verktøy. Dette er ikke noe mer enn en demoversjon - et vanlig amatørkamera er ikke i stand til å produsere en fil som er mindre enn 2-3 MB. Tariffer for bruk av API starter på 5 USD per måned for et innkommende volum på 500 MB.
ConvertImage.net
Et sett med nettbaserte verktøy for bildebehandling, inkludert en Jpeg-kompressor. Helt gratis.
Jpeg-Optimizer.com
Online tjeneste. Helt gratis og uten begrensninger. Det er en manuell justering av kompresjonsnivået.
Optimizilla.com
Gratis webtjeneste. Den samme motoren finnes på andre domener. Flerspråklig grensesnitt. Manuell installasjon komprimeringsnivå (innstillingen vises etter at bildet er lastet inn). Ikke mer enn 20 filer om gangen.
DynamicDrive.com
Et sett med gratis online bildebehandlingsverktøy. Optimalisert med en filgrense på 2,8 MB. Viser flere ferdige bilder med på ulike nivåer komprimering å velge mellom.
ShortPixel.com
Noen ny tjeneste med mye forskjellig tariffplaner, det er et månedlig abonnement og pakkepriser (10 000 filer for 9,99 USD). Fungerer via API eller webgrensesnitt (opptil 20 filer om gangen). Filstørrelsesgrensen i den gratis nettversjonen er opptil 10 MB.
ACDSee Ultimate
ACDSee Ultimate 9, et profesjonelt bildeorganiserings- og behandlingsprogram for Windows. Sparing med «Optimaliser Huffman-koder» og «Fargekomponentsampling» aktivert, kvalitet 70 %. Programmet er betalt, prisen starter på 40 USD for den mest beskjedne versjonen, men mange gratisprogrammer har lignende innstillinger. Dette er et eksempel på ren sparing med litt tapsfri optimalisering.
"Rengjør" JPEG
Lagre en fil med omtrent 70 % kvalitet (9 av 12) fra Adobe Photoshop CS6, en variant av det "grunnleggende" formatet. Her er en ren JPEG som kun bruker egenskapene til formatet, det "laveste referansepunktet", tilgjengelig gratis fra ethvert program som kan lagre i JPG-format.
Nå litt om de som ble glemt og hvorfor. Du vil definitivt finne dette på Google hvis du prøver å finne optimizere selv, så det er umulig å ikke snakke om dem.
Jeg tror at for en uerfaren bruker med en fil av ikke veldig høy kvalitet, vil resultatet av alle verktøy virke akseptabelt. Forskjellene mellom originalkvaliteten og den optimaliserte filen med artefakter er ikke verdt ord når det kommer til gamle uskarpe bilder i hjemmearkivet. Alt som er sagt nedenfor gjelder for det meste fotoesteter. På amatørnivå gir alle verktøy ganske passende resultater; bare den endelige filstørrelsen betyr noe.
JpegMini og Kraken var helt nederst på tabellen, sortert etter størrelsen på den endelige filen, men bare disse to teknologiene komprimerer filen, og lagrer bildet helt ærlig. I kategorien "10 poeng" ser JpegMini mer attraktiv ut fra alle sider.
Med et veldig litt mindre akseptabelt bilde viste det seg at Compressor.io komprimerer små filer bedre, og Optimizilla.com komprimerer store, men dette er en veldig vilkårlig konklusjon innenfor rammen av denne testen.
Tatt i betraktning forholdet størrelse/kvalitet, hva er under ni i tabellen, men har lavere skår når større størrelse fil - har ingen praktisk interesse. Og over "nierne" er det bare to tjenester.
Den siste tjenesten viste seg å være interessant - ShortPixel. Artefaktene er veldig merkbare, men hvis du komprimerer bildet til denne størrelsen ved å bruke selve JPG-formatet, blir bildet merkbart dårligere. ShortPixel er mer API-orientert og relativt billig, men veldig bildeødeleggende.
TinyJPG i form av en plugin er mer beskjeden, noe som sannsynligvis er gjort riktig. Det er fortsatt bedre enn alle de andre når det gjelder filstørrelse, men artefaktene er litt mindre enn nettversjonen.
Et interessant trekk ved TinyJPG i form av en plugin: etter behandling kan filen enten være 8-10 ganger mindre enn den opprinnelige størrelsen, eller halvannen til to ganger større.
Testbilde nr. 2 ble best komprimert av ShortPixel, men på de fleste filer med et stort antall små deler, vinneren er nettversjonen av TinyJPG. Filen blir mindre, og originalbildet deformeres ikke så mye. Imidlertid godtar TinyJPG filer som ikke er større enn 5 MB, og ShortPixel, selv i gratisversjonen, godtar filer på opptil 10 MB.
En annen viktig målefaktor (foruten den endelige filstørrelsen) er brukervennlighet på strømmen. Hvis du for eksempel har i oppgave å optimalisere et 100 GB hjemmearkiv for første gang, vil det å behandle det fullstendig ved hjelp av nettjenester være svært arbeidskrevende og tidkrevende på grunn av begrensninger og behovet for å laste opp dette volumet i porsjoner til serveren og tilbake. Til tross for det faktum at for beskjedne 20 USD, med JpegMini krever dette én musebevegelse (bokstavelig talt: du trenger bare å dra rotmappen med bilder i programvinduet).
TinyJPG-plugin for Photoshop er forresten ikke utformet som et filter, men som en eksportkanal, d.v.s. Det egner seg ikke for å lage et automatiseringsskript i PS. Korreksjon: fra produsentens nettsted kan du laste ned automatiseringsskript som fungerer i alle versjoner av Photoshop, og i Photoshop CC er eksport gjennom en plugin en operasjon for batchbehandling. Plugin-en har ingen begrensninger - testet på en fil med en oppløsning på 130MP (behandlingstiden er ca. 7 minutter på en ganske kraftig datamaskin).
Generelt, for bulkbehandling er det bare to alternativer - bruk av API og JpegMini. For behandling via API må du betale for hver behandlet fil.
konklusjoner
- Alle verktøy som lar deg få en relativt akseptabel fil av en mindre størrelse enn JpegMini gir - enten visuelt forringe bildet og er dårligere enn det i brukervennlighet eller har en mindre attraktiv prispolitikk - tidsbasert eller fil-for-fil leie versus et engangskjøp fra JpegMini.
- For tilfeller der bildekvalitet er av største betydning, og hvis det er uakseptabelt å redusere filstørrelsen på bekostning av visuell forringelse, er JpegMini fortsatt det beste verktøyet.
- For tilfeller hvor kvalitet kildefiler kan neglisjeres litt for komprimeringens skyld, er det fornuftig å bruke begge versjonene av TinyJPG, avhengig av oppgaven.
- Hvis du bare velger fra gratis kompressorer, er det beste utseendet Compressor.io og Optimizilla.com, som nesten ikke ødelegger bildet, til tross for at den endelige filen er merkbart mindre enn JpegMini.
- Eiere av nyhetssider med en stor strøm av illustrasjoner, hvis kvalitetskrav ikke er så akutte, er fornuftig å ta hensyn til ShortPixel og TinyJPG. Fordelene deres er rimelige priser, rekordkomprimering og arbeid via API. Og hvis kvalitet betyr noe (men penger ikke), så er det fornuftig å koble til Kraken via API eller, i tilfelle av svært store volumer, serverversjonen av JpegMini.
anmeldelse