Što je najkvalitetniji format slike. Koji format odabrati za slike - JPEG, PNG ili GIF

Od autora: Za ožujak 2017. godine slike su preko 65% web sadržaja. I to ne iznenađuje: slike daju ljepotu, prolaze poruke, ispričaju priče i uspostavite kontakt s posjetiteljima na vašoj web-lokaciji. stražnja strana Pitanje - Ako se slika nepravilno koristi, to je često glavni razlog usporavanja mjesta i lošeg korisničkog iskustva.

Pravilno korištenje slika na internetu podrazumijeva dvije stvari:

odaberite ispravan format slike;

optimizacija slike.

U ovom članku, posebno ću otkriti prvu stavku, posebno ću vam reći o formatu slika koje su prikladnije za web, kao i za koje slike trebate koristiti ove formate.

Ali prije nego što smo ukratko vodite na terminologiju.

Raster ili vektorske slike

Na temelju raster slike Postoji dvodimenzionalna pikselna mreža. Svaki piksel pohranjuje boju i vrijednost transparentnosti.

Raster slike su slabo skaliranje: ako povećate rastersku sliku, gubi jasnoću i kvalitetu. Popularan rasterske formate Slike za web - JPEG, JPG, GIF i PNG.

U nastavku su dvije rasterske slike (JPG) s jabukom. Prva slika je originalna. Drugi prikazuje povećani dio prve slike.

Primjer bitmap slike u naravi.

Povećan dio bitmapa.

Obratite pozornost na gubitak kvalitete u proširenoj verziji slike.

Za razliku od rasterskih slika grafika vektora Sastoji se od linija, brojki, točaka rute. Informacije o vektorskim slikama se ne pohranjuju u pikselima, pohranjuje se u matematičke upute za crtanje, koje nisu povezane s pikselima. Alex Walker je vrlo jasno objasnio razliku u primjeru SVG - najpopularniji format vektorskih slika na mreži:

"SVG nije format slike, to je veći slikovni recept." - Zašto su JPEG slike poput pite od tvrtke Apple iz McDonaldsa (bez SVG)

Jedna od posljedica neovisnosti od razlučivosti zaslona - Vektorske slike mogu se povećati pod veličinom sadržaja. Slike će biti jasne, idealne za mrežni zaslone.

Svg grafike u malom opsegu.

Dio povećane SVG slike.

Obje slike odozgo su primjer jedne vektora slike, međutim, druga slika se povećava više nego dvostruko više u odnosu na prvo. Nema gubitka kvalitete.

S gubitkom kvalitete ili bez gubitka (gubitak i bez gubitaka)

I pojam gubitka i bez gubitaka odnose se na tehnike kompresije medijskih datoteka, tj. Slike, audio i video.

Gubitak kompresija: "ne vraća digitalne podatke do 100% izvornog. Metode s kvalitetnim gubitkom karakteriziraju visok stupanj kompresije, što smanjuje težinu komprimirane datoteke, Međutim, neki od izvornih piksela, zvučni valovi i video okviri su zauvijek uklonjeni. " - PCMag.com Enciklopedija

Što to znači u praksi: jači ste stisnuti datoteku s gubitkom kvalitete, to će biti manje. Dobivanje manjih težina datoteke, nepovratno gube kvalitetu. Uz kompresiju gubitka, morate uravnotežiti između male težine datoteke i kvalitete.

Vrlo često se nalazimo format slike s gubitkom kvalitete, to je JPEG.

Za razliku od slika s gubitkom kvalitete bez gubitaka, sprema sve podatke kao u izvorniku. Takva kompresija ne dovodi do pada kvalitete datoteka. Zbog toga, formati datoteka bez gubitaka često imaju veću težinu u usporedbi s gubitkom.

U mreži možete lako pronaći formate slika bez gubitaka, to je GIF i PNG.

Navedene informacije su korisne pri odabiru bolji format Slike za vaš sadržaj.

Prva tri formata slika ću opisati u nastavku (JPG, GIF i PNG), već dugo su se koristili na mjestima. Posljednja dva formata, SVG i WebP, ne sasvim novim, oni još nisu popularni. Ipak, oni ne mogu biti prikladniji za zahtjeve prilagodljivosti i brzo napunjenih mjesta, a njihova se popularnost značajno povećala.

JPEG.

JPEG ili JPG - format gubitka dizajniran zajedničkim fotografskim stručnjacima. JPG slike zauzimaju gotovo 3% svih vrsta sadržaja na web-lokacijama. Zašto je ovaj format toliko popularan:

jPG format može prikazati milijune boja, što ga čini idealnim kandidatom za prikaz fotografija na internetu;

Suvremeni trendovi i pristupi u web razvoju

Saznajte brzi profesionalni algoritam rasta od nule u zgradi stranice

budući da je to format gubitka, onda možete koristiti kompresiju kako biste značajno smanjili veličinu datoteke. U JPG datotekama postoji mnogo razina kompresije: približno 60% će biti dovoljno za slike na internetu, nešto više od 75% narušava kvalitetu slike;

svi internetske uređaje podržavaju JPG format, koji pojednostavljuje korištenje formata na internetu.

Jedan primjetan nedostatak JPG - datoteka ovog formata ne podržava transparentnost. Ako želite koristiti transparentnu pozadinu za prekrivanje slike na boji pozadine ili teksture stranice, JPG slike se ne uklapaju. Odaberite jednu od opcija koje ću reći u nastavku.

Gif.

GIF ili grafički razmjerno format je 8-bitni format bez gubitaka s maksimalnom količinom boja jednaka 256. Ograničenja boja čine GIF neprikladnu opciju za prikazivanje fotografija i slika sa širokim rasponom boja.

Čimbenici koji su utjecali na tako dugoročnu uporabu na internetu:

zbog granice u 256 boja, veličina datoteke je prilično niska;

podržava transparentnost;

podržava animaciju, koja vam omogućuje da koristite format za prikaz prljavih slika, kao što su ikone, emoticons, banneri, itd.;

dobro pogodan za jednostavne slike S monofonskim bojama, ali ne i pogodno za fotografije.

Png.

PNG ili prijenosna grafika mreže je alternativa GIF-u. Format razvija W3C. Kao i gif, format koristi kompresijski algoritam bez gubitka kvalitete, 8-bitne i 24-bitne opcije su dostupne. Obje opcije podržavaju transparentnost. Međutim, u 24-bitnoj PNG slici, transparentnost radi na alfa kanalu, kao i crvenim, zelenim i plavim kanalima. Stoga, unatoč činjenici da GIF i 8-bitne PNG slike mogu biti ili potpuno neprozirne ili potpuno transparentne, u PNG-u svaka slika piksela nudi 256 razina transparentnosti.

24-bitna opcija PNG može se koristiti za:

weig slike s različite razine transparentnost;

složene fotografije i grafiku;

grafovi koji želite uređivati \u200b\u200bčesto uređivanje i izvoz: Blagoslovan format će zadržati kvalitetu.

Za razliku od GIF format PNG ne podržava animaciju, a težina datoteka može biti prilično velika.

Svg.

SVG ili skalabilna grafika vektora (skalabilna vektorska grafika) je tip vektorske datoteke na temelju XML-a. Format se pojavio 2001. godine, ali je nedavno primio popularnost među web programerima. Razlog za takve kasne ljubavi je loša podrška za SVG u preglednicima tijekom godina. Htio sam vas obavijestiti s radošću da u vrijeme pisanja članka SVG je podržan u svim glavnim preglednicima, ali ne i bez razlike i bugove.

SVG ima mnogo funkcija koje ovaj format preporučuju za web, osobito ako se SVG koristi za jednostavne slike kao što su logotipi, kartice, ikone itd.

Pluses SVG formata

SVG često teži manje rasterske slike, osobito nakon optimizacije weba i kompresije kroz GZIP;

format je skalabilan, koji osigurava jasnoću na bilo kojem razlučivosti zaslona;

SVG kod se može postaviti u HTML i spremiti na HTTP upiti;

SVG kod se može konfigurirati putem CSS-a;

SVG slike mogu biti animirane, uključujući i pojedinačne dijelove koristeći CSS.I Js, koji je vrlo cool.

Izbjegavajte previše složene SVG slike, to neznatno povećava veličinu datoteke. Konačno, SVG nije primjenjiv na fotografije, JPG i WebP formate bit će bolje spremni ovdje.

Weba

Unatoč činjenici da se format pojavio u 2010, neću biti pogrešan ako kažem da je webp još uvijek vrlo novi formatkoji nije tako slavan kao JPG i PNG. Ipak, web ima ovaj format u krvi: posebno je dizajniran za internet, što ga čini izuzetno zanimljivim.

WebP - format slike s otvorenim izvorni kodrazvijen od Googlea. Glavne značajke: "WebP - moderan format Predmeti na internetu, pružaju izvrsnu kompresiju s gubicima, a bez gubitka kvalitete ... Gubitak inačice WebP slika teži 26% manje PNG. Gubitak verzija Webp teži 25-34% manje usporedivih JPEG slike... bezazleni webp podržava transparentnost ... zbog 22% dodatnih bajtova. U slučajevima kada je kompresija gubitka RGB primjenjiva, bezuspješna webp također podržava transparentnost, pružajući 3x veličinu datoteke u usporedbi s PNG-om. " - WebP web-lokacija

Web-lovac je da kombinira prednosti JPG i PNG bez povećanja veličine datoteke.

Na ovaj trenutak Podrška format je prilično dobra: Blink preglednici podržali format iz same oslobađanja, sve iste web-sobe - stvaranje Googlea, Za unatrag kompatibilnost s preglednicima bez podrške, tj. IE / EDGE, Firefox i Safari, folklorni obrtnici došli su do zaobilaza.

Zaključak

U ovom članku, rekao sam vam o formatima slika za web, a također je ukratko prošao kroz vrste slika najprikladnijih za internet.

JPG, GIF i PNG vrlo su popularni formati koji su se koristili za jako dugo. SVG i WebP najnovije, zanimljive alternative. SVG Sjajno za ilustracije i jednostavne slike, webp zamjenjuje sve JPG i PNG aplikacije.

Jeste li već koristili SVG i WebP u razvoju? Koje poteškoće imate? Jeste li postigli vidljive dobitke za izvedbu? Pišite u komentarima!

Oprez, mnoge slike! Sve kliknuti.

Png.

Raster grafički format PNG, dobivanje sve veće popularnost u epohi od Web 2.0, pojavio se još 1995. godine kao zamjena starog dobrog gif (i, dijelom, TIFF). Do tog vremena vlasnici patentiranog gif "odlučili su srušiti četveroznamenkaste količine od svih programera koji koriste format i slobodnu zajednicu nema ništa osim da ponudi besplatnu alternativu.

Dakle, koje su prednosti formata?

Potpuna podrška za alfa-transparentnost - transparentnost. Omogućuje vam da napravite dijelove transparentnim i prozirom.
Visokokvalitetni algoritam kompresije bez gubitka kvalitete. LZW, ali malo učinkovitije.
Mogućnost firmvera i za razliku od gif) i okomito i horizontalno istovremeno.
Ugrađena gama korekcija. Omogućuje vam priključivanje slike konfiguracije njegovog prikaza, kako bi se različiti monitori pojavili na isti način kao i autor.

Postoje 2 verzije formata: PNG-8 (slično GIF - koristi indeks boje) i PNG-24 (bliže JPEG - paleti u boji).

Budući da PNG-24 koristi kompletnu paletu boja, usporedite ga s GIF-om vrlo je teško. PNG-8 sa svojim indeksnim paletom ovdje je sličnije. Ja ću dati snimke zaslona za usporedbu:

Praksa (kao što je mišljenje kolega) pokazuje da jednostavne male GIF slike bolje komprimiraju. Ali kada je riječ o velikim slikama, gif i dalje ostaje iza sebe.

Osim toga, još jedna vrlo velika prednost: u stvari, suprotno popularnom uvjerenju, PNG-8 također može koristiti punopravni alfa kanalkao PNG-24. Samo Photoshop ga ne podržava, tako da Sergey Chikuenok iz Lebedevskog studija preporučuje korištenje Adobe Vatromet nego što sam odlučio učiniti (malo o tome).

I u ovoj bitci, ako ne trebamo transparentnost, PNG gubi, tako da govorimo, na "srednjem segmentu tržišta". Iako se, ako se držite JPEG-a "na ICC profilu, razlika u volumenu postaje nevidljiva. Moja mjerenja su dovedena u - JPEG 100%. I s manje kvalitete (bez osobito vidljivo za očne razlike), nažalost, postaje postaje još više tužno.

Općenito, vidimo se:

UGRAD. Općenito, rezultati značajno ovise o samoj slici: PNG je bolji Stijeve gradijente i monotone dijelove, ali za fotografije, najbolja kompresija daje JPEG. Iako, kažu (teško je vjerovati), na velikim fotografijama PNG-a, a zatim vodi - upravo je potvrđena u procesu pretvorbe screenshotova u članak (PNG protiv JPEG-70% - pobjedničkih vremena u jednoj i pol ).

Život nakon Photoshopa "ili stiskanje

U mnogim situacijama, PNG ostaje neophodan, jer transparentnost nije normalno podržana bilo kojim od alternativnih web formata, a koji se prostor otvara dizajnerima i kamerenima ... UGRAD. Osim toga, uzimajući u obzir specifičnosti formata, za elemente dizajna na webu - to je vjerojatno najbolje rješenje.

Google i Swing -. Program je oko 1,5 MB s minimalnim brojem postavki omogućuje vam da vozite (uključujući paket) PNG datoteke s kompresijom.

Na paketu ikona (90 datoteka s transparentnom pozadinom bez posebnih mijeha), dobitak u volumenu bio je u prosjeku oko 10-15%. Ne osobito, naravno, impresivno. No, za gore navedene datoteke, postotak kompresije u rasponu od 10% (veliki poster bez transparentnosti) na 72% (prozirni pravokutnika). Dakle, pokušavajući pokušati, više radova s \u200b\u200buslužnim programom ne zauzima puno vremena.

Osim PNGOUTA, postoji mnogo više programa detaljno promatranje Koji sada ne želite učiniti:

Optipng - nema grafičke ljuske i radi naredba, Od strane neverificiranih podataka, postotak kompresije je manji. UGRAD. Ali korisnici kažu suprotno.
PNGCrush - nije pokušao, kažu "pokušavajući optimizirati datoteku svima dostupne metode"Ali glavna stvar nije" kako pokušava ", ali" kako optimizira. "
i drugi raspon komunalnih usluga jednostavno čišćenje smeća iz datoteka.

Adobe vatromet.

Iskreno, Adobe Fireworks je postao pravi otkriće za mene: PNG-8, PNG-24 i PNG-32 + hrpa postavki!

PNG-24 i PNG-32 Nisam detaljno razmotrio. Koliko sam shvatio, u njihovoj terminologiji 32 - s alfa kanalom i 24 - bez. Prema pred-napadima Photoshop se nosi s ovim zadatkom.

Ali PNG-8 slomio je sve svoje stereotipe (i većina kolega). Konačna datoteka je mnogo manja od GIF "A i postoji puna podrška za transparentnost na dva načina: alfa i indeks transparentnost. Jedini minus u usporedbi s PNG-24 ostaje indeks paleta, iako sve ovisi o potrebama. Moj osobni mišljenje - PNG-8 u većini slučajeva ili GIF i PNG-24.

PNG protiv GIF u AF, iako samo s poznatim GIF-JPEG vatrometma radi prema zadanim postavkama ne samo (nisam se igrao s postavkama). Ali čak iu usporedbi s Photoshopom, rezultat je razlika u korist PNG-a:

I ovdje je cijeli izbor PNG-8 - za to vrijedi instalirati Adobe vatromet:

Za usporedbu: ista datoteka po naporima Photoshopa težila je 3.188 bajtova na 450 primljenih sada, to jest, 6 puta više.

Presuda

Po mom mišljenju, GIF je već razgovarao. Sada je njegovo postojanje prvenstveno pitanje inertnosti društva. UGRAD. Međutim, segment različitih animacijskih užitaka je rano sve dok GIF :).

Za transparentne elemente dizajna vrijedi koristiti PNG-8 (manje često PNG-24, kada PNG-8 palete nisu dovoljne za spremanje slike bez gubitka).

Za fotografije i slože grafički elementi Vođa i dalje ostaje JPEG zbog snažnih značajki optimizacije slike. Iako u nekim slučajevima može biti dovoljno i PNG-8 - kao i prije, s gif "ohm, podebljani eksperimenti - ključ uspjeha. UGRAD. Ali za stvarno velike slike, JPEG gubi.

UGRAD. Ja stvarno nisam stručnjak i pregled napisao na koljenu, što kaže epitet "kratak"; Možda ne na najboljim primjerima. Stoga, zahvaljujući svima koji su se aktivno sudjelovali u raspravi, osobito

Pozdrav svima na blogu. Općenito, u ovom članku želim rastjerati mit o dva podatke za proširenje za slike, to je JPG i najbolje Njih još nisu pronađeni. Cijela stvar je da oboje ovisno o korištenju same stranice mogu utjecati na brzinu stranice i optimizacije. Što vas jako puno stavlja u slijep? Zatim pročitajte dalje.

Dva PNG i JPG format u kakva razlike.

Čini se da je slici i da je ovdje, ali sve je u bojama. JPG format Najčešći, jer u usporedbi s drugima:

Teži manje (ali ovo je pitanje kontroverzno vidjeti dalje).
Lako je komprimirati.
Visoke boje u prijenosu.

Najčešći PNG-8 format u zgradi stranice, jer u usporedbi s njegovim kolegom PNG-24, ima ogromnu razliku u veličini datoteke, tako da se drugi koristi vrlo rijetko.

Glavna razlika između dva formata koju je JPEG bolnica, a boje se više neće rastezati da bi se uklonilo dodatno, a time i smanjio opseg slike i da JPG ne transparentna pozadina Ovaj format ga ne podržava.

Uništiti mitove.

Najvažniji mit o svim siteprov je da u kojem slučaju primjenjuje PNG, to je samo glupost, slike ovog formata komprimiraju i optimiziraju je bolji od JPG, mnogo puta s pravim pristupom.

Kako odabrati format?

Potražite primjer, snimimo sliku pretpostavke naše ruske zastave.

Smatrat ću sve operacije na primjeru Photoshopa, tako lakše. Posebno je izabrao veliku veličinu i malo boje, samo tri boje, a sada ga želim spremiti, vidjeti što se događa, početi, uzeti JPG format.

Ali što ako sam ga spasio u PNG-u.

Veličina se smanjila 6 puta gotovo. Nisam samo pitao samo minimalni broj boja, samo super mislim. Ova metoda je pogodna za one koji nisu zainteresirani za reprodukciju boja, kao što su blog, sve screenshotove su tako izrađene, pokazujući minimalne boje koje treba čitati i sve je u redu.

Ovaj trenutak i trebate skenirati, to se odnosi na ne samo web-lokacije. Veličina tvrdog diska nije guma, moja majka ima slike i slike na radu općenito, 246 koncerata zauzimaju, i pita se zašto toliko nema mjesta. Samo trebate koristiti moju metodu i to je to.

Naravno, ako je slika višebojna s mnogo boja i sjena, onda PNG neće pomoći, a onda savjetujem da koristite

Ponovno razmotrite sve slike na blogu i odaberite koji format bolji JPEG ili PNG prijaviti za sve vrste slika. Čak i oni koji su već stisnuli i optimizirali, jer se mogu smanjiti još više i bez gubitka kvalitete.
Prilikom pisanja novih članaka, ocijenite ovaj trenutak, znam da će vrijeme ostaviti više, ali.
Koristite program nereda, koji je testiran gore, ili ga upotrijebiti za komprimiranje JPG-a.
Nemojte biti lijeni jer je potrebno za istinu.

A vi ćete ga uzeti još dvije minute, a korist će biti cijeli vagon s malom kolicama.

Pa, kakav je vaš članak, mislim da sam vam za neke stvari otvorila vaše oči, o čemu ne znate čak ni, pa se prijavite i koristite, do sada, čekajući vas u komentarima.