WEBBUTVECKLING
Bilder
Bildformat Kurskod: WEBWEU01
Kursmål: ”Bilder och media med alternativa format, optimering och tillgänglighet.”
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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).
WEBBUTVECKLING
Bilder
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).
WEBBUTVECKLING
Bilder
Bildformat - .png GIF-bilder kan animeras, dvs. vara rörliga. En stor nackdel med GIF- bilder ä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).
WEBBUTVECKLING
Bilder
Bildformat - .png GIF-bilder kan animeras, dvs. vara rörliga. En stor nackdel med GIF- bilder ä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).
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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.
WEBBUTVECKLING
Bilder
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).
WEBBUTVECKLING
Bilder
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).
WEBBUTVECKLING
Bilder
Bilder 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
WEBBUTVECKLING
Bilder
Bilder 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 />
WEBBUTVECKLING
Bilder
Bilder 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:
WEBBUTVECKLING
Bilder
Bilder 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:
WEBBUTVECKLING
Bilder
Bilder i HTML-dokument Kod och resultat:
WEBBUTVECKLING
Bilder
Bilder 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>
WEBBUTVECKLING
Bilder
Bilder i HTML-dokument Kod och resultat:
WEBBUTVECKLING
Bilder
Bilder i HTML-dokument Kod och resultat:
WEBBUTVECKLING
Bilder
Bilder i HTML-dokument Kod och resultat:
WEBBUTVECKLING
Bilder
Bilder 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
WEBBUTVECKLING
Bilder
Bilder 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 Mormor
WEBBUTVECKLING
Bilder
Bilder 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
WEBBUTVECKLING
Bilder
Bilder 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
WEBBUTVECKLING
Bilder
Bilder 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
WEBBUTVECKLING
Bilder
Bilder 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
220 pixlar
WEBBUTVECKLING
Bilder
Bilder 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
220 pixlar
400
WEBBUTVECKLING
Bilder
Bilder 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
220 pixlar
400 pixlar
WEBBUTVECKLING
Bilder
Bilder 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
100 pixlar
<img src=”mormor.jpg” height=”100”
width=”220” alt=”Mormor” />
Mormor
WEBBUTVECKLING
Bilder
Bildformat - sammanfattning
WEBBUTVECKLING
Bilder
Bildformat - sammanfattning Bildformat
WEBBUTVECKLING
Bilder
Bildformat - sammanfattning Bildformat
Upplösning
WEBBUTVECKLING
Bilder
Bildformat - sammanfattning
Bildformat Upplösning
Tagg och attribut
WEBBUTVECKLING
Bilder
Bildformat - sammanfattning
Bildformat Upplösning
Tagg och attribut .jpg - .png -gif
ppi - pixlar/tum
<img />
WEBBUTVECKLING
Tack.
