Care este formatul de imagine de cea mai bună calitate. Ce format pentru a alege pentru imagini - JPEG, PNG sau GIF

De la autor: Pentru martie 2017, imaginile au peste 65% din conținutul web. Și nu este surprinzător: imaginile oferă frumusețe, transmite mesaje, spune povestiri și stabiliți contacte cu vizitatorii site-ului dvs. partea din spate Întrebare - Dacă imaginea este folosită necorespunzător, este adesea motivul principal al locului de încetinire și experiența slabă a utilizatorului.

Utilizarea corectă a imaginilor pe Internet implică două lucruri:

selectați formatul corect de imagine;

optimizarea imaginilor.

În acest articol, voi dezvălui primul element, în special, vă voi spune despre formate de imagine care sunt mai potrivite pentru web, precum și pentru ce imagini trebuie să utilizați aceste formate.

Dar înainte să mergem pe scurt pe terminologie.

Imagini raster sau vectoriale

Bazat pe imagini raster. Există o grilă de pixeli bidimensională. Fiecare pixel stochează culoarea și valoarea transparenței.

Imaginile raster sunt scalate prost: Dacă creșteți imaginea raster, va pierde claritatea și calitatea. Popular formate de raster Imagini pentru Web - JPEG, JPG, GIF și PNG.

Mai jos sunt două imagini raster (JPG) cu un măr. Prima imagine este autentică. Al doilea arată partea mărită a primei imagini.

Un exemplu de imagine bitmap în natură.

O parte sporită a bitmap-ului.

Fiți atenți la pierderea calității într-o versiune extinsă a imaginii.

În contrast cu imaginile raster grafică vectorială Constă în linii, cifre, puncte de traseu. Informațiile despre imaginile vectoriale nu sunt stocate în pixeli, este stocată în instrucțiuni matematice pentru desen, care nu sunt asociate cu pixeli. Alex Walker a explicat foarte clar diferența în exemplul SVG - cel mai popular format de imagini vectoriale din rețea:

"SVG nu este un format de imagine, este o rețetă de imagine mai mare." - De ce imaginile JPEG sunt ca placinta de mere de la McDonalds (NO SVG)

Una dintre consecințele independenței față de rezoluția ecranului - imaginile vectoriale pot fi scalate sub mărimea conținutului. Imaginile vor fi clare, ideale pentru ecrane retină.

Grafică svg la scară mică.

O parte din imaginea SVG mărită.

Ambele imagini de sus sunt un exemplu de imagine vectorială, cu toate acestea, a doua imagine este crescută mai mult de două ori mai mare decât prima. Nu există o pierdere de calitate.

Cu pierderea calității sau fără pierderi (pierdute și fără pierderi)

Atât termenul pierdut și fără pierderi, se referă la tehnicile de compresie ale fișierelor media, adică. Imagini, audio și video.

Compresia pierderi: "Nu restabilește datele digitale de până la 100% din original. Metodele cu pierderi de calitate sunt caracterizate printr-un grad ridicat de compresie, ceea ce reduce greutatea fișiere comprimate. Cu toate acestea, unii dintre pixelii originali, undele sonore și cadre video sunt îndepărtate pentru totdeauna. - Enciclopedia PCMag.com.

Ce înseamnă în practică: cu cât strângeți mai puternic fișierul cu pierderea calității, cu atât mai puțin va fi. Obținerea unei greutăți de fișiere mai mici, pierdeți ireversibilitatea. Cu compresie pierdută, trebuie să echilibrați între greutatea mică a fișierului și de calitate.

Sunteți foarte des găsiți formatul de imagine cu pierderea calității, acesta este JPEG.

Spre deosebire de imaginile cu pierderi de calitate fără pierderi, salvează toate datele ca și în original. O astfel de compresie nu duce la o scădere a calității fișierelor. Din acest motiv, formatele de fișiere fără pierderi au adesea mai multă greutate în comparație cu pierderile.

În rețea puteți găsi cu ușurință formate de imagine fără pierderi, este GIF și PNG.

Informațiile furnizate sunt utile atunci când alegeți un format mai bun Imagini pentru conținutul dvs.

Primele trei formate de imagine pe care le voi descrie mai jos (JPG, GIF și PNG), au fost deja utilizate pe site-uri pentru o lungă perioadă de timp. Ultimele două formate, SVG și Webp, nu sunt destul de noi, nu sunt încă populare. Cu toate acestea, ele nu pot fi mai potrivite pentru cerințele adaptabilității și a site-urilor încărcate rapid, iar popularitatea lor a crescut semnificativ.

JPEG.

JPEG sau JPG - Format Lossy proiectat de grupul de experți fotografici în comun. Imaginile JPG ocupă aproape 3% din toate tipurile de conținut pe site-uri. De ce acest format este atât de popular:

formatul JPG este capabil să afișeze milioane de culori, ceea ce îl face pe un candidat ideal să afișeze fotografii pe Internet;

Tendințe și abordări moderne în dezvoltarea web

Aflați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului

deoarece acesta este un format pierdut, atunci puteți utiliza compresia pentru a reduce semnificativ dimensiunea fișierului. În fișierele JPG există numeroase niveluri de compresie: aproximativ 60% vor fi suficiente pentru imagini de pe Internet, ceva mai mare de 75% afectează calitatea imaginii;

toate dispozitivele de internet suportă formatul JPG, care simplifică utilizarea formularului de pe Internet.

Un dezavantaj vizibil al JPG - fișierele acestui format nu acceptă transparența. Dacă doriți să utilizați un fundal transparent pentru a suprapune o imagine pe textura culorii de fundal sau a paginii, imaginile JPG nu se potrivesc. Alegeți una dintre opțiunile pe care le voi spune mai jos.

Gif.

Formatul de interbancare GIF sau grafică este un format fără pierderi de 8 biți, cu o cantitate maximă de culori egală cu 256. Restricțiile de culoare fac opțiunea GIF inadecvată pentru afișarea fotografiilor și a imaginilor cu o gamă largă de culori.

Factorii care au influențat o utilizare pe termen lung pe Internet:

datorită limitei în 256 de culori, dimensiunea fișierului este destul de scăzută;

sprijină transparența;

suportă animația, care vă permite să utilizați formatul pentru a afișa imagini cu buclă, cum ar fi icoane, emoticoane, bannere etc.;

bun potrivit pentru imagini simple Cu culori monofonice, dar nu sunt potrivite pentru fotografii.

PNG.

PNG sau grafica de rețea portabilă este o alternativă la GIF. Formatul este dezvoltat de W3C. Ca GIF, formatul utilizează un algoritm de compresie fără pierderi de calitate, opțiunile pe 8 biți și pe 24 de biți sunt disponibile. Ambele opțiuni suportă transparența. Cu toate acestea, într-o imagine PNG pe 24 de biți, transparența funcționează pe canalul alfa, precum și canale roșii, verzi și albastre. Prin urmare, în ciuda faptului că GIF și imaginile PNG pe 8 biți pot fi complet opace, fie complet transparente, în PNG fiecare imagine pixel oferă 256 nivele de transparență.

Opțiunea PNG 24 de biți poate fi utilizată pentru:

imagini Weig cu diferite niveluri transparenţă;

fotografii complexe și grafică;

graficele pe care doriți să le editați adesea Editați și exportați: Formatul de mai mică va păstra calitatea.

Spre deosebire de Formatul GIF. PNG nu acceptă animația, iar greutatea fișierelor poate fi destul de mare.

SVG.

Grafică vectorială svg sau scalabilă (grafică vectorială scalabilă) este un tip fișiere vectoriale. Bazat pe XML. Formatul a apărut în 2001, dar a primit popularitate în rândul dezvoltatorilor web doar recent. Motivul pentru o astfel de iubire târzie este un sprijin rău pentru SVG în browsere de-a lungul anilor. Am vrut să vă informez cu bucurie că la momentul scrierii articolului SVG este susținut în toate browserele majore, dar nu fără distincție și bug-uri.

SVG are o mulțime de funcții care fac ca acest format să fie recomandat pentru web, mai ales dacă SVG este utilizat pentru imagini simple, cum ar fi logo-urile, cardurile, icoanele etc.

Pluses de formatul SVG

SVG cântărește adesea imagini mai puțin raster, mai ales după optimizarea web-ului și a comprimării prin GZIP;

formatul este scalabil, care oferă claritate la orice rezoluție a ecranului;

Codul SVG poate fi plasat în HTML și salvați pe interogările HTTP;

Codul SVG poate fi configurat prin CSS;

Imaginile SVG pot fi animate, inclusiv părți individuale ca în cazul folosind CSS.Și JS, care este foarte rece.

Evitați imaginile SVG prea complexe, crește ușor dimensiunea fișierului. În cele din urmă, SVG nu este aplicabil fotografiilor, formatelor JPG și Webp vor fi mai bine potrivite aici.

Webp.

În ciuda faptului că formatul a apărut în 2010, nu voi fi confundat dacă spun că Webp este încă foarte formatul noucare nu este atât de faimos ca JPG și PNG. Cu toate acestea, Web-ul are acest format în sânge: a fost special conceput pentru Internet, ceea ce îl face extrem de interesant.

WebP - Format imagine cu Deschidere cod sursadezvoltat de Google. Caracteristici cheie: "Webp - formatul modern Elementele de pe Internet, oferind o compresie excelentă cu pierderi și fără pierderi de calitate ... Versiunea fără pierderi a imaginilor WebP cântărește 26% mai puțin PNG. Versiunea Lossy WEBP cântărește cu 25-34% mai puțin comparabilă Imagini JPEG.... Webp fără pierderi sprijină transparența ... Datorită octeților suplimentari de 22%. În cazurile în care se aplică compresia RGB pierderi, Webp Webpy suportă, de asemenea, transparența, oferind dimensiunea fișierului 3x comparativ cu PNG. " - site-ul Webp.

Cravele WebP este că combină avantajele JPG și PNG fără a crește dimensiunea fișierului.

Pe acest moment Formatul suport este destul de bun: browserele Blink au acceptat formatul de la lansarea în sine, toate aceleași webp - crearea Google.. Pentru compatibilitatea înapoi cu browserele fără suport, adică. IE / EDGE, Firefox și Safari, meșteșugari populari au venit cu lucrări de lucru.

Concluzie

În acest articol, v-am spus despre formatele de imagini pentru Web și, de asemenea, ați trecut pe scurt prin tipurile de imagini cele mai potrivite pentru Internet.

JPG, GIF și PNG sunt formate foarte populare care au fost folosite de foarte mult timp. SVG și Webp Cele mai noi și mai interesante alternative. SVG Mare pentru ilustrații și imagini simple, Webp înlocuiește toate aplicațiile JPG și PNG.

Ați folosit deja SVG și Webp în dezvoltare? Ce dificultăți aveți? Ați realizat câștiguri de performanță vizibile? Scrieți în comentarii!

Atenție, multe imagini! Toate căpțiunea.

PNG.

Raster. formatul grafic. PNG, câștigând popularitate în creștere în epoca web 2.0, a apărut înapoi în 1995 ca înlocuind vechiul GIF bun (și, parțial, TIFF). În acel moment, proprietarii GIF brevetat "a decis să bată sumele de patru cifre de la toți dezvoltatorii care utilizează formatul și comunitatea liberă nu mai rămâne nimic decât să ofere o alternativă gratuită.

Deci, care sunt avantajele formatului?

Sprijin deplin pentru transparență alfa-transparență - Transparență. Vă permite să faceți secțiuni transparente și translucide.
Algoritmul de compresie de înaltă calitate fără pierderea calității. LZW, dar un pic mai eficient.
Posibilitatea unui firmware și, spre deosebire de GIF) atât pe verticală, cât și pe orizontală simultan.
Corectarea gamma încorporată. Vă permite să vă atașați la imaginea configurației afișajului său, pentru ca monitoarele diferite să apară în același mod ca și autorul.

Există 2 versiuni ale formatului: PNG-8 (similar cu GIF - utilizează culori index) și PNG-24 (mai aproape de JPEG - Paletă de culori complete).

Deoarece PNG-24 utilizează o paletă de culori completă, comparați-o cu GIF este destul de dificilă. PNG-8 cu paleta de index aici este mai asemănătoare. Voi da screenshot-uri pentru comparație:

Practica (cum ar fi opinia colegilor) arată că imaginile simple mici GIF comprimă mai bine. Dar când vine vorba de imagini mari, GIF rămâne în urmă.

În plus, un alt avantaj destul de mare: de fapt, contrar credinței populare, PNG-8 poate folosi, de asemenea, un canal alfa completca PNG-24. Doar Photoshop nu-l acceptă, așa că Sergey Chikuenok de la studioul lui Lebedev recomandă utilizarea adobe focuri de artificii decât am decis să fac (un pic despre el).

Și în această bătălie, dacă nu avem nevoie de transparență, PNG pierde, ca să spunem așa, pe "segmentul mijlociu al pieței". Deși, dacă rămâneți la JPEG "la un profil ICC, diferența de volum devine invizibilă. Măsurătorile mele au fost aduse la - JPEG 100%. Și cu mai puțină calitate (cu nu este deosebit de vizibilă pentru diferența de ochi), din păcate, devine Chiar mai trist.

În general, vezi-i pe noi înșine:

Actualizare. În general, rezultatele sunt semnificativ dependente de imaginea în sine: PNG este mai bună Strângeți gradienții și secțiunile monotone, dar pentru fotografii, cea mai bună compresie oferă JPEG. Deși, ei spun (este greu de crezut), la fotografii mari de PNG și apoi conduce - tocmai a fost verificată în procesul de conversie a capturilor de ecran la articol (PNG împotriva JPEG-70% - timpi câștigători într-una și jumătate ).

Viața după Photoshop "sau stoarceți

În multe situații, PNG rămâne, în general, indispensabilă, deoarece transparența nu este în mod normal susținută de nici una dintre formatele web alternative și care spațiu se deschide designerilor și camerei ... Actualizare. În plus, luând în considerare specificul formularului, pentru elementele de proiectare din Web - este probabil cea mai bună soluție.

Google și leagăn -. Programul este de aproximativ 1,5 MB cu un număr minim de setări Vă permite să conduceți fișierele PNG (inclusiv pachetul) cu compresie.

Pe pachetul de pictograme (90 de fișiere cu un fundal transparent fără burdufuri speciale), câștigul în volum a fost în medie de aproximativ 10-15%. Nu în mod special, desigur, impresionant. Dar pentru fișierele de mai sus, procentul de compresie a variat de la 10% (poster mare fără transparență) la 72% (dreptunghiuri translucide). Deci, încercarea de a încerca, cu atât mai mult munca cu utilitatea nu ocupă prea mult timp.

În plus față de PNGout, există multe programe mai multe observație detaliată Care acum nu doresc să facă:

Optipng - nu are coajă grafică și funcționează de la linie de comanda. Prin date neconfirmate, procentajul de compresie este mai mic. Actualizare. Dar utilizatorii săi spun opusul.
Pnccrush - nu sa încercat, spun că "încearcă să optimizeze fișierul de către toți metode disponibile"Dar principalul lucru nu este" modul în care încercați ", ci" cât de optimizează ".
Și o altă gamă de utilități pur și simplu gunoi mai curat din fișiere.

Adobe focuri de artificii.

Sincer, Adobe Fockworks a devenit o descoperire reală pentru mine: PNG-8, PNG-24 și PNG-32 + grămadă de setări!

PNG-24 și PNG-32 Nu am luat în considerare în detaliu. În ceea ce am înțeles, în terminologia lor 32 - cu un canal alfa și 24 - fără. Potrivit pre-atacurilor Photoshop se confruntă cu această sarcină mai bună.

Dar PNG-8 a rupt toate stereotipurile mele (și majoritatea colegilor). Fișierul final este mult mai mic decât GIF "A și există un sprijin deplin pentru transparența în două moduri: transparența Alpha și Index. Singurul minus comparativ cu PNG-24 rămâne o paletă de index, deși totul depinde de nevoi. Personalul meu opinie - PNG-8 în majoritatea cazurilor sau GIF și PNG-24.

PNG împotriva GIF în AF, deși doar cu Focul de artificii GIF-JPEG familiar lucrează în mod implicit nu foarte (nu am jucat cu setările). Dar chiar și în comparație cu Photoshop, rezultatul este diferența în favoarea PNG:

Și aici este întreaga varietate de PNG-8 - pentru aceasta este în valoare de instalare Adobe Fockworks:

Pentru comparație: același fișier al eforturilor Photoshop a cântărit 3.188 octeți față de cele 450 primite acum, adică de 6 ori mai mult.

Verdict

În opinia mea, GIF a fost deja discutată. Acum existența sa este în primul rând problema inerției societății. Actualizare. Cu toate acestea, segmentul de plăceri de animație diferite este mai devreme cât timp GIF :).

Pentru elementele de design transparente, merită să utilizați PNG-8 (mai puțin PNG-24, când paletele PNG-8 nu sunt suficiente pentru a salva imaginea fără pierderi).

Pentru fotografii și complexe elemente grafice Liderul rămâne în continuare JPEG datorită caracteristicilor puternice ale optimizării imaginii. Deși, în unele cazuri, poate fi de ajuns și PNG-8 - ca înainte, cu GIF "Ohm, experimente îndrăznețe - cheia succesului. Actualizare. Dar pentru imagini cu adevărat mari, JPEG pierde.

Actualizare. Nu sunt într-adevăr un specialist și o revizuire a scris pe genunchi, ceea ce spune epitetul "scurt"; Poate că nu în cele mai bune exemple. Prin urmare, datorită tuturor celor care au făcut o parte activă în discuție, în special

Bună ziua tuturor de pe blog. În general, în acest articol, vreau să risipesc mitul despre două date de expansiune pentru imagini, este JPG și png cel mai bun. Dintre ele nu au fost încă găsite. Întregul lucru este că, în funcție de utilizarea site-ului în sine, poate afecta viteza site-ului și optimizarea. Ce te-a pus foarte mult la un capăt mort? Apoi citiți mai departe.

Două formate PNG și JPG în ce diferențe.

Se pare că imaginea și că aici este acest lucru, dar totul este în culori. Formatul JPG. Cel mai frecvent, pentru că în comparație cu alții:

Cântărește mai puțin (dar această întrebare este controversată mai departe).
Este ușor de comprimat.
Culori înalte în transmisie.

Cel mai frecvent format PNG-8 din clădirea site-ului, deoarece, comparativ cu colegul său PNG-24, are o diferență colosală în dimensiunea fișierului, astfel încât a doua este folosită foarte rar.

Diferența principală dintre cele două formate pe care JPEG este un spital și culorile nu se va întinde pentru a elimina extra-ul și, prin urmare, reducă domeniul de aplicare al imaginii și că JPG nu are fundal transparent Acest format nu o susține.

Distruge miturile.

Cel mai important mi a întregului siteproev este că în nici un caz nu se aplică PNG, este doar un nonsens, imaginile acestui comprimat și optimizarea este mai bine decât JPG, de multe ori cu abordarea corectă.

Cum de a alege un format?

Căutați, de exemplu, să luăm o imagine a presupunerii de steagul nostru rusesc.

Voi fi considerat toate operațiunile cu privire la exemplul de Photoshop, atât de ușor. În mod special, a ales o dimensiune mare și o mică culoare, doar trei culori, și acum vreau să o salvez, să vezi ce se întâmplă, să încep, să ia formatul JPG.

Dar dacă am salvat-o în PNG.

Dimensiunea a scăzut de 6 ori aproape. Nimic nu am cerut doar numărul minim de culori, doar super cred. Această metodă este potrivită pentru cei care nu sunt interesați de reproducerea culorilor, ca un blog, toate capturile de ecran sunt astfel făcute, prezentând un minim de culori care să fie lizibile și totul este bine.

Acest moment și trebuie să scaneze, se referă nu numai la site-uri. Dimensiunea hard disk-ului nu este cauciuc, mama mea are poze și imagini pe muncă în general, 246 de concerte ocupă și se întreabă de ce nu are atât de mult locul. Trebuie doar să-mi folosesc metoda și asta e.

Desigur, dacă imaginea este multicolor cu o mulțime de culori și umbre, atunci PNG nu va ajuta, și apoi vă sfătuiesc să utilizați

Reconsiderați toate imaginile de pe blog și alegeți ce format mai bine JPEG. sau PNG Aplicați pentru tot felul de imagini. Chiar și cei care au fost deja stoarse și optimizați, pentru că pot fi tăiați și mai mult și fără a pierde calitatea.
Când scrieți articole noi, evaluați acest moment, știu că timpul va pleca mai mult, dar.
Utilizați programul de revoltă, care a fost testat mai sus sau îl utilizați pentru a comprima JPG.
Nu fi leneș, deoarece este necesar pentru adevăr.

Și o veți lua timp de două minute, iar beneficiul va fi un vagon întreg cu un cărucior mic.

Ei bine, care este articolul dvs., cred că pentru unele lucruri ți-am deschis ochii, despre care nici măcar nu știi, așa că aplicați și folosiți, până acum, vă așteaptă în comentarii.