6 kunder online
När priserna sjunker på större bildskärmar så är det också fler användare som får tillgång till skärmar i storleken 17 tum, 19 tum eller 21 tum men många användare har fortfarande bara tillgång till 15 tums eller 17 tums skärmstorlek. En större bildskärmsyta betyder inte att man ser mer av sidans innehåll. Det är istället bildskärmens upplösning som har betydelse för hur mycket information som kan visas på skärmen. Upplösningen på en bildskärm uttrycks i enheten Pixlar. Fler pixlar innebär att mer information kan visas på en given yta.
Standardupplösningen är idag 1024x768 pixlar eller 1280x1024 pixlar och det är förmodligen de upplösningarna du bör inrikta dig på. Tidigare användes bara bildskärmar med bildrör till stationära datorer men idag kan du välja en platt bildskärm (flat screen) som tidigare bara fanns till bärbara datorer. Vissa platta bildskärmar kan också användas till TV-mottagning och storlekar i tum varierar stort. Detta innebär ju att upplösningen på bildskärmarna kommer att variera ännu mera än tidigare. Här är exempel på kombinationer av upplösningar:
Nedan ser du några exempel på hur upplösningen påverkar utseendet på webbplatsen. Notera att bildskärmen ju alltid har sin fasta storlek tex 17-19-21 tum men antalet pixlar som visas i bredd och höjd på den givna ytan kan variera enligt exemplen nedan.
640x480 pixlar
800x600 pixlar
1024x768 pixlar
1280x1024 pixlar
Vad använder du själv för upplösning och vet du hur du gör för att ändra bildskärmsupplösning och antalet färger?
För att ändra dina bildskärmsinställningar gör du så här i Windows:
När du testar dina webbsidor bör du då och då byta upplösning för att se hur det ser ut i andra upplösningar. Ett snabbt sätt att kontrollera så att bredd och höjd räcker till är att ändra storleken på ditt webbläsarfönster. Med hjälp av ett javascript som finns under länken nedan kan du ange olika värden för upplösningen i bredd och höjd för webbläsarfönstret.
Klicka
här för att komma till javascriptet för att ändra
fönsterstorlek 
Här kan du ladda ner Webdesignskolans eget skrivbordsunderlägg (se bilden nedan). Med hjälp av det så kan du lätt ändra storlek på ditt webbläsarfönster för att "simulera" olika bildskärmsupplösningar när du skapar webbsidor. Du behöver då inte byta upplösning på din bildskärm för att kontrollera vad som syns eller inte syns av webbsidan i olika upplösningar men glöm inte att ändå byta upplösning "på riktigt" ibland för att få det rätta intrycket av textstorlekar och grafik mm i den upplösning du anpassar för. För att använda skrivbordsunderlägget placerar du ditt webbläsarfönster i övre vänstra hörnet och drar sedan i fönsterkanten för att förstora eller förminska till de angivna måtten. Underlägget har angivna mått från 640x480 upp till 1600x1280 pixlar. Använd någon av länkarna nedan.
Väntar på nedladdning... |
Bilder på webbsidor är idag snarare regel än undantag. Precis som i andra medier gäller det att göra sidorna grafiskt tilltalande för att attrahera och behålla besökare. Samtidigt är det viktigt att grafiken har en liten lagringsstorlek = filstorlek så att nedladdningen till webbläsaren blir snabb. Ingen tycker om att vänta på webbsidor som är grafiktunga och långsamma. nedan ser du en översikt över vanliga typer av bildformat som du kan använda. Vill du ha mer information om hur du skapar din egen grafik så kan du besöka guiderna om Photoshop » eller Illustrator » De flesta bilder är av typen bitmapp som t innebär att bilden är uppbyggd av pixlar eller punkter (bitmap=punktuppbyggd). Att lagra en bild av den typen kräver mycket lagringsutrymme och långa nedladdningstider i webbläsaren. Därför används lagringsformat som komprimerar filstorleken. Det finns idag i huvudsak två bildformat som kan användas på webbsidor:
Formaten stödjer olika färgdjup dvs hur många färger som kan visas i bilden. |
CompuServe GIF (CompuServe" Graphics Interchange Format) används oftast för att visa dekorfärgsbilder och illustrationer. GIF kan maximalt innehålla 8 Bitars färgdjup = 256 färger och passar oftast bäst till bilder som innehåller mindre än just 256 färger som teckningar, clipart mm. Ger även bra resultat till små fotografier (thumbnails). När du sparar en bild som GIF kan du ange olika egenskaper för bilden:
JPEG (Joint Photographic Experts Group) används oftast för att visa fotografier och andra kontinuerligt tonade bilder.Till skillnad från formatet GIF behåller JPEG all färginformation i RGB-bilder (24 Bitars färgdjup = 16,7 miljoner färger). JPEG använder också en komprimering som effektivt minskar dokumentstorleken genom att identifiera och ta bort data som inte är väsentlig för att visa bilden. När du öppnar en JPEG-bild packas den upp automatiskt. Eftersom information tas bort kallas JPEG-komprimering ibland för förlustgivande (lossy). Detta innebär att när en bild har komprimerats och sedan packats upp igen kommer den inte att vara identisk med den ursprungliga bilden. När du spar en bild i JPEG-format så bestämmer du själv kvaliten, ofta i steg från 0 till 10 där 0 ger en liten filstorlek men också sämsta visningskvalitet. Även JPEG bilder kan laddas ner gradvis som en Interlaced GIF, det kallas då Progressive JPEG.
Utöver de etablerade webformaten ovan så är flera format under utveckling:
Formatet PNG (Portable Network Graphics) utvecklades som ett alternativ till GIF-formatet. Alla programtillverkare som använder GIF får betala licens till upphovsföretaget vilket medfört att ett licensfritt alternativ har varit efterfrågat. PNG bevarar all färginformation (24 Bitars färgdjup = 16,7 miljoner färger) och alla alfa-kanaler i en bild och använder en förlustfri komprimering för att minska dokumentets storlek. När du sparar en bild i PNG-format kan du välja att visa bilden gradvis när den laddas ned. Om du vill göra detta markerar du Adam7 for Interlace. Du kan också välja en filtreringsalgoritm, som används för att förbereda bildinformationen för komprimering. (OBS! PNG stöds inte av äldre webbläsare.)
FlashPix-formatet, utvecklat av Live Picture och Kodak, är anpassat för att öka överföringshastigheten och visningskvalitén av stora och högupplösta bilder. FlashPix-formatet stödjer gråskalor och RGB-färger men inte alfa-kanaler. När du spar i FlashPix-formatet kan du även välja att använda JPEG-komprimering. Idag ägs FlashPix-formatet av organisationen Digital Imaging Group. Tekniken bakom formatet delar upp pixelbaserade bilder i hanterbara delar. Bilden spars i flera delar med olika kvalitet vilket skall göra att det även skall gå att zooma(!) i en bild.
SVG (Scalable Vektor Graphics) är ett helt nytt format för Vektorgrafik (teckningar, illustrationer etc). Det är ännu inte standardiserat som ett webformat men kommer troligen att bli en konkurrent till Macromedias Flash!
De nu gällande bildformaten för webbsidor är alltså bitmapgrafik och den andra typen av grafik kallas för vektorgrafik, det är oftast tecknade bilder och Clipart.
Läs mer om vektor- och Bitmapp-grafik här »
Webbläsarna kan inte visa vektorgrafik utan tilläggsprogram (plugins) ett exempel är Flash. All grafik måste annars sparas som bitmap även om det är illustrationer och inte fotografier. Lagringsstorleken brukar dock bli mindre än för fullfärgsfotografier. Animerad grafik på webbsidor är normalt i formatet GIF och en animering kan vara text som blinkar och då GIF bara stöder 256 färger är det inte så lämpligt till fotografier. Alternativen till rörlig grafik är videoformat eller andra multimediatillägg som Real Player och Flash och då måste användaren ha plugins installerade på sin dator. Här är några exempel på bilder i form av ett foto, en illustration och en animation. Klicka på respektive bild för att se exempel och jämförelse mellan GIF och JPEG:
 Bitmapp-grafik » |
 Vektorgrafik » |
 Animerad grafik » |
Här är en lathund över vilket bildformat du kan välja. Det är endast en rekommendation, vilket format du väljer beror på bildens egenskaper, storlek, antal färger etc. Prova dig fram!
Bilderna och grafiken som du använder på dina webbsidor bör ha en punkttäthet (optisk upplösning) på 72-96 dpi (dots per inch). Detta beror på att bildskärmen till skillnad från tryckta medier bara klarar av att visa mellan 72-96 dpi. Mer information om bild- och grafikhantering hittar du i guiderna om Photoshop »
skriv ut »
till sidans topp
