Share
Heb je je ooit afgevraagd wat het verschil is tussen JPEG-, GIF- en PNG-afbeeldingen die we gebruiken op internet? Als ontwerper - en vooral een webontwerper - is het belangrijk om het verschil te kennen tussen de verschillende beeldformaten en hoe deze in elke situatie te gebruiken. In dit artikel wordt beschreven hoe u deze voor elke situatie kunt gebruiken om de bestandsgrootte klein te houden en de beeldkwaliteit hoog. We doen dit onder "Basix", maar de informatie zou interessant moeten zijn voor iedereen die een beter begrip wil krijgen van de beeldformaten.
Om een tool het best te gebruiken, moet je eerst weten hoe de tool werkt. Om beter te begrijpen hoe u beeldtypen beter kunt gebruiken, moeten we kijken naar hoe hun compressiealgoritme werkt. Ik weet het, ik weet het, je bent geen getallengeek en wie geeft er echt om? Het is net als autorijden; je kunt er beter mee rijden als je weet hoe alle kleine onderdelen op elkaar inwerken. En als er iets misgaat, weet je hoe je het moet repareren!
JPEG is ontwikkeld door de Joint Photographic Experts Group. Zoals je misschien al geraden had, werkt het goed voor natuurlijke afbeeldingstypes (fotografie). Natuurlijke afbeeldingstypen, zoals fotografie, hebben vloeiende variaties in kleuren, wat betekent dat het JPEG-formaat ook goed werkt voor afbeeldingen met verlopen en verschillende tonen en kleuren.
Een belangrijk punt over JPEG's is dat ze over het algemeen een zijn lossy formaat, tenzij u een andere variant gebruikt die verliesvrij is. Lossy-compressie is eenvoudigweg een vorm van codering die sommige gegevens verliest (verliest) ... wat is de reden waarom, als u een JPG 100 keer opslaat, deze na verloop van tijd langzaam verslechtert. Er zijn "verliesloze" versies van JPG's, maar die variaties komen niet vaak voor en hebben geen brede ondersteuning. Als u afbeeldingsgegevens in een verliesvrije indeling wilt opslaan, kunt u het beste een indeling zoals TIFF of PSD gebruiken.
Nu voor het technische gedeelte: het proces van een JPEG verdeelt het beeld in 8x8 pixelblokken en voert ze door een DCT (Discrete Cosine Transform) berekening gevolgd door kwantisering (JPEG 2000, een nieuwere versie, gebruikt een wavelet-transformatie in plaats van DCT ).
In termen van de leek: het kijkt in principe naar blokken van de afbeelding en bepaalt de kleine variaties in kleur, en gooit vervolgens enkele van die variaties weg op basis van het compressieniveau dat je hebt gekozen. De gegevens die worden weggegooid, worden helemaal uit het bestand verwijderd, wat resulteert in een klein bestand. Dit verlaagt bijgevolg ook de kwaliteit van het beeld; Je weet waarschijnlijk dat als je de compressie erg hoog instelt, je een verslechterde, gepixelde afbeelding krijgt ... terwijl lagere compressie-instellingen resulteren in een afbeelding van een hogere kwaliteit.
GIF (Graphics Interchange Format) is ontwikkeld door CompuServe en maakt gebruik van de LZW (Lempel-Ziv-Welch) compressiemethode, die geen gegevens verliest. Met deze methode van compressie wordt een kleurentabel gemaakt voor de afbeelding waarbij elke kleurwaarde wordt toegewezen aan pixels. Deze compressiemethode maakt dit beeldformaat ideaal voor lijntekeningen, logo's of andere eenvoudige afbeeldingen zonder verlopen of variërende kleuren.
Een interessante opmerking over deze compressiemethode is dat deze de pixelverandering horizontaal bekijkt. Dat betekent beelden waarbij pixelkleurveranderingen die vaker horizontaal voorkomen, groter zijn dan afbeeldingen waarbij pixelkleurveranderingen vaker verticaal voorkomen. Het formaat ondersteunt maximaal 8 bits per pixel, waardoor één afbeelding kan verwijzen naar een palet van maximaal 256 verschillende kleuren. Je kunt minder kleuren gebruiken (je hebt misschien GIF-afbeeldingen gezien met slechts een handvol kleuren), wat kan resulteren in enkele interessante, zelfs artistieke, resultaten.
GIF's kunnen twee extra dingen doen die JPEG's niet kunnen. Ten eerste kan een GIF transparantie gebruiken. In GIF-pixels zijn ze 100% transparant of 100% dekkend. GIF is ook een indeling met meerdere afbeeldingen, dus u kunt gebruiken animatie (In voor en tegenspoed).
PNG (Portable Network Graphics) is gemaakt om het GIF-formaat grotendeels te vervangen of op zijn minst te verbeteren. PNG gebruikt de DEFLATE compressiemethode - hetzelfde algoritme dat wordt gebruikt in zip en gzip. Ik zal niet ingaan op hoe deze compressiemethode werkt, omdat het een beetje te gecompliceerd is voor dit artikel, maar het is een compressie zonder verlies. Vanwege dit heeft het PNG-formaat de neiging om te resulteren in grotere beeldafmetingen dan JPEG bij gebruik voor fotografische afbeeldingen. Wanneer PNG wordt gebruikt voor afbeeldingen van lijntekeningen, resulteert dit in veel kleinere bestandsgrootten dan JPEG en vrijwel altijd in kleinere formaten dan in GIF.
In tegenstelling tot GIF is PNG hetzelfde als JPEG in de zin dat het een enkel beeldformaat is; wat betekent dat PNG geen animatie ondersteunt. Het ondersteunt echter een groot voordeel dat noch JPEG, noch GIF ondersteunen: alpha transparantie. Pixels in een PNG-afbeelding kunnen 50% transparant zijn in tegenstelling tot het GIF-formaat, waardoor deze pixels 100% transparant of 100% dekkend moeten zijn. Zoals je je kunt voorstellen, zou dit een betere vermenging en vloeiendere grafische weergave mogelijk maken dan GIF. PNG implementeert ook verschillende andere verbeteringen ten opzichte van het GIF-formaat, maar ze zijn niet nodig om erin te komen.
Onnodig te zeggen dat PNG in veel opzichten een veel beter formaat is dan GIF, met uitzondering van zeer kleine bestanden (zoals deze worden gebruikt in achtergrondpatronen). Het PNG-formaat heeft webontwerpers vroegtijdig ontbrand omdat ze niet compatibel zijn met sommige oudere webbrowsers, maar dat probleem kan tegenwoordig grotendeels worden opgelost met een paar geweldige scripts, zoals het DD_Belated-script.
Zoals u waarschijnlijk weet, zijn er twee hoofdtypen PNG.
Hieronder staan twee voorbeeldafbeeldingen die ik zal gebruiken om te laten zien hoe en wanneer elk afbeeldingsformaat moet worden gebruikt. Je bent misschien al bekend met deze methoden, maar als je ze nog niet echt hebt bestudeerd, is dit de moeite van het proberen waard.
Zoals u kunt zien, is de onderstaande afbeelding fotografisch van aard met kleuren en tonen die enorm variëren. Uiteraard zullen niet alle afbeeldingen zoveel kleuren gebruiken - maar deze afbeelding is geweldig om te gebruiken als een voorbeeld van het gebruik van het JPEG-formaat.
De onderstaande afbeelding toont JPEG-compressie van een kwaliteitsinstelling van 100% tot 0%. Bij 100% kwaliteit lijkt het beeld verliesloos te zijn, maar er worden nog steeds gegevens uit de originele afbeelding verwijderd. Het menselijk oog kan het gegevensverlies niet zien omdat het minuscuul is. Bij 50% neemt de beeldkwaliteit aanzienlijk af, maar zoals u ziet, is de bestandsgrootte meer dan 100K kleiner. Dat is een enorm verschil met enigszins minimaal zichtbaar kwaliteitsverlies. Bij 25% ziet de afbeelding er echt slecht uit en heeft hij niet veel extra bestandsgrootte opgeslagen. Bij 0% ziet de afbeelding er vreselijk uit en hoewel de afbeelding een veel kleinere bestandsgrootte heeft dan de 100% -instelling, is de afweging het niet waard.
Deze afbeelding ziet er waarschijnlijk het beste uit bij een kwaliteit van ~ 65%, waardoor de afbeeldingsgrootte met bijna 100K zou verminderen. Om de beste instellingen voor een JPEG te bepalen, vermindert u langzaam de schuifregelaar totdat u kunt beginnen de beeldkwaliteit echt te zien afnemen. Verplaats vervolgens de kwaliteit ongeveer 5-10% of zo.
We weten dat deze JPG er goed uitziet voor het web; Laten we eens kijken naar enkele vergelijkingen van bestandsgrootte / kwaliteit voor de andere formaten:
GIF resulteert in een bestandsgrootte van 63,77 K en een vreselijk ogend beeld.
PNG8 resulteert in een bestandsgrootte van 53,52K vanwege de meer geavanceerde compressiemethoden, maar ziet er hetzelfde uit als de GIF.
PNG24 resulteert in een bestandsgrootte van 253,9 K en lijkt in de buurt van het origineel, maar is de grote bestandsgrootte niet waard.
De best mogelijke optie voor dit type beeld is JPEG met een kwaliteit van ~ 65%; kleine bestandsgrootte (39.77K) met zeer weinig verlies van visuele kwaliteit.
Zoals u hieronder kunt zien, gebruikt de afbeelding geen verschillende kleuren of tonen, maar in plaats daarvan effen kleuren. Deze afbeelding is 5,72K (GIF) en gebruikt in totaal 8 kleuren. Dit maakt GIF en PNG8 geweldige formaten voor lijntekeningen, eenvoudige kleurlogo's, etc. PNG8 zou hier een betere keuze zijn, omdat het resulteert in een kleinere bestandsgrootte (3,54K) vanwege de betere compressiemethode die het gebruikt.
Wanneer u een GIF probeert op te slaan, zoals de bovenstaande afbeelding, als JPEG, kan dit leiden tot pixelering of beeldvervorming. Het zal ook altijd resulteren in veel grotere bestandsgroottes als je te maken hebt met fotografie en andere rijke afbeeldingen. De afbeelding hieronder is ingesteld op maximale compressie en resulteert in een bestandsgrootte van bijna 8K voor JPEG versus 5,72K voor GIF en 3,54K voor PNG8.
In tegenstelling tot JPEG en PNG24, kunt u met GIF en PNG8 kiezen hoeveel kleuren kunnen worden gebruikt (maximaal 256). In het geval van afbeeldingen zoals logo's en eenvoudige lijntekeningen, kunt u een kleinere bestandsgrootte bereiken door minder kleuren te selecteren. Let op dat u niet te weinig kleuren selecteert, omdat de afbeelding er veel slechter uit kan zien.
De afbeelding hieronder is een PNG8 met transparantie (GIF ziet er hetzelfde uit) zoals het er uitziet in Photoshop. Wanneer u transparantie gebruikt met GIF of PNG8, wilt u de matte van de afbeelding instellen op de kleur die de achtergrond zal hebben - voor betere vermenging en een schoner ogend beeld. Zoals eerder vermeld, is dit omdat GIF alpha-transparantie niet ondersteunt en Photoshop geen alpha-transparantie ondersteunt met het PNG8-formaat, hoewel dit wel wordt ondersteund (bewerken - dit is sindsdien opgelost in nieuwe versies van Photoshop).
Gelukkig kunnen we met Fireworks Alpha Transparency gebruiken met het PNG8-formaat (C'mon Photoshop!). Zoals je in de onderstaande afbeelding kunt zien, is het zwarte verloop nog steeds beperkt in de variatie van de toon, waardoor het verloop er een beetje schokkerig uitziet. Het mooie van het gebruik van alpha-transparantie met PNG8 is dat je nog steeds de kleine bestandsgrootte krijgt, maar randen vloeiend overvloeien en zelfs kleine overgangen er geweldig uitzien.
Een ander groot voordeel van het PNG8-formaat is dat IE6 native alpha-transparantie ondersteunt! Dat betekent voor eenvoudige afbeeldingen die alpha-transparantie (schaduwen, logo's, enz.) Nodig hebben, u hoeft IE6 niet te hacken wanneer u PNG8 en alpha-transparantie gebruikt!
Helaas kunt u een afbeelding niet opslaan als PNG8 met alpha-transparantie in Photoshop, dus u moet dit in Fireworks doen om dit te doen.
Selecteer in het Optimize-pallet het PNG8-formaat met alpha-transparantie geselecteerd en klik vervolgens in de rechter benedenhoek op "Rebuild".
U hoeft geen matte kleur te selecteren en u kunt het aantal kleuren aanpassen aan uw behoeften en de bestandsgrootte verkleinen. In het voorbeeld aan de rechterkant heb ik deze instellingen opgeslagen als "PNG8 Alpha-T", zodat ik niet elke optie opnieuw hoeft te selecteren elke keer dat ik een PNG8-afbeelding met alpha-transparantie wil opslaan.
Dat is zo ongeveer alles!
Het gebruik van PNG24 is eigenlijk hetzelfde als het gebruik van GIF of PNG8, behalve dat dit zal resulteren in een grotere bestandsgrootte omdat het een veel breder scala aan kleurvariaties ondersteunt. Als u afbeeldingen hebt met complexere verlopen die transparantie of een grotere kleurdiepte nodig hebben, is PNG24 de beste keuze. Helaas ondersteunt IE6 geen native PNG24; dus je zult het moeten "hacken" om naar behoren te werken.
PNG24's zijn geweldig in de meeste gevallen waar je transparantie nodig hebt - ze zijn een stuk groter in bestandsgrootte, maar ze werken goed in gevallen zoals merklogo's waarbij kwaliteit belangrijk is en je geen lossy-formaat wilt gebruiken.
Dit is een relatief gloednieuw formaat, slechts een paar weken geleden door Google zelf aangekondigd. Uit hun persbericht:
"Om de compressie te verbeteren die JPEG biedt, hebben we een beeldcompressor gebruikt op basis van de VP8-codec die Google in mei 2010 open source gebruikte. We hebben de technieken uit VP8 video intraframe-codering toegepast om de envelop in stilbeeldcodering te duwen. aangepast een zeer lichtgewicht container gebaseerd op RIFF. Hoewel dit container formaat een minimale overhead van slechts 20 bytes per afbeelding bijdraagt, is het uitbreidbaar om auteurs toe te laten om meta-data te bewaren die ze zouden willen opslaan.
Hoewel de voordelen van een op VP8 gebaseerd beeldformaat in theorie duidelijk waren, moesten we ze in de echte wereld testen. Om de effectiviteit van onze inspanningen te meten, hebben we willekeurig ongeveer 1.000.000 afbeeldingen van het web (meestal JPEG's en sommige PNG's en GIF's) uitgekozen en opnieuw gecodeerd naar WebP zonder dat de visuele kwaliteit merkbaar in het gedrang kwam. Dit resulteerde in een gemiddelde vermindering van de bestandsgrootte met 39%. We verwachten dat ontwikkelaars in de praktijk een nog betere bestandsgroottevermindering zullen bereiken met WebP bij het starten van een ongecomprimeerd beeld. "
Het doel is eenvoudig: afbeeldingen op internet versnellen met behulp van modernere algoritmen. De vraag is: Will wordt geadopteerd? Google is een enorm bedrijf met enige echte macht om dit formaat naar de massa te duwen, maar zoals we hebben gezien bij sommige van zijn producten (ik kijk naar je Wave!), Kunnen zelfs geweldige ideeën plat vallen.
"Scalable Vector Graphics" is een formaat dat nooit echt wordt gebruikt als een veelgebruikt afbeeldingstype. Het idee achter dit formaat is om 'vectorafbeeldingen' op internet toe te staan. Het formaat gebruikt XML als basis voor het beschrijven van een 2D-afbeelding op het web. Browserondersteuning voor SVG is inconsistent, maar als je echt schaalbare afbeeldingen wilt opnemen, is het de moeite waard om dit formaat te lezen.
In uw vrije tijd raad ik u aan een beetje dieper in te gaan op deze beeldformaten en alles wat ze te bieden hebben. U zult veel leren en precies weten wat u met deze beeldformaten kunt doen of welke u voor elke situatie kunt gebruiken. De waarde van superkleine bestandsgroottes voor afbeeldingen lijkt te worden overschreden omdat breedband zich over het internet uitbreidt, maar snelheid is altijd een handig sitekenmerk en het begrijpen van deze afbeeldingsindelingen is de eerste stap naar het optimaliseren van uw eigen afbeeldingen op internet.
Als je vragen of opmerkingen hebt, kun je deze hieronder plaatsen!
Accentsconagua