Kép optimalizálás a webhelyhez: kötegelt feldolgozás a jpegtran használatával optipng | pngout

1. előfeltételek
2. A képekhez ajánlásokat használunk
3. Archív struktúra
4. Rövid útmutató a munkához
5. A kiegészítők
6. x64 (más néven andi)

Képek nélküli képek - anakronizmus. Olyan sokan gondolják, és ez nem mentes a józan észről. Ne feledje, hogy mennyi ideig voltál az utolsó helyen, és mennyi ideig voltál rajta?

A szöveges adatok sokkal kisebbek, mint a kép. De az emberek tudják, hogy szeretik a szemüket. Ezért a képek kétségtelen előnye lesz a történetnek.

Általánosságban elmondható, hogy a szövegről beszélünk mind tartalmát, mind egy kényelmes vizuális bemutatót, beleértve a bekezdéseket, listákat, idézeteket, táblázatokat. Ez azonban nem elég, és még a híroldalak is próbálnak képeket készíteni az újságírókról.

Kezdjük azzal a feltevéssel, hogy a képekre szükség van. Ezek lehetnek fényképek, diagramok, egyszerűen a képek magyarázata.

Már régen, amikor Putyin nem tűnt örökkévalóvá, először készítettem az első orvosi internetes portált. A képeket az atlaszra kellett helyezni. Nyilvánvaló, hogy meglehetősen nehéz elképzelni a test anatómiai szerkezetét kép nélkül, és annál is inkább, hogy szavakkal írják le. A további képek nélkül feltöltöttem a képeket bmp-re (tömörítetlen formátum). Meg kell mondanom, hogy megmérték a tésztát? Sőt, egyes böngészők nem tudták, hogyan kell megjeleníteni az ilyen képeket.

Miért optimalizálja a képeket? Egy egyszerű példa egy fénykép. A modern telefonok 8, 12 és még több megapixeles kamerával rendelkeznek. 12 MP megfelel 4000 × 3000 képpontos képnek. A jelenet összetettségétől függően ez 2-5 megabájt méretű és még ennél is nagyobb. Egy tucat fotó - és az oldalméret sokat feldob. A kép illeszkedik a tartalmi területhez, ami azt jelenti, hogy a böngészőnek először le kell töltenie mindent, méreteznie és csak akkor kell megjelenítenie. A gyenge processzorok vagy kis mennyiségű RAM - katasztrófa.

Most képzelje el, hogy a felhasználó a telefont figyelte. Ebben az esetben az oldal betöltése egyszerűen nem várhat. Tehát a képeket előzetesen csökkenteni kell.

Valaki azt állítja, hogy nincs értelme ennek, a modern CMS automatikusan letölti a bélyegképeket a képek letöltésekor. De mindenkinek van-e a webhelye VPS-en vagy VIP-árakon? Egy 12 MP-es kép letöltése előfordulhat, de a feldolgozáshoz a PHP-nek 35 + megabájt (elméletileg többet) kell tárolnia a tároláshoz, és még mindig tudja, hogy mennyi legyen egy kisebb példány létrehozása. Az olcsó tarifák azonnal belépnek az erőforrások feleslegébe. Egy jó hoster arra kéri a felhasználót, hogy ne tegye ezt többé, egy rosszat figyelmen kívül hagyja, mert csak pénz van neki, és nem a szolgáltatások teljesítése.

És úgy döntöttünk, hogy helyesen járunk el. Előzetesen csökkentjük a képeket, majd feltöltjük azokat a webhelyre. Így a motor könnyebb, és az emberek. Mindent Nem igazán.

Sok szerkesztő megőrzi az eredeti darabokat (meta-információ, nem képalkotó részek), amelyek további információkat tartalmaznak. Ha például képet készít a telefonról, helyezze át a fájlt a számítógépre, kattintson rá a jobb gombbal, és válassza ki a „Tulajdonságok → Részletek” pontot, majd látni fogja az eszköz adatait: melyik fényképezőgéppel fényképezett, zársebesség, ISO és így tovább. A felhasználó számára ez az információ haszontalan, így megszabadulhat róla.

Nos, gondolj rá, egy darab. Mi van, egy csomó információt tartalmaz? Képzelni. Néha olyan képeket kap, amelyekben több száz kilobájtnyi ilyen adat van. A mai napig 584 KB méretű logót küldtek el, hogy elférjenek. Ugyanakkor hasznos információ csak 14 KB volt! Ami engem illeti, nem teljesen helyénvaló, hogy a látogatót 570 KB-os letöltésről kényszerítsük felülről.

Összefoglaljuk a részösszegeket. Annak érdekében, hogy a webhely felhasználói jól működjenek, meg kell:

1. Csökkentse a kép méretét. Bármely grafikus szerkesztő segítése.
2. A fájlrészek kidobása nem szükséges. Valójában a felhasználónak csak egy képre van szüksége.
3. Próbálja meg tovább csökkenteni a kép méretét.

Az első bekezdés magában foglalja az egyes fájlok egyedi munkáját. Időigényes, de a legjobb eredményt hozza. Megnyitjuk az egyes fájlokat, vágjuk, csökkentjük, majd elfogadható minőségben mentjük.

A (2) és a (3) bekezdés azonban különleges programok iránti kegyelemre adható. Szoftver a beállított képekhez. A Google a következő programokat ajánlja:

• jpegtran a jpg képformátumhoz.
• optipng és pngout PNG képekhez.

Egy kicsit a 3. oldalon. A grafikus szerkesztők általában nem törődnek vele. Egyszerűen elmentik a képet, az idő előtt előre beállítva a kompressziós algoritmusokat ugyanazokkal a beállításokkal, kvantálási együtthatókkal és egyéb dolgokkal. Emellett sokan őszintén átadják a rendelkezésre álló metaadatokat, és hozzáadják a saját, tovább növelve a fájlméretet.

előfeltételek

Egy évvel ezelőtt masszívan kezdtek beszélni a szolgáltatásról. PageSpeed ​​Insights google-tól. Valójában ezek a keresési óriás ajánlásai a „hogyan kell jól csinálni”. Csak írja be a webhely címét, és kap egy listát az optimalizálásra vonatkozó javaslatokról. Itt letöltheti a webhelyére már optimalizált erőforrásokat, beleértve a képeket is. Igaz, ez csak az ellenőrzött oldalra vonatkozik.

Ha van honlapod, nézd meg ezt a cikket . Különösen hasznos a WordPress-et használók számára.

A képekhez ajánlásokat használunk

Egyszerűnek tűnik: töltse le a Google által meghatározott programokat, és futtassa a szerveren lévő összes fájlt. A probléma az, hogy ezek a segédprogramok konzol. Egyszerre csak 1 fájlt vesznek igénybe. De nem hiába vagyunk utolsó cikk időt vitt a kötegelt fájlokhoz, ugye?

A cikkből származó információ elég ahhoz, hogy saját fájlkezelőt készítsen tömegesen, így nem fogom festeni, hol van. Csak azt javaslom, hogy töltsem le a kész összeszerelést, amit magam használok.

Letöltés archívum (212 KB)

Archív struktúra

Az archívum egy [ OptimizeImg ] mappát tartalmaz. Az indításhoz csomagolja ki valahol. C: c: ben van, de nem számít. A fő dolog az, hogy az útvonal nem tartalmaz felkiáltójeleket.

Következő. Ez a mappa tartalmazza a [ feltöltések ] alkönyvtárat. Itt meg kell adnia a feldolgozást igénylő fájlokat. A legjobb rész az, hogy legalább a mappa / fájlszerkezetet lehet nyomni.

3 további program létezik: jpegtran.exe optipng.exe | A pngout.exe a Google által ajánlott segédprogram. Letöltve a megfelelő hivatalos oldalakról / adattárakból. Ha kétségei vannak, vagy csak frissíteni szeretné, letölthet egy megbízható forrásból és kicserélheti a meglévőket.

És végül a tulza szíve. Batnichki:

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

Az első fájl (1.bat) újból létrehozza a struktúrát a [feltöltés] -ből. 3 további mappát hoznak létre: [jpg_jpegtran] [png_optipng] [png_pngout] a feldolgozott, minimális fájlokkal (jpg - csak * .jpg-fájlok, ugyanaz, mint a png).

3.bat sorrendben három kötegfájlt indít végrehajtásra:

• A 3-go.bat szinte ugyanaz, mint az 1.bat. A jpg / png fájlok átugrása a minimizátorok segítségével. A munka eredménye 3 mappa lesz (lásd fent) a megfelelő képekkel.
• A 3-opti-to-out.bat létrehozza a [png_optipng-to-pngout] mappát, amelybe a + pngout optipng + feldolgozott fájlokat írjuk (pontosan ebben a sorrendben).
• A 3-out-to-opti.bat létrehoz egy [png_pngout-to-optipng] mappát, amelybe a pngout + optipng által feldolgozott fájlokat írjuk. Az előzőhez hasonlóan, csak egy másik sorrendben.

Elvben csak 1.bat elég a mi igényeinkhez. A 3x-os zsákok a kötegfájl korábbi verziójában végzett kutatás és hibák eredményeként jelentek meg. Így történt, hogy a hiba során a pngout fájlokat az optipng könyvtárból vettük. És mi volt a meglepetésem, amikor a régi verzió elindítása 1,5-szer kisebb méretet adott, mint a frissített kötegfájlban. Ennek eredményeként kiderült, hogy a kettős feldolgozás „felzárkózhat” a képekhez. De közel 2-szer több időt vesz igénybe. Tehát döntsd el magad, ha szükséges.

Rövid útmutató a munkához

1. Letöltés archívum .
2. Csomagolja ki.
3. Lépjen az újonnan megnyitott [OptimizeImg] mappába.
4. Minden csípést igénylő fájl másolja a mappát [feltöltés].
5. Futtassa az 1.bat parancsot, és várjon. Ha sok fájl van és png, várjon sokáig.
6. Amikor egy üzenet jelenik meg a fekete ablakban arról, hogy szükség van egy gomb megnyomására a folytatáshoz, minden készen áll. A létrehozott mappák tartalmát továbbra is az FTP-n keresztül másolja a tárhelyre, felülírja a régi fájlokat.

Például. Legyen egy blogja a WordPress-en. Minden kép a [ / wp-content / uploads / ] fájlban található. Lépjen a webhely mappájába (az ftp-n keresztül), menjen a [ wp-content ] oldalra, és egyszerűen másolja a [ feltöltéseket ] az azonos nevű OptimizeImg mappába. Futtassa az 1.bat parancsot, és várjon. A munka befejezése után a tartalom [jpg_jpegtran] (oda megyünk!) Feltöltődik a szerverre. A meglévő fájlok iránti kérelmeket felülírják. Hasonló trükk a png számára, de először megnézzük, hogy melyik mappa - [png_optipng] vagy [png_pngout] - kevesebb helyet foglal el, töltse ki a tartalommal.

Ne félj más fájlokat károsítani. A Batniki csak a jpg / png használatával működik, és csak az ilyen típusú képeket írja az újonnan létrehozott mappákba.

Remélem, valaki hasznos lesz. Sok szerencsét!

A kiegészítők

1. Az [OptimizeImg] elérési útja nem tartalmazhat felkiáltójeleket ! és százalék %
2. A parancsfájlok futtatása rendszergazdaként nem szükséges. Továbbá ebben az esetben nem működnek!
3. ...

Szerzők

nem online 13 óra

x64 (más néven andi)

Megjegyzések: 2846 Kiadványok: 395 Regisztráció: 2009-04-02