Bildeoptimalisering for nettstedet: batchbehandling ved hjelp av jpegtran | optipng | pngout

1. forutsetninger
2. Vi bruker anbefalinger for bilder
3. Arkivstruktur
4. Korte instruksjoner for arbeid
5. kosttilskudd
6. x64 (aka andi)

Nettsted uten bilder - en anakronisme. Så mange mennesker tror, ​​og det er ikke blottet for sunn fornuft. Husk hvor lenge har du vært på nettstedet for siste gang, og hvor lenge har du vært på den?

Tekstdata er mye mindre enn bildet. Men folk er kjent for å elske øynene sine. Derfor vil bildene være en utvilsomt fordel av historien.

Generelt snakker vi om teksten, både innhold og en praktisk visuell presentasjon, inkludert avsnitt, lister, sitater, tabeller. Dette er imidlertid ikke nok, og selv nyhetssider prøver å gi bilder av journalister.

La oss starte ut fra antagelsen om at bilder trengs. Disse kan være bilder, diagrammer, bare forklare bilder.

For lenge siden, da Putin ikke virket evig, laget jeg min første medisinske webportal. Det var nødvendig å plassere bilder til atlasen. Det er åpenbart at det er ganske vanskelig å forestille seg kroppens anatomiske struktur uten bilder, og enda mer så å beskrive med ord. Og uten videre ado, lastet jeg opp bilder til bmp (ukomprimert format). Må jeg si at de veide deig? I tillegg visste noen nettlesere ikke hvordan de skulle vise slike bilder.

Så hvorfor optimalisere bilder? Et enkelt eksempel er et bilde. Moderne telefoner har kameraer i 8, 12 og enda flere megapiksler. 12 MP tilsvarer et bilde på 4000 × 3000 piksler. Avhengig av scenens kompleksitet, svarer dette til en størrelse på 2-5 megabyte, og enda mer. Et dusin bilder - og sidestørrelsen svulmer opp mye. Bildet passer inn i innholdsområdet, noe som betyr at nettleseren må først laste ned alt, skalere den og bare vise den. For de svake prosessorer eller med en liten mengde RAM - en katastrofe.

Forestill deg nå at brukeren ser på nettstedet fra telefonen. I dette tilfellet kan sideopplastingen ganske enkelt ikke vente. Så, bildene må være forhåndsreduksjon.

Noen vil argumentere for at det ikke er noe poeng i dette; moderne CMS lager automatisk miniatyrbilder når du laster ned bilder. Men har alle sine nettsteder på VPS eller VIP-priser? Last ned ett 12 MP-bilde kan komme ut, men for å behandle det, trenger PHP å tildele 35 + megabyte (i teorien, faktisk mer) for lagring, og vet fortsatt hvor mye å lage en mindre kopi. Billige tariffer går straks inn i overskudd av ressurser. En god hoster vil be brukeren om ikke å gjøre dette lenger, en dårlig vil ignorere den, fordi bare penger er viktig for ham, og ikke ytelsen til tjenestene.

Og så bestemte vi oss for å handle riktig. Vi reduserer foreløpig bildene, og laster dem deretter opp til nettstedet. Så motoren er lettere, og folk. Er alt Ikke egentlig.

Mange redaktører beholder de originale bitene (meta-informasjon, ikke-bildedeler av filen) som inneholder tilleggsinformasjon. Hvis du for eksempel tar et bilde av noe på telefonen, overfører du filen til datamaskinen, klikker på den med høyre tast og velger "Egenskaper → Detaljer". Du vil se dataene på enheten: hvilket kamera du fotograferte, lukkerhastighet, ISO og så videre. For brukeren er denne informasjonen ubrukelig, slik at du kan bli kvitt den.

Vel, tenk på det, en bit. Hva er det, en haug med informasjon som finnes? Imagine. Noen ganger får du bilder der hundrevis av kilobytes av slike data. Bare i dag sendte de en logo på 584 KB i størrelse for å imøtekomme. Samtidig var nyttig informasjon bare 14 KB! For meg er det ikke helt riktig å tvinge den besøkende til å laste ned 570 kB fra oven.

La oss oppsummere deltallene. For at brukerne av nettstedet skal trives, trenger du:

1. Reduser størrelsen på bildet. For å hjelpe noen grafisk redaktør.
2. Kast ut av filen deler er unødvendig. Faktisk trenger brukeren bare et bilde.
3. Prøv å redusere størrelsen på bildet ytterligere.

Første ledd innebærer individuelt arbeid på hver fil. Det er tidkrevende, men det gir det beste resultatet. Vi åpner hver fil, kutte, redusere, og lagre med akseptabel kvalitet.

Men punktene 2 og 3 kan gis til gavn for spesielle programmer. Programvare for arbeid med bildesett. Google anbefaler følgende programmer:

• jpegtran for jpg bildeformat.
• optipng og pngout for PNG-bilder.

Litt om s. 3. Grafiske redaktører bryder seg vanligvis ikke om det. De lagrer ganske enkelt bildet, og velger i forveien komprimeringsalgoritmer med de samme innstillingene, kvantiseringskoeffisientene og andre ting. I tillegg overfører mange ærlig de tilgjengelige meta-informasjonene og legger til sine egne, og øker filstørrelsen ytterligere.

forutsetninger

For et år siden begynte de å snakke en masse om tjenesten. PageSpeed ​​Innsikt fra google. Faktisk er disse anbefalingene fra søkegiganten på "hvordan går det bra". Bare skriv inn adressen til nettstedet og få en liste over forslag til optimalisering. Der kan du også laste ned allerede optimaliserte ressurser, inkludert bilder, til nettstedet ditt. True, dette er bare relevant for den sjekket siden.

Hvis du har et nettsted, pass på å se denne artikkelen . Spesielt nyttig for de som bruker WordPress.

Vi bruker anbefalinger for bilder

Det virker enkelt: Last ned programmene som er spesifisert av Google, og kjør alle filene på serveren gjennom dem. Problemet er at disse verktøyene er konsoll. De tar bare 1 fil om gangen. Men vi er ikke forgjeves i siste artikkel tok deg tid til batch-filer, ikke sant?

Informasjon fra artikkelen er nok til å lage din egen filhåndterer masse, så jeg vil ikke male hvor det er. Jeg foreslår bare å laste ned klargjøringen, som jeg bruker meg selv.

Last ned arkiv (212 KB)

Arkivstruktur

Arkivet inneholder en mappe [ OptimizeImg ]. For å komme i gang, pakke det ut et sted. Jeg har den plassert i c: \ temp \, men det spiller ingen rolle. Det viktigste er at banen ikke inneholder utropstegn.

Neste. Denne mappen inneholder underkatalogen [ opplastinger ]. Her må du sette filer som krever behandling. Den beste delen er at du kan trykke minst mappen / filstrukturen.

Det er 3 flere programmer: jpegtran.exe | optipng.exe | pngout.exe er selve verktøyet som anbefales av Google. Nedlastet fra de tilsvarende offisielle nettstedene / repositoriene. Hvis du er i tvil, eller bare vil oppgradere, last ned fra en klarert kilde og erstatte eksisterende.

Og til slutt, hjertet av tulza. Batnichki:

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

Den første filen, 1.bat, gjenskaper strukturen fra [opplastinger]. 3 ekstra mapper er opprettet: [jpg_jpegtran] [png_optipng] [png_pngout] med behandlede minimerte filer av deres type (jpg-only * .jpg-filer, det samme med png).

3.bat lanserer i rekkefølge tre batchfiler for utførelse:

• 3-go.bat er nesten det samme som 1.bat. Hopp jpg / png filer gjennom minimizers. Resultatet av arbeidet vil være 3 mapper (se ovenfor) med de tilsvarende bildene.
• 3-opti-to-out.bat lager mappen [png_optipng-to-pngout], der filene behandlet av optipng + pngout er skrevet (i nøyaktig denne sekvensen).
• 3-out-to-opti.bat lager en [png_pngout-to-optipng] -mappe i hvilke filer som behandles av pngout + optipng er skrevet. Ligner på den forrige, bare i en annen rekkefølge.

I prinsippet er bare 1.bat nok til våre behov. 3x poser oppstod som følge av forskning og feil i den forrige versjonen av batchfilen. Det skjedde så at under feilen ble filene for pngout hentet fra optipng-katalogen. Og hva var min overraskelse da lanseringen av den gamle versjonen ga 1,5 ganger mindre størrelse enn i den oppdaterte batchfilen. Som et resultat viste det sig at dobbel prosessering kan "ta opp" bildene godt. Men det tar nesten 2 ganger mer tid. Så bestem deg selv om det trengs.

Korte instruksjoner for arbeid

1. Last ned arkiv .
2. Pak det ut.
3. Gå til den nylig åpnede [OptimizeImg] -mappen.
4. Alle filer som krever stikk, kopier mappen [opplasting].
5. Kjør 1.bat og vent. Hvis det er mange filer og de er png, vent lenge.
6. Når en melding vises i det svarte vinduet om behovet for å trykke på en tast for å fortsette, er alt klart. Det gjenstår å ta innholdet i de opprettede mappene og kopiere til hosting via FTP, overskrive gamle filer.

For et eksempel. La deg få en blogg på WordPress. Alle bilder lagres i [ / wp-innhold / opplastinger / ]. Gå til siden mappen (via ftp), gå til [ wp-innhold ] og bare kopiere [ opplastinger ] til mappen OptimizeImg med samme navn. Kjør 1.bat og vent. Etter at arbeidet er ferdig, innholdet [jpg_jpegtran] (vi går dit!) Lastes opp til serveren. Forespørsler om eksisterende filer besvares ved å overskrive. Et lignende trick for png, men først ser vi på hvilken mappe - [png_optipng] eller [png_pngout] - tar opp mindre plass, fyller den opp med innholdet.

Ikke vær redd for å skade andre filer. Batniki fungerer bare med jpg / png, og bare bildene av disse typene skrives til de nyopprettede mappene.

Jeg håper noen vil være nyttig. Lykke til!

kosttilskudd

1. Stien til [OptimizeImg] bør ikke inneholde utropstegn ! og prosent %
2. Kjør skript som administrator er ikke nødvendig. Dessuten kan de i dette tilfellet ikke fungere!
3. ...

Forfattere

ikke online 13 timer

x64 (aka andi)

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