1. predpoklady
2. Používame odporúčania pre obrázky
3. Štruktúra archívu
4. Stručný návod na prácu
5. doplnky stravy
6. x64 (aka andi)

Miesto bez obrázkov - anachronizmus. Toľko ľudí si myslí, a to nie je bez zdravého rozumu. Pamätajte si, ako dlho ste na stránke naposledy a ako dlho ste na nej?

Textové údaje sú oveľa menšie ako obrázok. Ale je známe, že ľudia milujú svoje oči. Preto budú obrázky nepochybnou výhodou príbehu.

Všeobecne platí, že keď hovoríme o texte, myslíme tak jeho obsah, ako aj pohodlnú vizuálnu prezentáciu, vrátane odsekov, zoznamov, citácií, tabuliek. To však nestačí, a dokonca aj spravodajské servery sa snažia poskytovať obraz novinárov.

Začnime z predpokladu, že obrazy sú potrebné. Môžu to byť fotografie, diagramy, jednoducho vysvetľujúce obrázky.

Kedysi dávno, keď sa Putin nezdal večný, urobil som svoj prvý zdravotnícky webový portál. Do atlasu bolo potrebné umiestniť obrázky. Je zrejmé, že je dosť ťažké predstaviť si anatomickú štruktúru tela bez obrázkov, a tým viac, aby sme to opísali slovami. A bez ďalších okolkov som nahral obrázky do bmp (nekomprimovaný formát). Musím povedať, že vážili cesto? Okrem toho, niektoré prehliadače nevedeli, ako zobraziť takéto obrázky.

Prečo teda optimalizovať obrázky? Jednoduchým príkladom je fotografia. Moderné telefóny majú fotoaparáty v 8, 12 a ešte viac megapixelov. 12 MP zodpovedá obrazu 4000 × 3000 pixelov. V závislosti od zložitosti scény to zodpovedá veľkosti 2-5 megabajtov a ešte viac. Tucet fotografií - a veľkosť stránky sa zväčšuje. Obrázok sa zmestí do oblasti obsahu, čo znamená, že prehliadač musí najprv prevziať všetko, zmenšiť ho a až potom ho zobraziť. Pre slabých procesory alebo s malým množstvom pamäte RAM - katastrofa.

Teraz si predstavte, že užívateľ sleduje stránku z telefónu. V tomto prípade načítanie stránky jednoducho nemôže čakať. Takže obrázky musia byť predredukované.

Niekto bude tvrdiť, že v tom nemá zmysel, moderný CMS automaticky vytvára miniatúry pri sťahovaní obrázkov. Ale majú všetci svoje stránky na VPS alebo VIP sadzbách? Stiahnite si jeden 12 MP obraz môže vyjsť, ale na spracovanie, PHP bude musieť prideliť 35 + megabajtov (teoreticky, v skutočnosti viac) pre skladovanie, a potom ešte vie, koľko vytvoriť menšie kópie. Lacné tarify okamžite klesnú do nadbytku zdrojov. Dobrý hoster požiada užívateľa, aby to už neurobil, zlý bude ignorovať, pretože len peniaze sú pre neho dôležité, a nie výkon služieb.

A tak sme sa rozhodli konať správne. Predbežne zmenšujeme obrázky a potom ich odovzdávame na stránku. Takže motor je ľahší a ľudia. Je všetko Nie naozaj.

Mnohí redaktori si zachovávajú pôvodné kúsky (meta-informácie, neobrazové časti súboru), ktoré obsahujú ďalšie informácie. Napríklad, ak si vezmete obrázok z telefónu, preneste súbor do počítača, kliknite naň pravým tlačidlom a vyberte položku „Vlastnosti → Detaily“, zobrazia sa údaje na zariadení: ktorý fotoaparát fotografujete, rýchlosť uzávierky, ISO a tak ďalej. Pre užívateľa sú tieto informácie k ničomu, takže sa ich môžete zbaviť.

No, premýšľajte o tom, jeden kus. Čo je tam, veľa informácií, ktoré sú obsiahnuté? Predstaviť. Niekedy dostanete obrázky, v ktorých sú stovky kilobajtov takýchto údajov. Práve dnes poslali logo s veľkosťou 584 kB, aby sa mohli ubytovať. Zároveň boli užitočné informácie iba 14 KB! Pokiaľ ide o mňa, nie je úplne správne nútiť návštevníka stiahnuť 570 KB zhora.

Zhrňme medzisúčty. Na to, aby používatelia stránky mohli robiť dobre, potrebujete:

1. Zmenšite veľkosť obrázka. Na pomoc každému grafickému editoru.
2. Vyhodenie častí súboru je zbytočné. Užívateľ potrebuje len obrázok.
3. Pokúste sa ďalej zmenšiť veľkosť obrázka.

Prvý odsek zahŕňa individuálnu prácu na každom súbore. Je to časovo náročné, ale prináša to najlepší výsledok. Otvoríme každý súbor, nakrájame, znížime a uložíme s prijateľnou kvalitou.

Odseky 2 a 3 však možno vydať na milosť špeciálnych programov. Softvér pre prácu so súbormi obrázkov. Spoločnosť Google odporúča nasledujúce programy:

• jpegtran pre formát obrázku jpg.
• optipng a pngout pre obrázky PNG.

Trochu o str. 3. Grafické editory sa s tým zvyčajne neobťažujú. Jednoducho si uložia obrázok, pričom si zvolia pred časom uložené kompresné algoritmy s rovnakými nastaveniami, kvantizačnými koeficientmi a inými vecami. Okrem toho mnohí čestne prenášajú dostupné meta-informácie a pridávajú svoje vlastné, čím ďalej zväčšujú veľkosť súboru.

predpoklady

Pred rokom začali hovoriť hromadne o službe. Štatistiky stránky PageSpeed od spoločnosti Google. V skutočnosti sú to odporúčania gigantu vyhľadávania na tému „ako sa dariť“. Stačí zadať adresu stránky a získať zoznam návrhov na optimalizáciu. Tam si môžete tiež stiahnuť už optimalizované zdroje, vrátane obrázkov, pre vaše stránky. Je to pravda iba pre kontrolovanú stránku.

Ak máte webové stránky, určite sa pozrite tohto článku , Zvlášť užitočné pre tých, ktorí používajú WordPress.

Používame odporúčania pre obrázky

Zdá sa to jednoduché: stiahnite si programy určené spoločnosťou Google a spúšťajte všetky súbory na serveri prostredníctvom nich. Problém je, že tieto nástroje sú konzoly. Vezmú len jeden súbor naraz. Ale my nie sme zbytoční posledný článok trvalo čas na dávkové súbory, nie?

Informácie z článku sú dosť veľké na to, aby si vytvorili vlastný súborový nástroj en masse, takže nebudem maľovať, kde to je. Navrhujem len stiahnuť pripravenú zostavu, ktorú používam sám.

Stiahnuť archív (212 KB)

Štruktúra archívu

Archív obsahuje priečinok [ OptimizeImg ]. Ak chcete začať, rozbaľte ho niekde. Mám ho umiestnený v c: teplota, ale nezáleží na tom. Hlavná vec je, že cesta neobsahuje výkričníky.

Next. Tento priečinok obsahuje podadresár [ uploads ]. Tu je potrebné dať súbory, ktoré vyžadujú spracovanie. Najlepšia časť je, že môžete stlačiť aspoň štruktúru priečinkov / súborov.

K dispozícii sú 3 ďalšie programy: jpegtran.exe | optipng.exe | pngout.exe je veľmi užitočný nástroj odporúčaný spoločnosťou Google. Stiahnuté z príslušných oficiálnych stránok / úložísk. Ak máte pochybnosti, alebo len chcete aktualizovať, stiahnite si z dôveryhodného zdroja a nahradiť existujúce.

A nakoniec, srdce tulzy. Batnichki:

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

Prvý súbor, 1.bat, obnoví štruktúru z [upload]. Vytvoria sa 3 ďalšie priečinky: [jpg_jpegtran] [png_optipng] [png_pngout] so spracovanými minimalizovanými súbormi svojho typu (jpg - iba * .jpg-súbory, rovnaké s png).

3.bat postupne spustí tri dávkové súbory na vykonanie:

• 3-go.bat je takmer rovnaký ako 1.bat. Preskočiť jpg / png súbory cez minimalizátory. Výsledkom práce budú 3 priečinky (pozri vyššie) s príslušnými obrázkami.
• 3-opti-to-out.bat vytvorí priečinok [png_optipng-to-pngout], do ktorého sú zapísané súbory spracované optipng + pngout (presne v tomto poradí).
• 3-out-to-opti.bat vytvorí priečinok [png_pngout-to-optipng], do ktorého sú zapísané súbory spracované pngout + optipng. Podobne ako predchádzajúce, len v inom poradí.

V zásade stačí iba 1.bat pre naše potreby. 3x tašky sa objavili ako výsledok výskumu a chyby v predchádzajúcej verzii dávkového súboru. Stalo sa tak, že počas chyby boli súbory pre pngout prevzaté z adresára optipng. A čo bolo moje prekvapenie, keď spustenie starej verzie dalo 1,5 krát menšiu veľkosť ako v aktualizovanom dávkovom súbore. V dôsledku toho sa ukázalo, že dvojité spracovanie môže „dobehnúť“ obrázky. Trvá to však takmer 2 krát viac času. Rozhodnite sa, či je to potrebné.

Stručný návod na prácu

1. Stiahnite si archív ,
2. Rozbaľte ho.
3. Prejdite do novo otvoreného priečinka [OptimizeImg].
4. Všetky súbory, ktoré vyžadujú bodnutie, skopírujte priečinok [upload].
5. Spustiť 1.bat a čakať. Ak existuje veľa súborov a sú png, počkajte dlho.
6. Keď sa v čiernom okne objaví správa o potrebe stlačenia klávesu na pokračovanie, všetko je pripravené. Zostáva zobrať obsah vytvorených zložiek a skopírovať ich do hostingu cez FTP, prepísať staré súbory.

Príklad. Nechajte si blog na WordPress. Všetky obrázky sú uložené v [ / wp-content / uploads / ]. Prejdite do priečinka stránok (cez ftp), prejdite na [ wp-content ] a jednoducho skopírujte [ uploads ] do priečinka OptimizeImg rovnakého mena. Spustiť 1.bat a čakať. Po dokončení práce je obsah [jpg_jpegtran] (ideme tam!) Nahraný na server. Požiadavky na existujúce súbory sú zodpovedané prepísaním. Podobný trik pre png, ale najprv sa pozrieme na to, ktorý priečinok - [png_optipng] alebo [png_pngout] - zaberá menej miesta, naplňte ho jeho obsahom.

Nebojte sa poškodiť iné súbory. Batniki pracujú len s jpg / png a do novovytvorených priečinkov sa zapisujú iba obrázky týchto typov.

Dúfam, že niekto bude užitočný. Veľa šťastia!

doplnky stravy

1. Cesta k [OptimizeImg] by nemala obsahovať výkričníky ! a percentá
2. Spustenie skriptov ako administrátora nie je potrebné. Navyše v tomto prípade nemusia pracovať!
3. ...

Autori

nie online 13 hodín

x64 (aka andi)

Komentáre: 2846 Publikácie: 395 Registrácia: 02-04-2009