Optimizarea imaginilor pentru site: procesare în lot folosind jpegtran | optipng | pngout

1. Cerințe preliminare
2. Utilizăm recomandări pentru imagini
3. Structura arhivei
4. Instructiuni scurte pentru munca
5. Suplimente
6. x64 (aka andi)

Site fără imagini - un anacronism. Atât de mulți oameni cred, și nu este lipsit de bun-simț. Amintiți-vă, de cât timp ați fost pe site pentru ultima oară și cât timp ați fost pe ea?

Datele de text sunt mult mai mici decât imaginea. Dar oamenii sunt cunoscuți că îi iubesc ochii. Prin urmare, imaginile vor fi un avantaj fără îndoială al povestirii.

În general vorbind despre text, înțelegem atât conținutul său, cât și o prezentare vizuală convenabilă, incluzând paragrafe, liste, citate, tabele. Totuși, acest lucru nu este suficient, și chiar site-urile de știri încearcă să ofere imagini ale jurnaliștilor.

Să începem de la presupunerea că sunt necesare imagini. Acestea pot fi fotografii, diagrame, pur și simplu explicând imagini.

Cu mult timp în urmă, când Putin nu părea veșnic, am făcut primul meu portal web medical. A fost necesară plasarea de imagini în atlas. Este evident că este destul de greu să ne imaginăm structura anatomică a corpului fără imagini și cu atât mai mult să ne descriem cu cuvinte. Și fără a mai adăuga alte detalii, am încărcat imagini în bmp (format necomprimat). Trebuie să spun că au cântărit aluatul? În plus, unele browsere nu știau cum să afișeze astfel de imagini.

Deci, de ce optimizați imaginile? Un exemplu simplu este o fotografie. Telefoanele moderne au camere de 8, 12 și chiar mai multe megapixeli. 12 MP corespunde unei imagini de 4000 × 3000 pixeli. În funcție de complexitatea scenei, aceasta corespunde unei dimensiuni de 2-5 megabytes și chiar mai mult. O duzină de fotografii - iar dimensiunea paginii se umflă foarte mult. Imaginea se potrivește în zona de conținut, ceea ce înseamnă că browserul trebuie să descarce mai întâi totul, să-l scaldeze și numai să-l afișeze. Pentru cei slabi procesoare sau cu o cantitate mică de memorie RAM - un dezastru.

Acum imaginați-vă că utilizatorul urmărește site-ul de la telefon. În acest caz, încărcarea paginii nu poate aștepta. Deci, imaginile trebuie să fie pre-reduse.

Cineva va argumenta că nu are nici un rost în acest lucru; CMS modern face miniaturi atunci când descarcă imagini. Dar fiecare are site-urile lor pe VPS sau VIP-tarife? Descărcați o imagine de 12 MP poate ieși, dar pentru ao procesa, PHP va trebui să aloce 35+ megabytes (teoretic, mai mult) pentru stocare și apoi știe cât de mult să creeze o copie mai mică. Tarifele ieftine scapă imediat în excesul de resurse. Un bun hostez va cere utilizatorului să nu mai facă acest lucru, cel rău o va ignora, pentru că numai banii sunt importanți pentru el, și nu performanța serviciilor.

Deci, am decis să acționăm corect. Reducem în mod preliminar imaginile și apoi le încărcăm pe site. Deci, motorul este mai ușor și oamenii. Este totul Nu chiar.

Mulți editori păstrează bucățile originale (meta-informații, părți non-imagine ale fișierului) care conțin informații suplimentare. De exemplu, dacă faceți o fotografie cu ceva pe telefon, transferați fișierul pe computer, faceți clic pe el cu tasta dreapta și selectați "Proprietăți → Detalii", veți vedea datele de pe dispozitiv: camera pe care ați fotografiat-o, viteza obturatorului, ISO și așa mai departe. Pentru utilizator, aceste informații sunt inutile, astfel încât să puteți scăpa de ele.

Păi, gândește-te, o bucată. Ce este, o grămadă de informații care sunt conținute? Imaginați-vă. Uneori obții imagini în care sunt sute de kilobyte de astfel de date. Doar astăzi, au trimis un logo de 584 KB pentru a se potrivi. În același timp, informațiile utile au fost de numai 14 KB! În ceea ce mă privește, nu este complet corect să forțați vizitatorul să descarce 570 KB de sus.

Să rezumăm subtotalurile. Pentru ca utilizatorii site-ului să se descurce bine, trebuie să:

1. Reduceți dimensiunea imaginii. Pentru a ajuta orice editor grafic.
2. Aruncarea pieselor de fișier nu este necesară. De fapt, utilizatorul are nevoie doar de o imagine.
3. Încercați să reduceți în continuare dimensiunea imaginii.

Primul paragraf implică lucrul individual la fiecare fișier. Este nevoie de timp, dar aduce cel mai bun rezultat. Deschidem fiecare fișier, tăiem, reducem, apoi salvăm cu o calitate acceptabilă.

Dar paragrafele 2 și 3 pot fi date la mila programelor speciale. Software pentru lucrul cu setările de imagini. Google recomandă următoarele programe:

• jpegtran pentru formatul de imagine jpg.
• optipng și pngout pentru imaginile PNG.

Un pic despre p. 3. Editorii grafici nu obișnuiesc cu asta. Ele salvează pur și simplu imaginea, alegând în avans algoritmi de compresie care au aceleași setări, coeficienți de cuantizare și alte lucruri. În plus, mulți transferă sincer meta-informațiile disponibile și adaugă propriile lor, mărind și mai mult dimensiunea fișierului.

Cerințe preliminare

Acum un an au început să vorbească în masă despre serviciu. PageSpeed ​​Insights de la Google. De fapt, acestea sunt recomandările gigantului de căutare cu privire la "cum să faci bine". Doar tastați adresa site-ului și obțineți o listă de sugestii pentru optimizare. De asemenea, puteți descărca resurse deja optimizate, inclusiv imagini, pentru site-ul dvs. Este adevărat că acest lucru este relevant numai pentru pagina selectată.

Dacă aveți un site web, asigurați-vă că căutați acest articol . Este deosebit de util pentru cei care folosesc WordPress.

Utilizăm recomandări pentru imagini

Se pare simplu: descărcați programele specificate de Google și rulați prin ele toate fișierele de pe server. Problema este că aceste utilitare sunt console. Ei iau doar un fișier la un moment dat. Dar nu suntem zadarnici ultimul articol a făcut timp pentru a înregistra fișiere, nu?

Informațiile din articol sunt destul de suficiente pentru a vă crea propriul handler de fișiere en masse, așa că nu voi picta unde este asta. Propun doar să descarc ansamblul gata, pe care îl folosesc eu însumi.

Descărcați arhiva (212 KB)

Structura arhivei

Arhiva conține un dosar [ OptimizeImg ]. Pentru a începe, despachetați-l undeva. Am localizat în c: \ temp \ dar nu contează. Principalul lucru este că traseul nu conține semne de exclamare.

În continuare. Acest dosar conține subdirectorul [ uploads ]. Aici trebuie să puneți fișierele care necesită prelucrare. Cea mai bună parte este că puteți împinge cel puțin structura dosarului / fișierului.

Există încă 3 programe: jpegtran.exe | optipng.exe | pngout.exe este foarte utilitatea recomandată de Google. Descărcate de pe site-urile / depozitele oficiale corespunzătoare. Dacă aveți îndoieli sau doriți doar să faceți upgrade, descărcați de pe o sursă de încredere și înlocuiți-le pe cele existente.

Și, în sfârșit, inima tulzei. Batnichki:

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

Primul fișier, 1.bat, recreează structura din [încărcări]. Se creează 3 dosare suplimentare: [jpg_jpegtran] [png_optipng] [png_pngout] cu fișierele minime procesate de tipul lor (jpg - numai * .jpg-fișiere, la fel cu png).

3.bat lansează în mod succesiv trei fișiere batch pentru execuție:

• 3-go.bat este aproape la fel ca 1.bat. Săriți fișierele jpg / png prin intermediul dispozitivelor de minimizare. Rezultatul lucrării va fi 3 foldere (vezi mai sus) cu imaginile corespunzătoare.
• 3-opti-to-out.bat creează dosarul [png_optipng-to-pngout], în care sunt scrise fișierele procesate de optipng + pngout (exact în această secvență).
• 3-out-to-opti.bat creează un director [png_pngout-to-optipng] în care sunt scrise fișierele procesate de pngout + optipng. Similar cu cel precedent, numai într-o succesiune diferită.

În principiu, doar 1.bat este suficient pentru nevoile noastre. Sacii 3x au apărut ca urmare a cercetărilor și erorilor din versiunea anterioară a fișierului lot. Sa întâmplat că în timpul erorii fișierele pentru pngout au fost luate din directorul optipng. Și care a fost surpriza mea când lansarea versiunii vechi a dat o dimensiune de 1,5 ori mai mică decât în ​​fișierul actualizat actualizat. Ca rezultat, sa dovedit că prelucrarea dublă poate "captura" imaginile bine. Dar este nevoie de aproape 2 ori mai mult timp. Deci, decideți-vă dacă este necesar.

Instructiuni scurte pentru munca

1. Descărcați arhiva .
2. Despachetați-l.
3. Accesați folderul [OptimizeImg] nou deschis.
4. Toate fișierele care necesită stinging, copiați dosarul [upload].
5. Rulați 1.bat și așteptați. Dacă există mai multe fișiere și sunt png, așteptați mult timp.
6. Când apare un mesaj în fereastra neagră despre necesitatea de a apăsa o tastă pentru a continua, totul este gata. Rămâne să luăm conținutul dosarelor create și să le copiem la hosting prin FTP, suprascriind fișiere vechi.

Pentru un exemplu. Permiteți-vă să aveți un blog pe WordPress. Toate imaginile sunt stocate în [ / wp-content / uploads / ]. Accesați folderul site-ului (prin ftp), accesați [ wp-content ] și pur și simplu copiați [ uploads ] în folderul OptimizeImg cu același nume. Rulați 1.bat și așteptați. După finalizarea lucrării, conținutul [jpg_jpegtran] (mergem acolo!) Este încărcat pe server. Solicitările pentru fișiere existente sunt preluate prin suprascriere. Un truc similar pentru png, dar mai întâi ne uităm la care folder - [png_optipng] sau [png_pngout] - ocupă mai puțin spațiu, umple-l cu conținutul său.

Nu vă temeți să deteriorați alte fișiere. Batniki funcționează numai cu jpg / png și numai imaginile de aceste tipuri sunt scrise în folderele nou create.

Sper că cineva va fi util. Mult noroc!

Suplimente

1. Calea către [OptimizeImg] nu trebuie să conțină semne de exclamare ! și procente %
2. Scrierea de script-uri ca administrator nu este necesară. Mai mult decât atât, în acest caz, este posibil să nu funcționeze!
3. ...

Autori

nu online 13 ore

x64 (aka andi)

Comentarii: 2846 Publicații: 395 Înregistrare: 02-04-2009