JPEG-optimalizálás a Web - Ultimate Guide-hoz

A képtömörítés minden natív médiaformátumban található. A GIF, a PNG és a JPEG közötti különbség azonban hogyan az információ tömörítve van, és megjelenik a képernyőn. Olyan sok tipp van az interneten közzétett nagyszerű képmédiák elkészítéséhez, és mégis sok tervező még mindig nem érti az alapjait..

Ebben az útmutatóban szeretnék néhány ötletet megosztani a megfelelő JPEG tömörítéshez. Optimalizálni szeretné a képeket, hogy csökkentsék a weboldal betöltési idejét, miközben tisztességes színvonalat biztosítanak. A fájlméretek és a képernyőképek közötti egyensúly megtalálása. Nincs tökéletes megoldás a tervezők számára. Néhány kezdeti gyakorlatra van szükség, de ha egyszer megérti a JPEG tömörítést, a jövőben sokkal könnyebb lesz a weboldalak fejlesztése.

Kerülje a 100% -os mentést mindig

A JPEG képeket szinte soha nem mentheti 100% -os minőségben. Ez lesz nem termelnek a lehető legjobban “optimalizált” kép. Valójában egy optimalizálási határérték-képlet segítségével számítja ki a fájlméreteket. Még a 90% -os vagy 95% -os minőséghez képest jelentősen csökken a fájlméret.

A legtöbb alkalommal ajánlott a 90% -nál jóval alacsonyabb képek mentése. Ha megnyitja a Mentés a webre párbeszédpanelt a Photoshopban, észre fogja venni, hogy előre beállított értékeket kínálnak. Hozzáadtam az alábbi lehetséges JPEG-értékeket - észrevehetem az elnevezést.

• Alacsony - 10%
• Közepes - 30%
• Magas - 60%
• Nagyon magas - 80%
• Maximális - 100%

Még az Adobe Photoshopban is 60% -os képminőséget tartanak magasnak. Számos webfejlesztő 50–70% közötti biztonságot garantál, ami biztonságos tartomány.

Milyen alacsony a túl alacsony?

Az optimalizáláshoz választott értékek teljesen függenek a projekttől. Figyelembe kell vennie, hogy milyen típusú grafikák fogják megjeleníteni a legmagasabb fájlméreteket - ezek azok, amelyek igazán tömörítést igényelnek.

Azt állítanám, hogy 30% alatti tényleg az alapvető képminőséget vágja le. Más tervezők 50% -ban esküsznek “határ” az optimális érték csökkentésére. De a legjobb tanács az, hogy egyszerűen próbálja ki a különböző beállításokat, és nézze meg, mi a legjobb! A webes JPEG-képeket optimalizáló néhány tesztvizsgálattal nem lehet baj.

Kompressziós beállítások

Először tisztázzuk a „tömörítés” és a „minőség” két kifejezést, amelyek egymással fordítottak. Ez azt jelenti, hogy ha 40% -os tömörítéssel JPEG-mentést készít, 60% -os minőséget kap (összehasonlítva a maximum 100% -os tömörítés nélküli minőséggel)..

Ezek a legalapvetőbb lehetőségek a használathoz - és elegendőnek kell lenniük az interneten történő mentéshez. Az általános felhasználók nem jutnak sokkal mélyebb testreszabáshoz. Az almintavétel bonyolultabb kérdésekbe kerül, ahol az RGB képeket YCbCr-re (Luminance, Chroma Blue, Chroma Red) konvertálja.

(Képforrás: Kara Monroe)

A fényesség vagy a fényerő beállítását mindig a lehető legmagasabb értéken tartja a JPEG tömörítésnél. Ezzel a fényerővel külön csatornánál könnyebb optimalizálni a vörös és a kék színét. Ez is ismert chroma-almintavétel. Azok a tervezők, akik érdeklődnek a piszkos kezükért, szeretni fognak egy kicsit többet olvasni a tömörítési algoritmusról. Nézze meg ezt a nagyszerű blogbejegyzést a chroma mintavételezésről, amely kifejezetten a JPEG képekre koncentrál.

(Képforrás: Derek Hatfield)

Érdekes oldaljegyként az Adobe Photoshop nem mindig használja a tömörítéshez szükséges almintavételt. A képeken keresztül mentett képek “Mentés webre” A párbeszédablakban csak a 40% -os minőségi érték alatti mintavételezés történik.

Különböző webes média

A web is tele van különféle képmédiákkal. Fényképek, ikonok, gombok, jelvények és egyéb grafikák is rendelkezésre állhatnak. De figyelemre méltó, hogy egy gomb és egy fénykép közötti minőség összehasonlítása nem értelme.

Fényképek vagy részletes képek használatakor vegye figyelembe a különálló, kisebb tömörítésű JPEG fájlokat. Ezután beállíthatja a webhelyen található miniatűröket, amelyeknek nagyobb tömörítési aránya és sokkal kisebb fájlméretei vannak. Az egyetlen hátránya, hogy két képkészletet kell adnia egy médiagaléria számára. Figyelje meg a webhelyen varrott sok különböző grafikát, és vegye figyelembe az egyes megoldások optimalizálását.

Grafikus modell tervezése

Szeretne egy szervezett fájlrendszert, amely elég könnyű ahhoz, hogy áthaladjon. Egyes webmesterek úgy döntenek, hogy a fényképeket máshol is elhelyezik az interneten - mint például a Flickr vagy a Picasa. Mégis szeretné használni a tömörítési eszközt a képméretek csökkentéséhez, de a webhelyén megjelenített módok változóak lesznek. Ez különösen igaz az internethez való hozzáféréssel rendelkező mobileszközök népszerű emelkedésére.

Érdekes cikket találtam a JavaScript JPEG kódolásról, amely a frontend kódodban történne. A jó minőségű képgalériáknak nem sok előnye van, de a mobil látogatói töltési idejét borotválhatja. Hasznos technika lenne a képek forró összekapcsolása vagy a bélyegképek újrafeldolgozása is.

Egy másik fantasztikus eszköz a Yahoo! Smush.it. Ez egy böngésző alapú webes alkalmazás, ahol feltölthet egy képet, és a Smush.it eltávolítja az összes felesleges bájtot a fájlméret optimalizálásához. Ez 100% -os veszteségmentes, ami azt jelenti, hogy a képminőség egyáltalán nem romlik. És még jobb, ha a közvetlen URL-címekről képeket tölthet fel, ha a webhelyén vagy a harmadik fél szerverén található.

További eszközök

Rengeteg szoftver van a képkezeléshez. Minden további bájt, amellyel le tudod borotválni az egyes fájlok méretét, elengedhetetlen. Nincs sok szoftver, de a rendelkezésre álló lehetőségek csodálatosak.

IrfanView

Ez a szabad Windows-szoftver lehetővé teszi a nagy képek bármelyikének megtekintését és optimalizálását. Különösen szeretem ezt a szoftvert, mert támogatja a több könyvtárban lévő képekből történő kötegelt konverziót. Ugyanazokat a funkciókat is használhatja több száz JPEG képre automatikusan.

Ami még jobb, a harmadik fél fejlesztői által nyújtott plugin támogatás. Ilyen például a RIOT (Radical Image Optimization Tool). Ez a bővítmény más hasonló nyílt forráskódú grafikus szerkesztők, például a GIMP számára is működik. Kétképes nézetet kínál, ahol manuálisan beállíthatja a tömörítési paramétereket az egyes képekhez.

A szoftver támogatása csodálatos, és a RIOT funkciók nagyon könnyen használhatók. A képtömörítés mellett hozzáférhet a további metaadatok, például az EXIF ​​és az Adobe XMP eltávolításához is. Ezek az extra adatcsomagok csak a teljes fájlmérethez adhatók hozzá, és ritkán szükségesek.

ImageOptim for Mac

Ha OS X rendszert futtat, és erőteljes tömörítési alkalmazásra van szüksége, akkor ne nézzen tovább. Az ImageOptim egy hatékony eszköz a webes képek tömörítésére - néha még jobb, mint a Photoshop.

Az egész alkalmazás támogatja a drag-and-drop funkciót, így könnyű a nagy képkészletek optimalizálása. Hasonlóan futtathat parancsokat a terminál és a shell shell parancsfájlokból is. További információkért és technikai támogatásért nézze meg a Google kódlapját.

Néhány kisebb probléma merült fel a legújabb 1.3.3-as stabil kiadással a pixelált JPEG képek rendezésében az Opera-ban. Próbálja meg ellenőrizni az összes optimalizált képet a 4 fő böngészőben - Chrome, Safari, Firefox és Opera (és talán IE). Ha valami úgy néz ki, mintha ferde lenne, próbáld meg letölteni az ImageOptim 1.3.0-t, amely egy kicsit tisztábbá alakítja.

Hasznos források

• JPEG 101: Crash Course Guide a JPEG-en
• Jobb tömörítési beállítások a JPG képek mentéséhez a WordPress számára
• Okos JPEG optimalizálási technikák
• Hogyan lehet optimalizálni a weboldalak JPEG képeit
• Minden, amit tudni kell a képtömörítésről

Következtetés

A JPEG tömörítés trükkös, mivel meg kell találni a megfelelő egyensúlyt a minőség és az anyag között. Még ha a modern internetkapcsolat sebessége is növekszik, még mindig szükség van a weboldalak méretének csökkentésére. Az olyan új keretek, mint a jQuery és a Typekit több száz további kilobájtra képesek, még a jól optimalizált tervezésnél is.

Még mindig ajánlom az Adobe Photoshop-ot, mint a premier képszerkesztő szoftvert. A JPEG-optimalizálási folyamathoz más példák is vannak. A webes tervezők azonban még kevésbé ismert nyílt forráskódú megoldásokkal is elérhetők. Ha hasonló trükkökkel vagy ötletekkel rendelkezik a JPEG tömörítéssel kapcsolatban, kérjük, ossza meg velünk az alábbi hozzászólási területet.