Pildi optimeerimine saidile: partii töötlemine kasutades jpegtran | optipng | pngout

1. Eeltingimused
2. Me kasutame soovitusi piltidele
3. Arhiivistruktuur
4. Lühike tööjuhend
5. Lisad
6. x64 (teise nimega andi)

Saidid ilma piltideta - anakronism. Nii paljud inimesed arvavad, ja see ei ole tervest mõistusest. Pidage meeles, kui kaua te olete viimasel ajal saidil viibinud ja kui kaua olete seda olnud?

Tekstiandmed on pildist palju väiksemad. Kuid inimesed teavad, et armastavad oma silmi. Seetõttu on pildid vaieldamatult eeliseks.

Üldiselt räägime tekstist nii selle sisu kui ka mugava visuaalse esitluse, sealhulgas lõigete, nimekirjade, jutumärkide, tabelite kohta. Kuid sellest ei piisa, ja isegi uudistesaidid üritavad ajakirjanikele pilte anda.

Alustame eeldusest, et pildid on vajalikud. Need võivad olla fotod, diagrammid, lihtsalt piltide selgitamine.

Kaua aega tagasi, kui Putin ei tundunud igaveseks, tegin oma esimese meditsiinilise veebiportaali. Pilte oli vaja panna atlasi. On ilmselge, et keha anatoomilist struktuuri on ilma piltideta üsna raske ette kujutada ja seda veelgi enam sõnadega kirjeldada. Ja ilma edasiste juhisteta laadisin üles pildid bmp (tihendamata formaat). Kas ma pean ütlema, et nad kaalusid tainast? Lisaks ei osanud mõned brauserid selliseid pilte näidata.

Miks optimeerida pilte? Lihtne näide on foto. Kaasaegsetel telefonidel on kaamerad 8, 12 ja isegi rohkem megapikslit. 12 MP vastab pildile 4000 × 3000 pikslit. Sõltuvalt stseeni keerukusest vastab see 2-5 megabaiti suurusele suurusele ja veelgi enam. Kümmekond fotot - ja lehekülje suurus paisuvad palju. Pilt sobib sisupiirkonda, mis tähendab, et brauser peab kõigepealt alla laadima, mõõtma ja näitama. Nõrkade jaoks töötlejad või väikese hulga RAM-iga - katastroof.

Nüüd kujutage ette, et kasutaja vaatab saiti telefonist. Sel juhul ei saa lehe laadimine lihtsalt oodata. Seega tuleb pilte eelnevalt vähendada.

Keegi väidab, et selles pole mõtet, tänapäeva CMS teeb piltide allalaadimisel automaatselt pisipilte. Kuid kas kõigil on oma saidid VPS-i või VIP-hindadega? Laadige alla üks 12 MP pilt, kuid selle töötlemiseks peab PHP salvestamiseks hoidma 35 + megabaiti (teoreetiliselt rohkem) ja seejärel teab, kui palju on vaja luua väiksem koopia. Odavad tariifid astuvad kohe üle ressursside hulka. Hea hoster palub kasutajal seda enam mitte teha, halb see ignoreerib seda, sest ainult raha on talle oluline, mitte teenuste osutamine.

Ja nii otsustasime me õigesti tegutseda. Me vähendame kujutisi esialgu ja laadime need seejärel üles. Nii et mootor on lihtsam ja inimesed. Kas kõik on Mitte tegelikult.

Paljud toimetajad säilitavad originaalpakke (meta-teave, faili mitte-kujutised), mis sisaldavad täiendavat teavet. Näiteks, kui pildistate midagi telefonist, edastage fail arvutisse, klõpsake seda parempoolse klahviga ja valige “Properties → Details”, näete seadmes olevaid andmeid: millist kaamerat te pildistasite, säriaega, ISO ja nii edasi. Kasutaja jaoks on see teave kasutu, nii et saate sellest vabaneda.

Mõtle sellele, üks tükk. Mis seal on, hulk teavet, mis on olemas? Kujutage ette. Mõnikord saad pilte, milles sadu kilobaidit selliseid andmeid. Just täna saatsid nad mahuga 584 KB suuruse logo. Samal ajal oli kasulik teave vaid 14 KB! Mis puudutab mind, siis ei ole täiesti õige sundida külastaja üles alla laadima 570 KB.

Tehkem kokkuvõtte vahesummad. Selleks, et saidi kasutajad saaksid hästi hakkama, peate:

1. Vähendage pildi suurust. Iga graafilise redaktori abistamiseks.
2. Visake failiosad välja. Tegelikult vajab kasutaja ainult pilti.
3. Püüdke pildi suurust veelgi vähendada.

Esimene lõik hõlmab iga toimiku eraldi tööd. See on aeganõudev, kuid see toob kaasa parima tulemuse. Avame iga faili, lõigame, vähendame ja salvestame vastuvõetava kvaliteediga.

Kuid lõikeid 2 ja 3 võib anda eriprogrammide armul. Tarkvara piltidega töötamiseks. Google soovitab järgmisi programme:

• jpegtran jpg kujutise vormingus.
• PNG-piltide optipng ja pngout .

Natuke umbes lk 3. Graafilised redaktorid tavaliselt ei muretse. Nad lihtsalt salvestavad pildi, valides ajast eelnevalt samad seadistused, kvantimiskoefitsiendid ja muud asjad. Lisaks edastavad paljud ausalt kättesaadavat metainformatsiooni ja lisavad omaenda, suurendades veelgi faili suurust.

Eeltingimused

Aasta tagasi hakkasid nad teenuse kohta massiliselt rääkima. PageSpeed ​​Insights google'ist. Tegelikult on need otsingupildi soovitused „kuidas hästi teha”. Sisestage lihtsalt saidi aadress ja hankige optimeerimiseks soovituste nimekiri. Seal saate ka oma saidile alla laadida juba optimeeritud ressursse, sealhulgas pilte. Tõsi, see on asjakohane ainult kontrollitud lehele.

Kui teil on veebisait, vaata kindlasti see artikkel . Eriti kasulik neile, kes kasutavad WordPressi.

Me kasutame soovitusi piltidele

Tundub lihtne: laadige alla Google'i määratud programmid ja käivitage nende kaudu kõik serveris olevad failid. Probleem on selles, et need kommunaalteenused on konsool. Nad võtavad korraga ainult ühe faili. Kuid me ei ole asjata viimane artikkel võttis aega failide partiideks, eks?

Artiklist pärinev teave on piisavalt suur, et luua massiivne failihaldur, nii et ma ei värvi, kus see on. Ma lihtsalt soovin alla laadida valmis komplekti, mida ma ise kasutan.

Allalaadimise arhiiv (212 KB)

Arhiivistruktuur

Arhiiv sisaldab kausta [ OptimizeImg ]. Alustamiseks avage see kuskil. Mul on see c: temp, kuid see pole oluline. Peaasi on see, et tee ei sisalda hüüumärke.

Järgmine. See kaust sisaldab alamkataloogi [ uploads ]. Siin on vaja töödelda failid, mis vajavad töötlemist. Parim osa on see, et saate vajutada vähemalt kausta / faili struktuuri.

On veel 3 programmi: jpegtran.exe optipng.exe pngout.exe on Google'i soovitatud kasulikkus. Allalaaditud vastavatelt ametlikelt saitidelt / hoidlatelt. Kahtluse korral või lihtsalt soovite uuendada, alla laadida usaldusväärsest allikast ja asendada olemasolevad.

Ja lõpuks, tulza süda. Batnichki:

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

Esimene fail, 1.bat, loob struktuuri [üleslaadimistest]. Luuakse 3 täiendavat kausta: [jpg_jpegtran] [png_optipng] [png_pngout] töödeldud minimeeritud failidega, mille tüüp on (jpg - ainult * .jpg-failid, sama png-iga).

3.bat käivitab järjestikku kolm partiifaili:

• 3-go.bat on peaaegu sama, mis 1.bat. Jüpg / png-failide vahelejätmine minimeerijate abil. Töö tulemuseks on 3 kausta (vt eespool) koos vastavate piltidega.
• 3-opti-to-out.bat loob [png_optipng-to-pngout] kausta, kuhu kirjutatakse failid, mida töödeldakse + pngouti abil (täpselt selles järjestuses).
• 3-out-to-opti.bat loob [png_pngout-to-optipng] kausta, kuhu kirjutatakse pngout + optipng töödeldud faile. Sarnaselt eelmisele, ainult erinevas järjekorras.

Põhimõtteliselt piisab ainult 1.batist meie vajadustele. 3-kordsed kotid ilmusid uuringu ja eksemplaride tõttu eelmise versiooni failis. Nii juhtus, et vea ajal võeti pngouti failid optipng kataloogist. Ja milline oli minu üllatus, kui vana versiooni käivitamine andis 1,5 korda väiksema suuruse kui uuendatud partiifailis. Selle tulemusena selgus, et kahekordne töötlemine võib „pildid“ hästi kinni pidada. Aga see võtab aega peaaegu 2 korda rohkem. Seega otsustage ise, kas see on vajalik.

Lühike tööjuhend

1. Allalaadimise arhiiv .
2. Laadige see välja.
3. Minge äsja avatud [OptimizeImg] kausta.
4. Kõik failid, mis vajavad nõelamist, kopeerivad kausta [upload].
5. Käivita 1.bat ja oodake. Kui faile on palju ja nad on png, oodake pikka aega.
6. Kui mustasse aknasse ilmub teade vajadusest vajutada klahvi jätkamiseks, on kõik valmis. Jääb üle loodud kaustade sisu kopeerimine ja kopeerimine hostimisse FTP kaudu, kirjutades üle vanad failid.

Näiteks. Teil on WordPressi blogi. Kõik pildid salvestatakse [ / wp-content / uploads / ]. Minge saidi kausta (ftp kaudu), minge [ wp-content ] ja lihtsalt kopeeri [ uploads ] kausta OptimizeImg sama nimega. Käivita 1.bat ja oodake. Pärast töö lõpetamist laaditakse serverisse sisu [jpg_jpegtran] (me läheme sinna!). Olemasolevate failide päringutele vastatakse ülekirjutamisega. Sarnane trikk png jaoks, kuid kõigepealt vaatame, milline kaust - [png_optipng] või [png_pngout] võtab vähem ruumi, täitke see oma sisuga.

Ärge kartke kahjustada teisi faile. Batniki töötab ainult jpg / png-ga ja ainult nende tüüpide kujutised kirjutatakse äsja loodud kaustadesse.

Loodan, et keegi on kasulik. Edu!

Lisad

1. Tee [OptimizeImg] ei tohi sisaldada hüüumärke ! ja protsent %
2. Käivita skriptid administraatorina ei ole vajalik. Lisaks ei pruugi nad sellisel juhul töötada!
3. ...

Kirjastaja

ei online 13 tundi

x64 (teise nimega andi)

Kommentaarid: 2846 Väljaanded: 395 Registreerimine: 02-04-2009