Billedoptimering til webstedet: batchbehandling ved hjælp af jpegtran | optipng | pngout

  1. forudsætninger
  2. Vi bruger anbefalinger til billeder
  3. Arkivstruktur
  4. Korte instruktioner for arbejde
  5. Kosttilskud
  6. x64 (aka andi)

Site uden billeder - en anakronisme. Så mange mennesker tænker, og det er ikke blottet for sund fornuft. Husk, hvor længe har du været på webstedet for sidste gang, og hvor længe har du været på den?

Tekstdata er meget mindre end billedet. Men folk er kendt for at elske deres øjne. Derfor vil billederne være en utvivlsomt fordel ved historien.

Generelt betragter vi både indholdet og en praktisk visuel præsentation, herunder afsnit, lister, citater og tabeller. Dette er dog ikke nok, og selv nyhedswebsteder forsøger at give billeder af journalister.

Dette er dog ikke nok, og selv nyhedswebsteder forsøger at give billeder af journalister

Lad os starte ud fra antagelsen om at billeder er nødvendige. Disse kan være fotos, diagrammer, blot forklare billeder.

For længe siden, da Putin ikke var evig, lavede jeg min første medicinske webportal. Det var nødvendigt at placere billeder på atlaset. Det er indlysende, at det er ret vanskeligt at forestille sig den anatomiske struktur af kroppen uden billeder og jo mere så at beskrive med ord. Og uden yderligere ado uploadede jeg billeder til bmp (ukomprimeret format). Må jeg sige, at de vejer dejen? Derudover vidste nogle browsere ikke, hvordan de skulle vise sådanne billeder.

Så hvorfor optimere billeder? Et simpelt eksempel er et billede. Moderne telefoner har kameraer i 8, 12 og endnu flere megapixel. 12 MP svarer til et billede på 4000 × 3000 pixel. Afhængigt af scenens kompleksitet svarer dette til en størrelse på 2-5 megabyte og endnu mere. Et dusin fotos - og sidestørrelsen svulmer op meget. Billedet passer ind i indholdsområdet, hvilket betyder at browseren først skal downloade alt, skalere den og kun vise den. Til de svage processorer eller med en lille mængde RAM - en katastrofe.

Forestil dig nu, at brugeren ser webstedet fra telefonen. I dette tilfælde kan sideindlæsningen simpelthen ikke vente. Så billederne skal være forudindstillet.

Nogen vil argumentere for, at der ikke er noget punkt i dette; moderne CMS laver automatisk miniaturebilleder, når du downloader billeder. Men har alle deres websteder på VPS eller VIP-satser? Download et 12 MP billede kan komme ud, men for at behandle det, skal PHP tildele 35 + megabyte (i teorien faktisk flere) til opbevaring, og så ved stadig, hvor meget der skal oprettes en mindre kopi. Billige takster straks springe ind i overskydende ressourcer. En god hoster vil bede brugeren om ikke at gøre dette længere, en dårlig vil ignorere det, fordi kun penge er vigtige for ham, og ikke ydelsen af ​​tjenester.

Og så besluttede vi at handle korrekt. Vi reducerer foreløbigt billederne, og upload dem derefter til webstedet. Så motoren er nemmere, og folk. Er alt Ikke rigtig.

Mange redaktører beholder de originale biter (meta-information, ikke-billeddele af filen) indeholdende yderligere oplysninger. Hvis du f.eks. Tager et billede af noget på telefonen, skal du overføre filen til computeren, klikke på den med den højre tast og vælge "Egenskaber → Detaljer". Du vil se dataene på enheden: hvilket kamera du fotograferede, lukkerhastighed, ISO og så videre. For brugeren er disse oplysninger ubrugelige, så du kan slippe af med det.

Nå, tænk over det, en chunk. Hvad er der, en masse information, der er indeholdt? Forestil. Nogle gange får du billeder, hvor hundredvis af kilobytes af sådanne data. Bare i dag sendte de et logo på 584 KB i størrelse til at rumme. Samtidig var nyttige oplysninger kun 14 KB! For mig er det ikke helt korrekt at tvinge den besøgende til at downloade 570 kB ovenfra.

Lad os opsummere undertotalerne. For at brugere af webstedet skal klare sig godt, skal du:

  1. Reducer billedets størrelse. For at hjælpe enhver grafisk editor.
  2. Kast ud af filen dele er unødvendige. Faktisk behøver brugeren kun et billede.
  3. Prøv at reducere billedets størrelse yderligere.

Første afsnit involverer individuelt arbejde på hver fil. Det er tidskrævende, men det giver det bedste resultat. Vi åbner hver fil, skærer, reducerer og gemmer med acceptabel kvalitet.

Men afsnit 2 og 3 kan gives til gavn for særlige programmer. Software til arbejde med billeder sæt. Google anbefaler følgende programmer:

  • jpegtran til jpg billedformat.
  • optipng og pngout for PNG-billeder.

En lille smule om s. 3. Grafiske redaktører bryder sig normalt ikke om det. De gemmer simpelthen billedet og vælger i forvejen komprimeringsalgoritmer med de samme indstillinger, kvantiseringskoefficienter og andre ting. Derudover overfører mange ærligt de tilgængelige meta-informationer og tilføjer deres egne, hvilket yderligere øger filstørrelsen.

forudsætninger

For et år siden begyndte de at tale en masse om tjenesten. PageSpeed ​​Insights fra google. Faktisk er disse henstillinger fra søgegiganten på "hvordan man kan klare sig godt". Indtast bare adressen på webstedet og få en liste over forslag til optimering. Der kan du også downloade allerede optimerede ressourcer, herunder billeder, til dit websted. Det er sandt, det er kun relevant for den kontrollerede side.

Hvis du har en hjemmeside, skal du sørge for at se denne artikel . Særligt nyttigt for dem, der bruger WordPress.

Vi bruger anbefalinger til billeder

Det forekommer simpelt: Download de programmer, der er angivet af Google, og kør alle filer på serveren gennem dem. Problemet er, at disse værktøjer er konsol. De tager kun 1 fil ad gangen. Men vi er ikke forgæves i sidste artikel tog tid til at batch filer, right?

Oplysninger fra artiklen er nok til at lave din egen filhåndterer en masse, så jeg vil ikke male hvor det er. Jeg foreslår bare at downloade den færdige forsamling, som jeg bruger mig selv.

Hent arkiv (212 KB)

Arkivstruktur

Arkivet indeholder en mappe [ OptimizeImg ]. For at komme i gang skal du pakke det ud et sted. Jeg har den placeret i c: \ temp \ men det er ligegyldigt. Det vigtigste er, at stien ikke indeholder udråbstegn.

Næste. Denne mappe indeholder undermappen [ uploads ]. Her skal du sætte filer, der kræver behandling. Det bedste er, at du kan skubbe mindst mappen / filstrukturen.

Der er 3 flere programmer: jpegtran.exe | optipng.exe | pngout.exe er den meget nyttige hjælp fra Google. Downloadet fra de tilsvarende officielle sites / repositories. Hvis du er i tvivl, eller bare vil opgradere, download fra en betroet kilde og erstat eksisterende.

Og endelig, hjertet af tulza. Batnichki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-til-out.bat
  • 3-out-til-opti.bat

Den første fil, 1.bat, genskaber strukturen fra [uploads]. 3 ekstra mapper er oprettet: [jpg_jpegtran] [png_optipng] [png_pngout] med behandlede minimerede filer af deres type (jpg-only * .jpg-filer, det samme med png).

3.bat lancerer sekventielt tre batch-filer til udførelse:

  • 3-go.bat er næsten det samme som 1.bat. Spring jpg / png filer gennem minimeringsprogrammer. Resultatet af arbejdet er 3 mapper (se ovenfor) med de tilsvarende billeder.
  • 3-opti-to-out.bat opretter mappen [png_optipng-to-pngout], hvori de filer, der behandles af optipng + pngout, er skrevet (i nøjagtig denne rækkefølge).
  • 3-out-to-opti.bat opretter en mappe til [png_pngout-to-optipng], hvilke filer der behandles af pngout + optipng er skrevet. Ligner den forrige, kun i en anden rækkefølge.

I princippet er kun 1.bat nok til vores behov. 3x poser fremkom som følge af forskning og fejl i den tidligere version af batchfilen. Det skete så, at under fejlen blev filerne for pngout taget fra optipng-mappen. Og hvad var min overraskelse, da lanceringen af ​​den gamle version gav 1,5 gange mindre størrelse end i den opdaterede batchfil. Som et resultat viste det sig, at dobbelt behandling kan "indhente" billeder godt. Men det tager næsten 2 gange mere tid. Så beslut dig selv om det er nødvendigt.

Korte instruktioner for arbejde

  1. Download arkiv .
  2. Pak den ud.
  3. Gå til den nyåbnede [OptimizeImg] mappe.
  4. Alle filer, der kræver stinging, kopier mappen [upload].
  5. Kør 1.bat og vent. Hvis der er mange filer, og de er png, vent lang tid.
  6. Når der vises en meddelelse i det sorte vindue om behovet for at trykke på en tast for at fortsætte, er alt klart. Det er fortsat at tage indholdet af de oprettede mapper og kopiere til hosting via FTP, overskrive gamle filer.

Til et eksempel. Lad dig have en blog på WordPress. Alle billeder gemmes i [ / wp-indhold / uploads / ]. Gå til webstedet mappen (via ftp), gå til [ wp-indhold ] og simpelthen kopiere [ uploads ] til mappen OptimizeImg med samme navn. Kør 1.bat og vent. Når arbejdet er færdigt, indholdet [jpg_jpegtran] (vi går derhen!) Uploades til serveren. Anmodninger om eksisterende filer besvares ved overskrivning. Et lignende trick for png, men først ser vi på hvilken mappe - [png_optipng] eller [png_pngout] - tager mindre plads, udfylder det med indholdet.

Vær ikke bange for at skade andre filer. Batniki fungerer kun med jpg / png, og kun billederne af disse typer er skrevet til de nyoprettede mapper.

Jeg håber, at nogen vil være nyttige. Held og lykke!

Kosttilskud

  1. Stien til [OptimizeImg] må ikke indeholde udråbstegn ! og procent %
  2. Kør scripts som administrator er ikke nødvendigt. Desuden kan de i dette tilfælde ikke fungere!
  3. ...

Forfattere

ikke online 13 timer

x64 (aka andi)

Kommentarer: 2846 Publikationer: 395 Registrering: 02-04-2009