WEBBUTVECKLING Bilder

Bildformat Kurskod: WEBWEU01 Kursmål: och media med alternativa format, optimering och tillgänglighet.

Bildformat De bilder som används på webben är vanligtvis JPG, PNG eller GIF-bilder. Anledningen till att man har just dessa tre format är att de klarar lite olika saker.

Bildformat -.jpg JPG-bilder är det vanligaste formatet och används för att fotografier. Om du har en digitalkamera så sparar den antagligen bilderna i JPG-format. Fördelen med JPG är att det blir rätt små bilder (i MB räknat), fast kvaliteten blir bra.

Bildformat -.png PNG-bilder klarar av att visa transparens. Det betyder att du göra göra delar av bilden genomskinliga (tex. ta bort bakgrunden på bilden).

Bildformat -.png GIF-bilder kan animeras, dvs. vara rörliga. En stor nackdel med GIFbilder är att de bara kan innehålla 256 färger, vilket gör att de inte fungerar till foton (som behöver minst tusentals färger för att se bra ut). GIF-bilder kan vara transparenta.

Upplösning En digital bild är uppbyggd av mängder av s.k. bildpunkter eller pixlar. Upplösningen anger hur små punkterna är - ju mindre punkter, ju fler får plats på samma yta. Ju fler som används ju skarpare blir bilden.

Upplösning PPI = Upplösning på bildskärmar. PPI betyder Pixels Per Inch (pixlar per tum) En normal datorskärm brukar visa runt 100-150 ppi, men vissa datorer har mycket högre upplösning än så (MacBook Pro 13 Retina tex. visar 227 ppi).

i HTML-dokument För att ha en bild på en webbsida behöver du för det första ha själva bilden, sedan behöver du berätta att den ska visas på webbsidan. Det gör du genom att använda taggen

i HTML-dokument För att ha en bild på en webbsida behöver du för det första ha själva bilden, sedan behöver du berätta att den ska visas på webbsidan. Det gör du genom att använda taggen <img />

i HTML-dokument <img />-taggen kan ha ett antal olika attribut, men det absolut vanligaste är src, som betyder source ( källa ) och helt enkelt förklarar vad bilden heter = vilken bild som ska användas. Om vi vill använda en bild som heter mormor.jpg så skriver vi följande kod:

i HTML-dokument <img />-taggen kan ha ett antal olika attribut, men det absolut vanligaste är src, som betyder source ( källa ) och helt enkelt förklarar vad bilden heter = vilken bild som ska användas. Om vi vill använda en bild som heter mormor.jpg så skriver vi följande kod: <img src= mormor.jpg />

i HTML-dokument Kod och resultat:

i HTML-dokument Kod och resultat: <html> <head> <title>bild </title> </head> <body> <p>här är <img src= mormor.jpg /> mormor! </p> </body> </html>

i HTML-dokument Kod och resultat:

i HTML-dokument Kod och resultat: Här är mormor!

i HTML-dokument Vanliga attribut till <img /> Förutom src så använder man följande attribut för bilder: alt, height och width Alt-attributet använder man för att skapa en alternativtext till bilden (för tex. synskadade, eller där webbläsaren är inställd för att inte visa bilder). I vissa webbläsare kan texten även synas när man håller markören över bilden.

i HTML-dokument Vanliga attribut till <img /> Förutom src så använder man följande attribut för bilder: alt, height och width Alt-attributet använder man för att skapa en alternativtext till bilden (för tex. synskadade, eller där webbläsaren är inställd för att inte visa bilder). I vissa webbläsare kan texten även synas när man håller markören över bilden. Mormor

i HTML-dokument Vanliga attribut till <img /> Förutom src så använder man följande attribut för bilder: alt, height och width Height och Width betyder som bekant höjd och bredd och berättar som många pixlar bred och hög bilden ska vara när den visas på webbsidan. Anges inte dessa värden i koden så visas bilden i sin originalstorlek. <img src= mormor.jpg height= 400 width= 220 />

i HTML-dokument Vanliga attribut till <img /> 220 pixlar Förutom src så använder man följande attribut för bilder: alt, height och width Height och Width betyder som bekant höjd och bredd och berättar som många pixlar bred och hög bilden ska vara när den visas på webbsidan. Anges inte dessa värden i koden så visas bilden i sin originalstorlek. <img src= mormor.jpg height= 400 width= 220 />

i HTML-dokument Vanliga attribut till <img /> 220 pixlar Förutom src så använder man följande attribut för bilder: alt, height och width Height och Width betyder som bekant höjd och bredd och berättar som många pixlar bred och hög bilden ska vara när den visas på webbsidan. Anges inte dessa värden i koden så visas bilden i sin originalstorlek. 400 <img src= mormor.jpg height= 400 width= 220 />

i HTML-dokument Vanliga attribut till <img /> 220 pixlar Förutom src så använder man följande attribut för bilder: alt, height och width Height och Width betyder som bekant höjd och bredd och berättar som många pixlar bred och hög bilden ska vara när den visas på webbsidan. Anges inte dessa värden i koden så visas bilden i sin originalstorlek. 400 pixlar <img src= mormor.jpg height= 400 width= 220 />

i HTML-dokument Vanliga attribut till <img /> Om man använder fler attribut till samma tagg (i det här fallet <img /> så radar man bara upp dom i taggen. Exempel: 220 pixlar <img src= mormor.jpg height= 100 width= 220 alt= Mormor /> 100 pixlar Mormor

Bildformat - sammanfattning

Bildformat - sammanfattning Bildformat

Bildformat - sammanfattning Bildformat Upplösning

Bildformat - sammanfattning Bildformat Upplösning Tagg och attribut

Bildformat - sammanfattning Bildformat.jpg -.png -gif Upplösning ppi - pixlar/tum Tagg och attribut <img />