Share
Har du någonsin undrat vad skillnaden är mellan JPEG, GIF och PNG-bilder som vi använder på webben? Som designer - och särskilt en webbdesigner - är det viktigt att känna skillnaden mellan olika bildformat och hur man använder dem i varje situation. Den här artikeln kommer att omfatta hur man använder dem för varje situation för att hålla filstorlekarna små och bildkvaliteten hög. Vi arkiverar detta under "Basix", men informationen ska vara intressant för alla som vill få en djupare förståelse av bildformat.
För att bäst kunna använda ett verktyg måste du först förstå hur verktyget fungerar. För att förstå hur du använder bildtyper bättre måste vi titta på hur deras komprimeringsalgoritm fungerar. Jag vet, du vet inte, du är inte en numrerare, och som verkligen bryr sig? Det är som att köra bil men; du kan köra det bättre när du vet hur alla små delar interagerar. Plus, när något går fel, vet du hur man fixar det!
JPEG utvecklades av Joint Photographic Experts Group. Som du kanske har gissat fungerar det bra för naturliga bildtyper (fotografi). Naturliga bildtyper, som fotografering, har jämn variation av färger vilket innebär att JPEG-formatet också fungerar bra för bilder som innehåller gradienter och varierande toner och färger.
En viktig punkt om JPEG är att de i allmänhet är en förstörande format, om du inte använder en annan variant som är förlustfri. Lossy-komprimering är helt enkelt en form av kodning som kasserar (förlorar) några av dess data ... vilket är anledningen till att om du sparar en JPG 100 gånger kommer den långsamt att bli mer försämrad över tiden. Det finns "förlustfria" versioner av JPG, men dessa variationer är inte vanliga men har inte utbrett stöd. Om du behöver lagra bilddata i ett förlustfritt format är det bäst att använda ett format som TIFF eller PSD.
Nu för den tekniska delen: Processen med en JPEG delar bilden i 8 × 8 pixelblock och kör dem genom en DCT (Discrete Cosine Transform) beräkning följt av kvantisering (JPEG 2000, en nyare version, använder en wavelet-transform istället för DCT ).
I lekmannens termer: det ser i grunden på block av bilden och bestämmer de små variationerna i färg och kasserar sedan några av dessa variationer baserat på den komprimeringsnivå du har valt. Datan som kasseras, tas bort från filen helt och hållet, vilket resulterar i en liten fil. Följaktligen sänker detta också kvaliteten på bilden. Du vet säkert att om du ställer in komprimeringen mycket hög kommer du att hamna med en nedbruten pixelbild ... medan lägre komprimeringsinställningar kommer att resultera i en bild av högre kvalitet.
GIF (Graphics Interchange Format) utvecklades av CompuServe och använder kompressionsmetoden LZW (Lempel-Ziv-Welch), vilket är förlustfri. Denna komprimeringsmetod bygger ett färgbord för bilden där varje färgvärde är tilldelat pixlar. Denna komprimeringsmetod gör detta bildformat idealiskt för linjekonst, logotyper eller andra enkla bilder utan gradienter eller varierande färg.
En intressant anteckning om denna komprimeringsmetod är att den ser på pixelförändringen horisontellt. Det betyder att bilder där pixelfärger ändras som uppträder oftare horisontellt blir större än bilder där pixelfärgsändringar uppträder oftare vertikalt. Formatet stöder upp till 8 bitar per pixel - vilket gör att en enda bild kan referera till en palett på upp till 256 olika färger. Du kan använda färre färger (du kanske har sett GIF-bilder med bara en handfull färger), vilket kan resultera i några intressanta, till och med konstnärliga resultat.
GIF kan göra två ytterligare saker som JPEG kan inte. För det första kan en GIF använda insyn. I en GIF-pixel är antingen 100% transparenta eller 100% ogenomskinliga. GIF är också ett multi-bildformat, så du kan använda animering (för bättre eller sämre).
PNG (Portable Network Graphics) skapades för att ersätta, eller åtminstone förbättra, GIF-formatet. PNG använder DEFLATE-komprimeringsmetoden - samma algoritm som används i zip och gzip. Jag kommer inte att gå in på hur denna komprimeringsmetod fungerar eftersom det är lite för komplicerat för den här artikeln, men det är en förlustfri kompression. På grund av detta tenderar PNG-formatet att resultera i större bildstorlekar än JPEG när den används för fotografiska bilder. När det används för bilder av linjekonstyp, resulterar PNG i mycket mindre filstorlekar än JPEG och nästan alltid mindre storlekar än GIF.
Till skillnad från GIF är PNG samma som JPEG med hänsyn till att det är ett enda bildformat; vilket betyder att PNG inte stöder animering. Det stöder dock en stor fördel att varken JPEG eller GIF stöder: alfa genomskinlighet. Pixlar i en PNG-bild kan vara 50% transparenta i motsats till GIF-formatet vilket skulle kräva att dessa pixlar är antingen 100% transparenta eller 100% opaka. Som du kan tänka dig skulle detta möjliggöra bättre blandning och mjukare grafik än GIF. PNG implementerar också flera andra förbättringar över GIF-formatet, men de är inte nödvändiga för att komma in.
Självfallet är PNG ett mycket bättre format att använda än GIF i nästan alla avseenden, med undantag för mycket små filer (som det här används i bakgrundsmönster). PNG-formatet drog tidigt brand från webbdesigners eftersom det inte var kompatibelt med några äldre webbläsare, men det problemet kan i stor utsträckning lösas genom några bra skript idag, som DD_Belated-skriptet.
Som du säkert vet finns det två huvudtyper av PNG.
Nedan finns två exempel bilder som jag ska använda för att visa hur och när du ska använda varje bildformat. Du kanske redan är bekant med dessa metoder, men om du inte riktigt har studerat dem är det väl värt en recension.
Som ni kan se är bilden nedan fotografisk i naturen med färger och toner som varierar vildt. Självklart kommer inte alla bilder att använda dessa många färger - men den här bilden är utmärkt att använda som ett exempel på att använda JPEG-formatet.
Bilden nedan visar JPEG-komprimering från en kvalitetsinställning på 100% till 0%. Vid 100% kvalitet verkar bilden vara förlustfri, men data bortkastas fortfarande från originalbilden. Det mänskliga ögat kan inte se dataförlusten eftersom det är mindre. Vid 50% tar bildkvaliteten ett märkbart fall, men som du kan se är filstorleken över 100K mindre. Det är en stor skillnad med något minimal synlig kvalitetsförlust. Vid 25% börjar bilden verkligen se dåligt ut och har inte sparat mycket extra filstorlek. Vid 0% ser bilden ut hemsk och även om bilden är en mycket mindre filstorlek än 100% -inställningen, är det inte värt det.
Den här bilden skulle troligtvis se bäst ut på ~ 65% kvalitet vilket skulle minska bildstorleken med nästan 100K. För att bestämma de bästa inställningarna som ska användas för en JPEG, minska sänkningen långsamt tills du kan börja se att bildkvaliteten verkligen försämras. Flytta sedan kvaliteten upp 5-10% eller så.
Vi vet att denna JPG ser anständigt ut på webben; Låt oss titta på några filstorlek / kvalitetsjämförelser för de andra formaten:
GIF resulterar i en 63,77K filstorlek och en hemskt snygg bild.
PNG8 resulterar i en filstorlek på 53,52K på grund av de mer avancerade komprimeringsmetoderna, men ser ut som GIF.
PNG24 resulterar i en filstorlek på 253,9 kk och ser nära originalet men är inte värt den stora filstorleken.
Det bästa möjliga alternativet för denna typ av bild är JPEG vid ~ 65% kvalitet; liten filstorlek (39,77K) med mycket liten visuell kvalitetsförlust.
Som du kan se nedan använder bilden inte varierande färger eller toner, utan i stället soliga färger. Den här bilden är 5.72K (GIF) och använder totalt 8 färger. Detta gör GIF och PNG8 bra format för linjekonst, enkla färglogotyper etc. PNG8 skulle vara ett bättre val här, eftersom det resulterar i en mindre filstorlek (3.54K) på grund av den bättre komprimeringsmetoden som den använder.
När du försöker spara en GIF, som ovanstående bild, som en JPEG kan det resultera i pixelering eller bildförvrängning. Det kommer alltid att resultera i mycket större filstorlekar också när du arbetar med fotografering och andra rika bilder. Bilden nedan är inställd på maximal komprimering och resulterar i en filstorlek på nästan 8K för JPEG vs 5,72K för GIF och 3,54K för PNG8.
Till skillnad från JPEG och PNG24 tillåter GIF och PNG8 att du väljer hur många färger som kan användas (upp till 256). När det gäller bilder som logotyper och enkel linjekonst kan du uppnå en mindre filstorlek genom att välja färre färger. Var försiktig så att du inte väljer för få färger men eftersom det kan göra bilden så mycket värre.
Bilden nedan är en PNG8 med öppenhet (GIF ser likadant ut) som det ser ut i Photoshop. När du använder transparens med GIF eller PNG8, vill du ställa in bildens matt i vilken färg bakgrunden kommer att vara - för bättre blandning och en renare bild. Som tidigare nämnts beror detta på att GIF inte stöder alfanumerisk genomskinlighet och Photoshop stöder inte alfa-genomskinlighet med PNG8-formatet trots att det stöder det (Redigera - det har sedan fixats i nya versioner av Photoshop).
Med tanke på fyrverkerier kan vi använda Alpha Transparency med PNG8-formatet (C'mon Photoshop!). Som du kan se i bilden nedan, är den svarta gradienten fortfarande begränsad i variationen i tonen som gör att lutningen ser lite hakig ut. Det fantastiska med att använda alfa-transparens med PNG8 får du fortfarande den lilla filstorleken, men kanterna smälter jämnt och även små gradienter ser bra ut.
En annan stor fördel med PNG8-formatet är att IE6 stöder användningen av alfa-genomskinlighet med det nationella! Det betyder att för enkla bilder som behöver alfabetisk genomskinlighet (skuggor, logotyper etc.) behöver du inte hacka IE6 när du använder PNG8 och alfa genomskinlighet!
Tyvärr kan du inte spara en bild som PNG8 med alpha-genomskinlighet i Photoshop så du måste hoppa in i Fireworks för att göra det här.
I optimeringspallen väljer du PNG8-formatet med alfabetisk genomskinlighet och klickar sedan på "Rebuild" i nedre högra hörnet.
Du behöver inte välja en matt färg och du kan justera antalet färger för att passa dina behov och för att minska filstorleken. I exemplet till höger har jag sparat dessa inställningar som "PNG8 Alpha-T" så att jag inte behöver återvala varje alternativ varje gång jag vill spara en PNG8-bild med alfa-genomskinlighet.
Det handlar om allt som finns till det!
Att använda PNG24 är i princip samma idé som att använda GIF eller PNG8, förutom att det kommer att resultera i en större filstorlek eftersom den stöder ett mycket större utbud av färgvariationer. Om du har bilder med mer komplexa gradienter som behöver transparens eller större färgdjup är PNG24 det bästa valet. Tyvärr stöder IE6 inte PNG24 nationellt; så du måste "hacka" den för att fungera ordentligt.
PNG24 är bra i de flesta fall där du behöver transparens - de är mycket större i filstorlek, men fungerar bra i fall som brandlogotyper där kvalitet är viktig och du inte vill använda ett lossyformat.
Det här är ett relativt helt nytt format, tillkännagav bara några veckor sedan av Google själv. Från deras pressmeddelande:
"För att förbättra komprimeringen som JPEG tillhandahåller använde vi en bildkompressor baserat på VP8-koden som Google öppnade i maj 2010. Vi tillämpade teknikerna från VP8-video-inramningskodning för att trycka på kuvertet i stillbildskodning. anpassade en mycket lätt behållare baserad på RIFF. Även om detta behållarformat bidrar med en minimal kostnad på endast 20 byte per bild, är det utökat för att tillåta författare att spara metadata de skulle vilja lagra.
Medan fördelarna med ett VP8-baserat bildformat var tydliga i teorin, behövde vi testa dem i den verkliga världen. För att mäta effektiviteten i våra ansträngningar valde vi slumpmässigt cirka 1 000 000 bilder från webben (mestadels JPEG och vissa PNG och GIF) och kodade dem igen till WebP utan märkbart komprometterande visuell kvalitet. Detta resulterade i en genomsnittlig minskning av filstorleken med 39%. Vi förväntar oss att utvecklarna i praktiken kommer att uppnå ännu bättre filstorleksminskning med WebP när man börjar från en okomprimerad bild. "
Målet är enkelt: att påskynda bilder på webben med hjälp av modernare algoritmer. Frågan är detta: Vilje ska antas? Google är ett massivt företag med viss verklig kraft för att driva det här formatet till massorna, men som vi har sett med några av dess produkter (jag tittar på dig Wave!) Kan även bra idéer falla platt.
"Skalbar vektorgrafik" är ett format som aldrig riktigt fångats på som en mycket använd bildtyp. Tanken bakom detta format är att tillåta "vektorgrafik" på webben. Formatet använder XML som grund för att beskriva en 2D-bild på webben. Browsersupport för SVG är inkonsekvent, men om du verkligen vill inkludera skalbar grafik är det värt att läsa upp i det här formatet.
På din fritid uppmuntrar jag dig att gräva lite djupare i dessa bildformat och allt de har att erbjuda. Du lär dig mycket och vet exakt vad du kan göra med dessa bildformat eller vilken som ska användas för varje situation. Värdet på superlilla filstorlekar för bilder verkar passera eftersom bredband expanderar över internet men hastighet kommer alltid att vara en användbar webbplatskaraktäristik och förstå dessa bildformat är det första steget för att optimera dina egna bilder på webben.
Om du har några frågor eller kommentarer, skriv gärna dem nedan!
Accentsconagua