Melyik képformátum inkább alkalmas a webhely

A rendeltetésszerű használat képek az interneten azt jelenti, két dolgot:

kiválasztja a megfelelő képformátum;

Ebben a cikkben megmutatom az első pont, különösen azt fogja mondani, a kép formátumok, amelyek több, mint bármely más alkalmas az interneten, valamint bármilyen képet szeretne használni ezeket a formátumokat.

A jelenlegi trendek és megközelítések webfejlesztés

Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési

De először nézzük röviden megy át terminológiát.

Raszter vagy vektor képek

Az alapot egy kétdimenziós raszter kép képpontrácsra. Minden pixel tárolt szín és átlátszóság értékét.

Bitképek nem jól skálázható: ha növelik a bitmap, akkor el fogja veszíteni a világosság és a minőség. Népszerű raszteres képformátumok az interneten - JPEG, JPG, GIF és PNG.

Az alábbiakban két bitmap kerül bemutatásra (JPG) almával. Az első kép teljes méretben. A második rész mutatja kinagyított első kép.

Példa bittérkép a fizikai mérete.

Egy kinagyított részletét a képet.

Megjegyzés a minőségromlás a kibővített változata a képet.

Ellentétben a bitmap képeket vektorgrafikus áll vonalak, formák, útvonal pont. vektorgrafikáról információt nem tárolják a pixel, ez tárolja a matematikai rajz utasításokkal, aminek semmi köze a pixel. Alex Walker nagyon világosan kifejtette a különbség az SVG példa - a legnépszerűbb formátum vektor képek az interneten:

Az egyik következménye függetlenséget képernyőfelbontás - vektor képek lehet méretezni, hogy illeszkedjen a méret a tartalmat. Képek világosak, ideális retina képernyőkön.

SVG-grafikák kis léptékben.

Része a megnövekedett SVG-kép.

Mind a képek a tetején egy példa egy olyan vektor kép, de a második kép nagyítva több mint kétszeresére, mint az első. minőségromlás nélkül.

A veszteséges vagy veszteségmentes (veszteséges és veszteségmentes)

Mit jelent ez a gyakorlatban: minél többet tömöríteni a fájlt a minőségromlás, annál kevésbé lesz. Egyre kisebb fájlt tömeg, akkor veszít a minőségéből visszafordíthatatlanul. Ha veszteséges tömörítésű egyensúlyhoz szükséges az alacsony súly és a minőség a fájlt.

Nagyon gyakori képformátum minőségének romlását, JPEG.

Ezzel szemben a képeket veszteséges tömörítés veszteségmentes boltok az összes adatot, mint az eredeti. Ez a tömörítés nem eredményez egy csepp a minősége a fájlokat. Emiatt veszteségmentes formátumok gyakran nagyobb súllyal, mint a veszteséges.

A hálózat könnyen megtalálható veszteségmentes formátumú képeket GIF és PNG.

Az információ hasznos kiválasztják a legjobb képformátum a tartalom.

Az első három kép a méret, én az alábbiakban ismertetett (JPG, GIF és PNG), akkor már megy sokáig a webhelyen. Az utolsó két formátum, SVG, és WebP, nem teljesen új, de még nem népszerű. Ennek ellenére kiválóan alkalmas a követelmények alkalmazkodóképesség és bystrozagruzhaemaya oldalak, és a népszerűsége jelentősen megnőtt.

JPEG vagy JPG - veszteséges formátum által kifejlesztett Joint Photographic Experts Group. JPG-képek elfoglalják csaknem 3% -a az összes típusú tartalom az oldalakon. Miért van ez a formátum annyira népszerű:

JPG formátumban lehet megjeleníteni millió szín, ami miatt ideális jelölt, így a fotók az interneten;

A jelenlegi trendek és megközelítések webfejlesztés

Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési

mivel veszteséges formátum, akkor tömörítés jelentősen csökkenti a fájl méretét. A JPG-fájlok a tömörítési szint: 60% lesz elég a képek az interneten, bármit 75% felett romlik a kép minősége;

minden eszköz internet támogatása JPG formátumban, így könnyen kezelhető formában az interneten.

Egy figyelemre méltó hátránya JPG - fájlokat ebben a formátumban nem támogatja az átlátszóságot. Ha azt szeretnénk, hogy egy átlátszó hátteret az overlay képet az oldal háttérszíne, vagy textúra JPG-képet nem fog illeszkedni. Válasszon egy opciót, amiről megbeszéljük később.

GIF vagy Graphics Interchange Format - Ez a 8-bites veszteségmentes formátum a színek maximális száma megegyezik a 256 szín korlátozása miatt GIF alkalmatlan a lehetőséget, ha képeket és a képeket a széles színválaszték.

Befolyásoló tényezők, mint a hosszú távú használata az interneten:

korlátai miatt a 256 színű fájl mérete is meglehetősen alacsony;

Ez kiválóan alkalmas az egyszerű képeket egyszínű, de nem alkalmas fotókat.

PNG, vagy Portable Network Graphics - van alternatívája a GIF. A formátum célja W3C. Mivel a GIF formátum tömörítési algoritmusok minőségromlás nélkül, opciók 8 bites és 24-bites. Mindkét lehetőség támogatja az átlátszóságot. Azonban a 24 bites PNG kép átláthatóság dolgozik az alfa csatorna, valamint a vörös, zöld és kék csatornában. Ezért, annak ellenére, hogy a GIF és a 8-bites PNG képeket lehet teljesen átlátszó vagy teljesen átlátszó, minden pixel PNG kínál 256 átláthatóságot.

24 bites változatát PNG lehet használni:

web képek különböző átláthatóság szintjét;

összetett grafikák és fotók;

grafika, ami gyakran szerkesztése és export: lessless formátumú minőség megőrzése.

Ellentétben GIF PNG formátum nem támogatja az animáció és a súlya a fájlokat lehet elég nagy.

SVG formátumban Előnyök

SVG gyakran kisebb súlyúak bitmap, különösen optimalizálás után az interneten és a tömörítés gzip;

Skálázható formátumban, amelyet tisztázni a képernyő felbontását;

SVG-kódot lehet elhelyezni a HTML, és mentse a HTTP-kéréseket;

SVG-kód testreszabható keresztül CSS;

SVG-kép lehet animált, beleértve az alkatrészt, hogyan kell használni a CSS és JS, ami nagyon jó.

Kerüljük a túlságosan bonyolult SVG-képek, kissé növeli a fájlméretet. És végül, az SVG nem vonatkozik a fotókat, itt jobban megfelel JPG, WebP.

WebP - formátumú képeket a nyílt forráskódú szoftverek, a Google által fejlesztett. Főbb jellemzők: «WebP - modern képformátum az interneten, így kiváló tömörítési egy veszteséges és veszteségmentes ... veszteségmentes-image változat WebP súlya 26% -kal kevesebb, mint a PNG. WebP veszteséges-változat súlya 25-34% -kal kevesebb, mint a hasonló JPEG Lossless ... WebP támogatja az átlátszóságot ... rovására 22% további bájt. Azokban az esetekben, ahol alkalmazható veszteséges RGB-tömörítés, veszteséges WebP is támogatja az átláthatóságot, amely 3 kisebb, mint a PNG fájl mérete »-. WebP helyszínen

Krastota WebP, hogy egyesíti az előnyeit a JPG és PNG növelése nélkül a fájl méretét.

Ezen a ponton formátum támogatása elég jó: Blink-böngésző támogatja a formátumot a kiadás, még WebP - létrehozását a Google. A visszamenőleges kompatibilitás böngészők támogatása nélkül, azaz IE / Edge, a Firefox és a Safari, az iparosok jöttek fel megoldásokat.

következtetés

Ebben a cikkben azt meséltem a képformátumok az interneten, és röviden körbejárta a kép típusát, a legalkalmasabb az interneten.

JPG, GIF és PNG formátumok nagyon népszerűek, amelyek már használják egy nagyon hosszú idő. SVG és WebP több új és érdekes alternatíva. SVG tökéletes illusztrációk és egyszerű képeket, WebP felváltja az összes rést alkalmazások JPG és PNG.

Felülvizsgálat: Team webformyself.

A jelenlegi trendek és megközelítések webfejlesztés

Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési

A legtöbb IT hírek és webfejlesztés A csatorna-távirat

Az a gyakorlat optimalizálni egy weboldalt: gyorsítás letöltés webhelyét időnként

Ismerje meg, hogyan lehet felgyorsítani a betöltés az oldalon.