Optimalizace obrazu pro stránku: dávkové zpracování pomocí jpegtran | optipng | pngout

1. Předpoklady
2. Používáme doporučení pro obrázky
3. Struktura archivu
4. Stručný návod k práci
5. Doplňky
6. x64 (aka andi)

Místo bez obrazů - anachronismus. Tolik lidí si myslí, že to nemá smysl. Pamatujte si, jak dlouho jste na stránkách naposledy a jak dlouho jste na ní?

Textová data jsou mnohem menší než obraz. Ale lidé vědí, že milují své oči. Proto budou obrázky nepochybnou výhodou příběhu.

Obecně řečeno, pokud jde o text, máme na mysli jak jeho obsah, tak pohodlnou vizuální prezentaci, včetně odstavců, seznamů, citací, tabulek. To však nestačí, a dokonce i zpravodajské weby se snaží poskytovat obraz novinářů.

Začněme z předpokladu, že obrázky jsou potřeba. To mohou být fotografie, diagramy, jednoduše vysvětlující obrázky.

Už dávno, když Putin nevypadal věčně, jsem udělal svůj první webový portál pro zdravotnictví. Do atlasu bylo nutné umístit obrázky. Je zřejmé, že je poměrně obtížné představit si anatomickou strukturu těla bez obrazů a tím spíše popisovat slovy. A bez dalších okolků jsem nahrál obrázky do bmp (nekomprimovaný formát). Musím říct, že vážili těsto? Některé prohlížeče navíc nevěděly, jak takové obrázky zobrazovat.

Proč tedy optimalizovat obrázky? Jednoduchým příkladem je fotografie. Moderní telefony mají fotoaparáty v 8, 12 a ještě více megapixelů. 12 MP odpovídá obrazu 4000 × 3000 pixelů. V závislosti na složitosti scény to odpovídá velikosti 2-5 megabajtů a ještě více. Deset fotek - a velikost stránky se hodně zvětší. Obraz se vejde do oblasti obsahu, což znamená, že prohlížeč musí nejprve stáhnout vše, změnit jeho velikost a zobrazit jej. Pro slabé zpracovatelů nebo s malým množstvím paměti RAM - katastrofou.

Nyní si představte, že uživatel sleduje stránky z telefonu. V tomto případě nemůže načítání stránky jednoduše čekat. Tak, obrázky musí být pre-redukované.

Někdo bude argumentovat, že v tom nemá smysl, moderní CMS automaticky vytváří miniatury při stahování obrázků. Ale mají všichni své stránky na VPS nebo VIP sazbách? Stahování jednoho 12 MP obrázku může vyjít, ale pro jeho zpracování bude PHP muset přidělit 35+ megabajtů (teoreticky, ve skutečnosti více) pro ukládání a pak ještě ví, kolik vytvořit menší kopii. Levné tarify se okamžitě ponoří do přebytku zdrojů. Dobrý hoster požádá uživatele, aby to už neudělal, špatný ho bude ignorovat, protože pro něj jsou důležité pouze peníze a ne výkon služeb.

A tak jsme se rozhodli jednat správně. Předběžně redukujeme obrázky a poté je nahrajeme na stránky. Takže motor je snadnější a lidé. Je všechno Ne tak docela.

Mnoho editorů si ponechá původní kousky (meta-informace, neobrazové části souboru) obsahující další informace. Například, pokud si vezmete obrázek z telefonu, přeneste soubor do počítače, klikněte na něj pravým tlačítkem a vyberte položku „Vlastnosti → Detaily“, zobrazí se data v zařízení: který fotoaparát jste vyfotografovali, rychlost závěrky, ISO a tak dále. Pro uživatele jsou tyto informace k ničemu, takže se jich můžete zbavit.

No, přemýšlej o tom, jeden kus. Co je tam, spoustu informací, které jsou obsaženy? Představte si to. Někdy dostanete obrázky, ve kterých jsou stovky kilobajtů takových dat. Právě dnes poslali logo o velikosti 584 KB, aby se mohli ubytovat. Zároveň byly užitečné informace pouze 14 KB! Pokud jde o mě, není zcela správné nutit návštěvníka ke stažení 570 KB shora.

Pojďme shrnout součty. Chcete-li, aby uživatelé webu dobře fungovali, musíte:

1. Zmenšete velikost obrázku. Chcete-li pomoci každému grafickému editoru.
2. Vyhození částí souboru je zbytečné. Ve skutečnosti uživatel potřebuje pouze obrázek.
3. Pokuste se dále zmenšit velikost obrázku.

První odstavec zahrnuje individuální práci na každém souboru. Je to časově náročné, ale přináší to nejlepší výsledek. Otevřeme každý soubor, vyjmeme, zmenšíme a uložíme s přijatelnou kvalitou.

Avšak odstavce 2 a 3 mohou být vydávány na milost speciálních programů. Software pro práci se sadou obrázků. Společnost Google doporučuje následující programy:

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

Trochu o str. 3. Grafické editory se s tím obvykle neobtěžují. Jednoduše uloží obrázek a zvolí před časem uložené kompresní algoritmy se stejným nastavením, kvantizačními koeficienty a dalšími věcmi. Kromě toho mnozí upřímně předávají dostupné meta-informace a přidávají své vlastní, což dále zvyšuje velikost souboru.

Předpoklady

Před rokem masivně mluvil o službě PageSpeed ​​Insights od Googlu. Ve skutečnosti se jedná o doporučení vyhledávacího giganta na téma „jak se daří dobře“. Stačí zadat adresu webu a získat seznam návrhů pro optimalizaci. Tam můžete také stáhnout již optimalizované zdroje, včetně obrázků, pro vaše stránky. Je to pravda pouze pro kontrolovanou stránku.

Pokud máte webové stránky, nezapomeňte se podívat tohoto článku . Zvláště užitečné pro ty, kteří používají WordPress.

Používáme doporučení pro obrázky

Zdá se to jednoduché: stáhněte si programy určené společností Google a spusťte přes ně všechny soubory na serveru. Problém je, že tyto nástroje jsou konzoly. Oni vezmou jen 1 soubor najednou. Ale my nejsme marně poslední článek trvalo čas na dávkové soubory, ne?

Informace z článku jsou dost velké na to, aby si vytvořili vlastní souborový ovladač en masse, takže nebudu malovat, kde to je. Navrhuji jen stáhnout připravenou sestavu, kterou používám sám.

Stáhnout archiv (212 KB)

Struktura archivu

Archiv obsahuje složku [ OptimizeImg ]. Chcete-li začít, rozbalte ho někam. Mám ho umístěn v c: teplota, ale to nevadí. Hlavní je, že cesta neobsahuje vykřičníky.

Další. Tato složka obsahuje podadresář [ uploads ]. Zde je třeba dát soubory, které vyžadují zpracování. Nejlepší je, že můžete stisknout alespoň strukturu složek / souborů.

K dispozici jsou 3 další programy: jpegtran.exe | optipng.exe | pngout.exe je velmi užitečný nástroj doporučený společností Google. Staženo z odpovídajících oficiálních stránek / repozitářů. V případě pochybností, nebo jen chcete upgrade, stáhnout z důvěryhodného zdroje a nahradit stávající.

A konečně srdce tulzy. Batnichki:

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

První soubor, 1.bat, vytvoří strukturu z [uploads]. Jsou vytvořeny 3 další složky: [jpg_jpegtran] [png_optipng] [png_pngout] se zpracovanými minimalizovanými soubory svého typu (jpg - pouze * .jpg-soubory, stejné s png).

3.bat postupně spouští tři dávkové soubory pro provedení:

• 3-go.bat je téměř stejná jako 1.bat. Přeskočte soubory jpg / png přes minimalizátory. Výsledkem práce budou 3 složky (viz výše) s odpovídajícími obrázky.
• 3-opti-to-out.bat vytvoří složku [png_optipng-to-pngout], do které jsou zapsány soubory zpracované pomocí optipng + pngout (přesně v této sekvenci).
• 3-out-to-opti.bat vytvoří složku [png_pngout-to-optipng], do které jsou zapisovány soubory zpracované programem pngout + optipng. Podobně jako předchozí, pouze v jiném pořadí.

V zásadě stačí jen 1.bat pro naše potřeby. 3x tašky se objevily jako výsledek výzkumu a chyby v předchozí verzi dávkového souboru. Stalo se tak, že během chyby byly soubory pro pngout převzaty z adresáře optipng. A jaké bylo mé překvapení, když spuštění staré verze dalo 1,5 krát menší velikost než v aktualizovaném dávkovém souboru. V důsledku toho se ukázalo, že dvojité zpracování může „dobýt“ obrázky. Trvá to však téměř dvakrát více času. Rozhodněte se, zda je to nutné.

Stručný návod k práci

1. Stáhnout archiv .
2. Rozbalte ho.
3. Přejděte do nově otevřené složky [OptimizeImg].
4. Všechny soubory, které vyžadují bodnutí, zkopírujte složku [upload].
5. Spusťte 1.bat a počkejte. Pokud existuje mnoho souborů a jsou png, počkejte dlouho.
6. Když se v černém okně objeví zpráva o nutnosti stisknutí klávesy pro pokračování, vše je připraveno. Zbývá odebrat obsah vytvořených složek a zkopírovat do hostingu přes FTP, přepsat staré soubory.

Příklad. Nechte si blog na WordPress. Všechny obrázky jsou uloženy v [ / wp-content / uploads / ]. Přejděte do složky webu (přes ftp), přejděte na [ wp-content ] a jednoduše zkopírujte [ upload ] do složky OptimizeImg stejného jména. Spusťte 1.bat a počkejte. Po dokončení práce je obsah [jpg_jpegtran] (jdeme tam!) Nahrán na server. Požadavky na existující soubory jsou zodpovězeny přepsáním. Podobný trik pro png, ale nejdřív se podíváme na složku - [png_optipng] nebo [png_pngout] - zabírá méně místa, zaplňuje ji svým obsahem.

Nebojte se poškodit další soubory. Batniki pracují pouze s jpg / png a do nově vytvořených složek se zapisují pouze obrazy těchto typů.

Doufám, že někdo bude užitečný. Úspěchy!

Doplňky

1. Cesta k [OptimizeImg] by neměla obsahovat vykřičníky ! a procenta
2. Spuštění skriptů jako správce není nutné. Navíc v tomto případě nemusí fungovat!
3. ...

Vydavatel

ne online 13 hodin

x64 (aka andi)

Komentáře: 2846 Publikace: 395 Registrace: 02-04-2009