Vaizdo optimizavimas svetainėje: paketinis apdorojimas naudojant jpegtran | optipng | pngout

  1. Būtinos sąlygos
  2. Naudojame vaizdų rekomendacijas
  3. Archyvų struktūra
  4. Trumpos darbo instrukcijos
  5. Papildymai
  6. x64 (dar žinomas kaip andi)

Svetainė be vaizdų - anachronizmas. Tiek daug žmonių galvoja, ir jis neturi sveiko proto. Nepamirškite, kiek ilgai buvote svetainėje paskutinį kartą ir kiek ilgai buvote?

Teksto duomenys yra daug mažesni už vaizdą. Bet žinoma, kad žmonės myli savo akis. Todėl nuotraukos bus neabejotinai naudingos istorijai.

Apskritai kalbant apie tekstą, mes suprantame tiek jo turinį, tiek patogų vaizdinį pateikimą, įskaitant pastraipas, sąrašus, kabutes, lenteles. Tačiau to nepakanka, ir net naujienų svetainės bando pateikti žurnalistų vaizdus.

Tačiau to nepakanka, ir net naujienų svetainės bando pateikti žurnalistų vaizdus

Pradėkime nuo prielaidos, kad vaizdai reikalingi. Tai gali būti nuotraukos, diagramos, tiesiog paaiškinantys nuotraukas.

Dar seniai, kai Putinas neatrodė amžinas, sukūriau savo pirmąjį medicinos portalą. Buvo būtina į atvaizdą patalpinti nuotraukas. Akivaizdu, kad gana sunku įsivaizduoti kūno anatominę struktūrą be nuotraukų, ir dar labiau, kad būtų apibūdinami žodžiai. Ir be papildomos informacijos, įkėliau nuotraukas į bmp (nesuspaustą formatą). Ar turiu pasakyti, kad jie pasverė tešlą? Be to, kai kurios naršyklės nežinojo, kaip rodyti tokias nuotraukas.

Kodėl optimizuoti vaizdus? Paprastas pavyzdys yra nuotrauka. Šiuolaikiniuose telefonuose yra 8, 12 ir dar daugiau megapikselių. 12 MP atitinka 4000 × 3000 pikselių vaizdą. Priklausomai nuo scenos sudėtingumo, tai atitinka 2-5 megabaitų dydį ir dar daugiau. Daugybė nuotraukų - ir puslapių dydis - daugėja. Vaizdas telpa į turinio sritį, o tai reiškia, kad naršyklė pirmiausia turi parsisiųsti viską, ją masto ir tik tada rodyti. Dėl silpnų procesorius arba su nedideliu RAM kiekiu - katastrofa.

Įsivaizduokite, kad vartotojas stebi svetainę iš telefono. Tokiu atveju puslapio įkėlimas tiesiog negali laukti. Taigi, nuotraukos turi būti iš anksto sumažintos.

Kažkas teigia, kad šiuo klausimu nėra prasmės, o šiuolaikinės CMS automatiškai atsisiunčia vaizdus. Bet ar kiekvienas turi savo svetaines pagal VPS ar VIP tarifus? Atsisiųskite vieną 12 MP vaizdą, tačiau jį apdoroti, PHP turės saugoti 35 + megabaitus (teoriškai daugiau), o tada vis dar žino, kiek sukurti mažesnę kopiją. Pigūs tarifai nedelsdami įsilieja į išteklių viršijimą. Geras prieglobstis paprašys, kad vartotojas to nedarytų, blogas tai ignoruos, nes jam svarbūs tik pinigai, o ne paslaugų teikimas.

Ir taip, mes nusprendėme veikti teisingai. Preliminariai sumažiname vaizdus ir įkeliame juos į svetainę. Taigi variklis yra paprastesnis, o žmonės. Ar viskas Ne iš tikrųjų.

Daugelis redaktorių išlaiko originalius gabalus (meta-informaciją, ne vaizdo dalis), kuriuose yra papildomos informacijos. Pvz., Jei fotografuojate kažką telefone, perkelkite failą į kompiuterį, spustelėkite jį dešiniuoju klavišu ir pasirinkite „Properties → Details“, pamatysite duomenis apie įrenginį: kokią fotoaparatą fotografavote, užrakto greitį, ISO ir kt. Naudotojui ši informacija yra nenaudinga, todėl galite ją atsikratyti.

Na, pagalvokite apie tai, vienas gabalas. Kas ten yra, informacijos rinkinys? Įsivaizduokite. Kartais gaunami vaizdai, kuriuose šimtai kilobaitų tokių duomenų. Šiandien jie išsiuntė 584 KB dydžio logotipą, kad tilptų. Tuo pačiu metu naudinga informacija buvo tik 14 KB! Kalbant apie mane, nėra visiškai teisinga priversti lankytoją atsisiųsti iš viršaus 570 KB.

Apibendrinsime tarpines sumas. Kad svetainės naudotojai gerai veiktų, jums reikia:

  1. Sumažinkite vaizdo dydį. Norėdami padėti bet kokiam grafiniam redaktoriui.
  2. Išmeskite rinkmenų dalis. Iš tiesų, vartotojui reikia tik nuotraukos.
  3. Pabandykite dar labiau sumažinti vaizdo dydį.

Pirmoje pastraipoje numatytas individualus darbas su kiekviena byla. Tai užima daug laiko, tačiau jis duoda geriausią rezultatą. Mes atidarome kiekvieną failą, supjaustome, sumažiname ir išsaugome priimtiną kokybę.

Tačiau 2 ir 3 dalys gali būti suteiktos specialiųjų programų malonė. Programinė įranga, skirta dirbti su vaizdais. „Google“ rekomenduoja šias programas:

  • jpegtran jpg vaizdo formatui.
  • PNG vaizdų optipng ir pngout .

Šiek tiek apie 3 psl. Grafiniai redaktoriai paprastai su juo nesivargina. Jie paprasčiausiai išsaugo vaizdą, pasirenkant iš anksto nustatytus kompresijos algoritmus, turinčius tuos pačius nustatymus, kvantavimo koeficientus ir kitus dalykus. Be to, daugelis sąžiningai perduoda turimą meta informaciją ir prideda savo, dar labiau didindami failo dydį.

Būtinos sąlygos

Prieš metus jie pradėjo masiškai kalbėti apie paslaugą. PageSpeed ​​įžvalgos iš „Google“. Tiesą sakant, tai yra paieškos milžino rekomendacijos „kaip gerai daryti“. Tiesiog įveskite svetainės adresą ir gaukite optimizavimo pasiūlymų sąrašą. Čia taip pat galite atsisiųsti jau optimizuotus išteklius, įskaitant vaizdus, ​​skirtus savo svetainei. Tiesa, tai tinka tik patikrintam puslapiui.

Jei turite svetainę, patikrinkite šį straipsnį . Ypač naudinga tiems, kurie naudoja WordPress.

Naudojame vaizdų rekomendacijas

Atrodo paprasta: atsisiųskite „Google“ nurodytas programas ir jomis paleiskite visus serverio failus. Problema ta, kad šios komunalinės paslaugos yra konsolės. Vienu metu jie paima tik 1 failą. Bet mes ne veltui paskutinis straipsnis paėmė laiko rinkti failus, tiesa?

Straipsnyje pateikta informacija yra pakankamai didelė, kad galėtumėte sukurti savo rinkmenų tvarkytoją masiniu būdu, taigi nebūsiu dažyti, kur tai yra. Aš tiesiog siūlau atsisiųsti paruoštą surinkimą, kurį naudoju sau.

Atsisiųsti archyvą (212 KB)

Archyvų struktūra

Archyve yra aplankas [ OptimizeImg ]. Norėdami pradėti, išpakuokite ją kažkur. Aš turiu jį c: o bet tai nesvarbu. Svarbiausia yra tai, kad kelio nėra.

Toliau. Šiame aplanke yra [ uploads ] pakatalogis. Čia reikia įdėti failus, kuriuos reikia apdoroti. Geriausia yra tai, kad galite stumti bent aplanko / failo struktūrą.

Yra dar 3 programos: jpegtran.exe optipng.exe | „pngout.exe“ yra pati „Google“ rekomenduojama priemonė. Atsisiunčiama iš atitinkamų oficialių svetainių / saugyklų. Jei kyla abejonių, arba tiesiog norite atnaujinti, atsisiųsti iš patikimo šaltinio ir pakeisti esamus.

Ir galiausiai, tulžos širdis. Batnichki:

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

Pirmasis failas, 1.bat, sukuria struktūrą iš [uploads]. Sukuriami 3 papildomi aplankai: [jpg_jpegtran] [png_optipng] [png_pngout] su apdorotais minimaliais jų tipo failais (jpg - tik * .jpg-failai, tas pats su png).

3.bat iš eilės paleidžiami trys paketiniai failai vykdymui:

  • 3-go.bat yra beveik toks pat kaip 1.bat. Praleiskite jpg / png failus per minimalizatorius. Darbo rezultatas bus 3 aplankai (žr. Aukščiau) su atitinkamais vaizdais.
  • 3-opti-to-out.bat sukuria aplanką [png_optipng-to-pngout], į kurį rašomi failai, apdoroti optipng + pngout (tiksliai tokia seka).
  • 3-out-to-opti.bat sukuria aplanką [png_pngout-to-optipng], į kurį įrašomi failai, apdoroti pngout + optipng. Panašus į ankstesnį, tik kitoje sekoje.

Iš esmės užtenka tik 1.bat. 3x maišeliai atsirado dėl tyrimų ir klaidų ankstesnėje partijos failo versijoje. Taip atsitiko taip, kad per klaidą pngout failai buvo paimti iš katalogo optipng. Ir koks buvo mano nustebimas, kai senosios versijos paleidimas davė 1,5 karto mažesnį dydį nei atnaujintoje rinkmenoje. Todėl paaiškėjo, kad dvigubas apdorojimas gali „pasivyti“ nuotraukas. Tačiau tai trunka beveik 2 kartus daugiau laiko. Taigi nuspręskite, ar tai reikalinga.

Trumpos darbo instrukcijos

  1. Atsisiųsti archyvą .
  2. Išpakuokite.
  3. Eikite į naujai atidarytą aplanką [OptimizeImg].
  4. Visi failai, kuriems reikalingas svaiginimas, nukopijuoja aplanką [įkelti].
  5. Paleiskite 1.bat ir palaukite. Jei yra daug failų ir jie yra png, palaukite ilgai.
  6. Kai juodame lange pasirodo pranešimas, kad reikia paspausti klavišą, viskas bus paruošta. Lieka paimti sukurtų aplankų turinį ir kopijuoti į prieglobą per FTP, perrašydami senus failus.

Pavyzdžiui. Leiskite turėti „WordPress“ tinklaraštį. Visi vaizdai yra saugomi [ / wp-content / uploads / ]. Eikite į svetainės aplanką (per ftp), eikite į [ wp-content ] ir tiesiog nukopijuokite [ uploads ] į tą patį pavadinimą esantį aplanką OptimizeImg. Paleiskite 1.bat ir palaukite. Baigus darbą, turinys [jpg_jpegtran] (mes einame ten!) Įkeliamas į serverį. Į esamų failų užklausas atsakoma perrašant. Panašus triukas png, bet pirmiausia mes žiūrime, kuris aplankas - [png_optipng] arba [png_pngout] - užima mažiau vietos, užpildykite jį turiniu.

Nebijokite sugadinti kitų failų. „Batniki“ dirba tik su „jpg / png“, o naujai sukurtuose aplankuose rašomi tik šių tipų vaizdai.

Tikiuosi, kad kas nors bus naudingas. Sėkmės!

Papildymai

  1. Kelias į [OptimizeImg] neturėtų turėti šūksnių ! ir procentais
  2. Paleisti scenarijus kaip administratorius nėra būtinas. Be to, šiuo atveju jie gali neveikti!
  3. ...

Leidėjas

ne internete 13 valandų

x64 (dar žinomas kaip andi)

Komentarai: 2846 Leidiniai: 395 Registracija: 02-04-2009

IRC (Internet Relay Chat)