Bildoptimering för webbplatsen: satsvis bearbetning med jpegtran | optipng | pngout

  1. förutsättningar
  2. Vi använder rekommendationer för bilder
  3. Arkivstruktur
  4. Korta instruktioner för arbete
  5. kosttillskott
  6. x64 (aka andi)

Webbplats utan bilder - en anakronism. Så många tror, ​​och det saknar sunt förnuft. Kom ihåg hur länge har du varit på webbplatsen för sista gången och hur länge har du varit på den?

Textdata är mycket mindre än bilden. Men folk är kända för att älska sina ögon. Därför är bilderna en otvivelaktig fördel av historien.

I allmänhet talar vi om texten, menar både innehållet och en praktisk visuell presentation, inklusive punkter, listor, citat, tabeller. Det räcker dock inte, och även nyhetssidor försöker ge bilder av journalister.

Det räcker dock inte, och även nyhetssidor försöker ge bilder av journalister

Låt oss börja med antagandet att bilder behövs. Dessa kan vara bilder, diagram, förklara bilder enkelt.

För länge sedan, då Putin inte verkade evig, gjorde jag min första medicinska webbportal. Det var nödvändigt att placera bilder på atlasen. Det är uppenbart att det är ganska svårt att föreställa sig kroppens anatomiska struktur utan bilder, och allt mer så att beskriva med ord. Och utan ytterligare ado laddar jag bilder till bmp (okomprimerat format). Måste jag säga att de vägde deg? Dessutom visste vissa webbläsare inte hur man skulle visa sådana bilder.

Så varför optimera bilder? Ett enkelt exempel är ett foto. Moderna telefoner har kameror i 8, 12 och ännu fler megapixlar. 12 MP motsvarar en bild på 4000 × 3000 pixlar. Beroende på scenens komplexitet motsvarar detta en storlek på 2-5 megabyte, och ännu mer. Ett dussin foton - och sidstorleken sväller upp mycket. Bilden passar in i innehållsområdet, vilket innebär att webbläsaren måste ladda ner allt, skala det och bara visa det. För de svaga processorer eller med en liten mängd RAM - en katastrof.

Tänk nu att användaren tittar på webbplatsen från telefonen. I det här fallet kan sidladdningen helt enkelt inte vänta. Så, bilderna måste förkortas.

Någon kommer att hävda att det inte finns någon mening i det här, moderna CMS gör automatiskt miniatyrer när du laddar ner bilder. Men har alla sina platser på VPS eller VIP-priser? Ladda ner en 12 MP-bild kan komma ut, men för att bearbeta det måste PHP ange 35 + megabyte (i teorin, faktiskt mer) för lagring, och vet fortfarande hur mycket för att skapa en mindre kopia. Billiga taxor dyker omedelbart in i överflöd av resurser. En bra värd kommer att be användaren att inte göra det längre, en dålig kommer att ignorera den, för det är bara pengar som är viktigt för honom, och inte prestanda av tjänster.

Och så bestämde vi oss för att agera korrekt. Vi minskar preliminärt bilderna och lägger sedan upp dem på webbplatsen. Så motorn är lättare, och människor. Är allting Inte riktigt.

Många redaktörer behåller de ursprungliga bitarna (meta-information, icke-bilddelar av filen) som innehåller ytterligare information. Om du till exempel tar en bild på något i telefonen, överför filen till datorn, klicka på den med den högra knappen och välj "Egenskaper → Detaljer". Du kommer att se data på enheten: vilken kamera du fotograferade, slutartid, ISO och så vidare. För användaren är denna information värdelös, så du kan bli av med den.

Tja om det, en bit. Vad finns det, en massa information som finns? Föreställ. Ibland får du bilder där hundratals kilobytes av sådan data. Just idag skickade de en logotyp på 584 KB i storlek för att rymma. Samtidigt var användbar information endast 14 KB! När det gäller mig är det inte helt rätt att tvinga besökaren att ladda ner 570 kb ovanifrån.

Låt oss sammanfatta subtotalerna. För att användarna av webbplatsen ska kunna fungera bra behöver du:

  1. Minska bildens storlek. För att hjälpa någon grafisk redigerare.
  2. Kasta ut av filen delar är onödiga. Faktum är att användaren bara behöver en bild.
  3. Försök att ytterligare minska bildens storlek.

Första stycket innebär enskilt arbete på varje fil. Det är tidskrävande, men det ger det bästa resultatet. Vi öppnar varje fil, skära, minska, spara sedan med acceptabel kvalitet.

Men punkterna 2 och 3 kan ges till förmån för specialprogram. Programvara för att arbeta med bilder. Google rekommenderar följande program:

  • jpegtran för jpg bildformat.
  • optipng och pngout för PNG-bilder.

Lite om s. 3. Grafiska redaktörer stör vanligtvis inte med det. De sparar bara bilden, väljer i förväg att lägga komprimeringsalgoritmer med samma inställningar, kvantiseringskoefficienter och andra saker. Dessutom överför många till och med de tillgängliga meta-informationerna och lägger till egna, vilket ytterligare ökar filstorleken.

förutsättningar

För ett år sedan började de prata en hel del om tjänsten. PageSpeed ​​Insights från google. Faktum är att det här är rekommendationer från sökjätten på "hur går det bra". Skriv bara in adressen på webbplatsen och få en lista med förslag på optimering. Där kan du också ladda ner redan optimerade resurser, inklusive bilder, till din webbplats. Visst är detta endast relevant för den markerade sidan.

Om du har en webbplats, se till att titta den här artikeln . Särskilt användbart för dem som använder WordPress.

Vi använder rekommendationer för bilder

Det verkar enkelt: ladda ner de program som anges av Google och kör alla filer på servern genom dem. Problemet är att dessa verktyg är konsol. De tar bara 1 fil i taget. Men vi är inte förgäves in sista artikeln tog sig tid att satsa filer, eller hur?

Information från artikeln är tillräckligt för att skapa en egen filhanterare en massa, så jag kommer inte att måla var det är. Jag föreslår bara att ladda ner den färdiga enheten, som jag använder mig själv.

Hämta arkiv (212 KB)

Arkivstruktur

Arkivet innehåller en mapp [ OptimizeImg ]. För att komma igång, packa upp den någonstans. Jag har den i c: \ temp \ men det spelar ingen roll. Det viktigaste är att banan inte innehåller utropstecken.

Nästa. Den här mappen innehåller underkatalogen [ uppladdningar ]. Här måste du lägga filer som kräver bearbetning. Det bästa är att du kan driva åtminstone mappen / filstrukturen.

Det finns 3 fler program: jpegtran.exe | optipng.exe | pngout.exe är det mycket användbara verktyget som rekommenderas av Google. Nedladdad från motsvarande officiella webbplatser / repositories. Om du är osäker eller bara vill uppgradera, ladda ner från en betrodd källa och ersätt befintliga.

Och slutligen, hjärtat av tulza. Batnichki:

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

Den första filen, 1.bat, återskapar strukturen från [uppladdningar]. 3 ytterligare mappar skapas: [jpg_jpegtran] [png_optipng] [png_pngout] med bearbetade minimerade filer av deras typ (jpg-bara * .jpg-filer, samma med png).

3.bat lanserar i följd tre batchfiler för exekvering:

  • 3-go.bat är nästan detsamma som 1.bat. Hoppa över jpg / png-filer genom minimeringarna. Resultatet av arbetet kommer att vara 3 mappar (se ovan) med motsvarande bilder.
  • 3-opti-to-out.bat skapar mappen [png_optipng-to-pngout], där filerna behandlas av optipng + pngout är skrivna (i exakt denna sekvens).
  • 3-out-to-opti.bat skapar en mapp [png_pngout-to-optipng] i vilka filer som bearbetas av pngout + optipng är skrivna. Liknande den föregående, bara i en annan sekvens.

I princip är bara 1.bat tillräcklig för våra behov. 3x påsar uppkom som resultat av forskning och fel i den tidigare versionen av batchfilen. Det hände så att under felet blev filerna för pngout tagna från optipng katalogen. Och vad var min förvåning när lanseringen av den gamla versionen gav 1,5 gånger mindre storlek än i den uppdaterade batchfilen. Som ett resultat visade det sig att dubbelt bearbetning kan "fånga upp" bilder bra. Men det tar nästan 2 gånger mer tid. Så bestäm själv om det behövs.

Korta instruktioner för arbete

  1. Hämta arkiv .
  2. Packa upp det.
  3. Gå till den nyöppnade [OptimizeImg] -mappen.
  4. Alla filer som kräver stinging, kopiera mappen [ladda upp].
  5. Kör 1.bat och vänta. Om det finns många filer och de är png, vänta länge.
  6. När ett meddelande visas i det svarta fönstret om behovet av att trycka på en knapp för att fortsätta är allt klart. Det är fortfarande att ta innehållet i de skapade mapparna och kopiera till värd via FTP, skriva över gamla filer.

För ett exempel. Låt dig ha en blogg på WordPress. Alla bilder lagras i [ / wp-innehåll / uppladdningar / ]. Gå till webbplatsmappen (via ftp), gå till [ wp-innehåll ] och kopiera bara [ uppladdningar ] till mappen OptimizeImg med samma namn. Kör 1.bat och vänta. Efter jobbet är innehållet [jpg_jpegtran] (vi går dit!) Överförs till servern. Begäran om befintliga filer besvaras genom att skriva över. Ett liknande knep för png, men först tittar vi på vilken mapp - [png_optipng] eller [png_pngout] - tar upp mindre utrymme, fyller upp det med innehållet.

Var inte rädd för att skada andra filer. Batniki fungerar bara med jpg / png, och endast bilderna av dessa typer skrivs till de nyskapade mapparna.

Jag hoppas att någon kommer att vara användbar. Lycka till!

kosttillskott

  1. Vägen till [OptimizeImg] ska inte innehålla utropstecken ! och procent %
  2. Kör skript som administratör är inte nödvändigt. Dessutom kan de i detta fall inte fungera!
  3. ...

Författare

inte online 13 timmar

x64 (aka andi)

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

Kom ihåg hur länge har du varit på webbplatsen för sista gången och hur länge har du varit på den?
Måste jag säga att de vägde deg?
Så varför optimera bilder?
Men har alla sina platser på VPS eller VIP-priser?
Vad finns det, en massa information som finns?