Multimedia tutorial - GIF-bilder

GIF är en av de huvudsakliga bildformaten som används på webben.

Denna artikel förklarar i detalj GIF-bildernas egenskaper och användningstekniker.

Förstå bildformat

Både HTML och XHTML har inte fastställt en officiell bildformatstandard. Men populära webbläsare har specifikt definierat vissa bildformat: vanligtvis GIF och JPEG. De flesta multimedieformat kräver specialprogramvara, och varje användare av en webbläsare måste få, installera och korrekt använda dessa program för att kunna se eller höra dessa specialfiler. Därför är det inte förvånande att GIF och JPEG har blivit de faktiska standarderna på webben.

Innan webben uppstod hade dessa två bildformat redan blivit widely använda, och det finns ett stort antal stödprogram som hjälper oss att skapa bilder i dessa format. Men varje format har sina egna fördelar och nackdelar, och vissa webbläsare använder deras egenskaper för att uppnå speciella visningsresultat.

GIF

GIF-formatet står för Bildutbytesformat (Graphics Interchange Format, GIF) och utvecklades ursprungligen av CompuServe för att överföra bilder till sina online-tjänstmedlemmar.

Egenskaperna hos GIF-formatet

GIF-formatet har många egenskaper, varför det är mycket populärt i HTML/XHTML.

Den andra egenskapen hos GIF-formatet är att det använder en speciell komprimeringsteknik som kan minskar storleken på bildfilerna avsevärt, vilket gör det möjligt att överföra dem snabbare på nätet. GIF-komprimering är

Dessutom är det mycket enkelt att implementera animationseffekter i GIF-bilder.

Versioner och färger för GIF-formatet

Trots att GIF-bildfiler alltid har .gif (eller .GIF) som filändelse, finns det faktiskt två GIF-versioner: det ursprungliga GIF87 och GIF89a, som stöder många nya funktioner, inklusive genomskinliga bakgrunder, korslagring och animationer, som är mycket populära bland webbskapare.

Nuvarande populära webbläsare stöder båda dessa GIF-format, de använder samma metod för att mappa 8-bitars pixeldata till en färgtabell, vilket gör att varje bild kan ha högst 256 färger.

De flesta GIF-bilderna har färre färger i praktiken, och vissa specialverktyg (t.ex. Macromedia Fireworks) kan förenkla dessa färger i mer detaljerade bilder. Genom att förenkla färger kan man skapa mindre färgavbilder och stärka pixelredundans, vilket gör att filkomprimeringen ökar och nedladdningshastigheten förbättras.

Trots att GIF-kodade bilder har ett begränsat antal färger är de inte alltid lämpliga, särskilt inte för bilder med en fotografisk noggrannhet. GIF kan användas för att skapa mycket vackra ikoner och bilder med få färger.

Även de mest krävande skaparna väljer GIF

Eftersom de flesta grafiska webbläsare tydligt stöder GIF-formatet, är det nu det mest accepterade bildkodningsformatet på webben. Inline-bilder och externa länkar kan använda detta format. Om du är osäker på vilket bildformat du ska välja, är GIF ett säkert val. Det fungerar nästan alltid.

Tekniker för GIF-bilder

GIF-bilder har tre speciella tekniker: radscanning (interlacing), genomskinlighet (transparency) och animation.

Radscanning

Genom att använda radscanning kan GIF-bilder omedelbart visas på skärmen, istället för att visa dem steg för steg från topp till botten. Vanligtvis är GIF-kodade bilder en sekvens av pixeldata som är ordnade från topp till botten, rad för rad. Därför verkar vanliga GIF-bilder som att man plötsligt drar upp gardinen när de visas på skärmen, medan GIF-bilder med radscanning liknar att man rullar upp en persienn. Detta beror på att pixeldatasekvensen varierar var fjärde rad. Användaren behöver bara använda en fjärdedel av tiden för att ladda och visa ett helt bild, för att kunna se en mycket fullständig bild från topp till botten, även om den är suddig. Denna fjärdedel av bilden är ofta tillräckligt klar, så att användare med långsammare internetanslutning kan avgöra om det är nödvändigt att ladda ner resten av bilden.

Although all graphic browsers can display interlaced GIFs, not all browsers can display the gradually clearer effect of interlacing. Even those browsers that can achieve this effect allow users to suppress this effect by choosing to display the image after it is completely downloaded and decoded. Old browsers always display the image after it is completely downloaded and decoded, so they do not support this effect.

Transparency

Another common effect of GIF images (actually GIF89a format images) is that they can make part of the image transparent, so that the content below the image (usually the browser's window background) can be displayed through the transparent part. Transparent GIF images use a special color in their color map as the background color, so that the background of the display window can be seen through. By carefully cutting the size of the image and choosing a background color close to pure color, transparent images can be made to look as if they are completely embedded in the web page or floating on top of it.

Transparent GIF images are suitable for any graphics that you want to integrate into a document but do not want to look like a square. Transparent GIF logos are very common, such as transparent icons or printed symbols, etc. - any image with an arbitrary natural shape can use this effect. You can also insert transparent inline images into traditional text to display special character symbols.

GIF 图像的透明效果有一个不好的地方，就是如果把它包含在超链接锚（<a>）标签里面而没有去掉它的边框，或者用框架专门将它括起来时，它看上去会十分糟糕。而且其他内容会围绕图像的矩形边框显示，而不是靠近图像的不透明边框。这样的结果就是不必要地把图像隔离出来，或者使网页看上去非常古怪。

animation

GIF89a 格式图像的第三个独特之处是，它可以实现简单的逐帧动画。通过使用特殊的 GIF 动画工具软件，就可以把一系列 GIF 图像放在一个单独的 GIF89a 文件中。浏览器会相继显示文件中的每个图像，就像我们小时候曾经玩过的（甚至画过的）那种通过快速翻页产生动画效果的小册子。在 GIF 文件中，每个图像之间都具有特殊的控制部分，可以用来设置浏览器从头到尾显示整个序列（循环）的次数，每两个图像之间停顿的时间，以及在浏览器显示后面一个图像之前是否从背景中抹去图像空间，等等。通过把这些特性与那些 GIF 通常具有的特性（包括单独的颜色表、透明性、隔行扫描等）结合起来，就可以创造出非常有吸引力而且非常精致的图像。

Anledningen till att enkla GIF-animeringar har stark effekt är också en annan viktig orsak: du behöver inte skriva program specifikt för HTML-dokument för att få animationseffekter. Men det har också en mycket stor nackdel, det är att det är begränsat till mycket små grafik som ikoner eller endast en mycket smal sträcka av webbläsarfönstret: även om du är mycket försiktig och inte upprepade statiska delar i kontinuerliga animationselement, är GIF-animeringar mycket lätt att bli mycket stora. Så om dokumentet innehåller flera animationer, kan det ta mycket lång tid att ladda dessa bilder, vilket kan bli mycket irriterande för användaren. Om det finns något drag som vi verkligen bör behandla med stor omsorg och inte missbruka, är det GIF-animeringar.

Sammanfattning

De enkla GIF-animeringarna har stark effekt av en annan viktig orsak: du behöver inte skriva program specifikt för HTML-dokument för att få animationseffekter. Men det har också en mycket stor brist, det är att det är begränsat till mycket små grafik som ikoner eller endast en mycket smal sträcka av webbläsarfönstret: även om du är mycket försiktig och inte upprepade statiska delar i kontinuerliga animationselement, är GIF-animeringar mycket lätt att bli mycket stora. Så om dokumentet innehåller flera animationer, kan det ta mycket lång tid att ladda dessa bilder, vilket kan bli mycket irriterande för användaren. Om det finns något drag som vi verkligen bör behandla med stor omsorg och inte missbruka, är det GIF-animeringar.