_ 1.8 Bild

Det finns två huvudtyper av bildformat:

- Bitmappade
- Vektorbaserade

På webben används mest bitmappade format och denna uppgift introducerar till dessa. Vektorbaserade format tas upp i uppgift [4.1 Vektorgrafik med SVG, 05_ass/ip3/4/4.1.txt].

En bitmappat bild består av ett rutnät av punkter där varje punkt är ett tal som anger färgen på punkten. Detta fungerar bra så länge man inte förstorar bilden alltför mycket eftersom bilden då blir pixlig. Bitmappade bildformat för webben är indelade i två huvudkategorier:

1. De format som komprimerar bilden utan att information försvinner (£icke förstörande kompression£):

- §PNG§
- §GIF§
- §Moving-GIF§ (flera §GIF§-bilder som tillsammans blir en animation)

Till detta format hör begreppen:

- Transparens (engelska: transparency)
- Sammanflätning (engelska: interlacing) vilket används för att få en snabb första bild under hämtning av den fullständiga bilden
- Bitdjup (engelska: bit depth) vilket påverkar bildfilens storlek

2. De format som komprimerar bilden så att information försvinner (£förstörande kompression£):

- §JPEG§

Till detta format hör begreppen:

- Progressivitet (engelska: progressivity) vilket används för att få en snabb första bild under hämtning av den fullständiga bilden
- Komprimeringsgrad (engelska: compression ratio) vilket påverkar bildfilens storlek

I denna uppgift tittar vi på:

= Hur man kan ändra dessa bildvariabler och hur det påverkar kvaliteten och nerladdningshastigheten på bilden
= Vilka HTML-taggar som hör till bilder

__ Uppgift

Använd ett ritprogram för att £anpassa£ två redan existerande bilder (på tex en själv som passar in på webbplatsen):

= Bild 1 ska ha ett format som använder £icke förstörande kompression£:
-- Bild 1 variant 1: Anpassad för datorer med passande värden för transparens, sammanflätning och bitdjup
-- Bild 1 variant 2: Anpassad för mobiler med passande värden för transparens, sammanflätning och bitdjup
= Bild 2 ska ha ett format som använder £förstörande kompression£:
-- Bild 2 variant 1: Anpassad för datorer med passande värden för progressivitet och komprimeringsgrad
-- Bild 2 variant 2: Anpassad för mobiler med passande värden för progressivitet och komprimeringsgrad

Lägg bilderna i passande HTML-dokument (inget ska göras i §index.html§). Använd följande taggar för respektive bild (dator och mobil):

- £§picture§£
- £§source§£
- £§img§£
- £§figure§£ och £§figcaption§£

Senare i uppgift [2.1 Layout, 05_ass/ip3/2/2.1.txt] gör vi hela webbplatsen responsiv.

Varje HTML-dokument ska följa kraven under sidan [Krav, 05_ass/requirements/ip3.txt].

__ Exempel

Inget exempel ges.

__ Tips

Taggarna:

- £§figure§£: Ska innehålla fristående innehåll, exempelvis illustrationer, diagram, fotografier, kodlistningar osv. Innehållet ska vara relaterat till huvudflödet men dess position ska vara oberoende av detta och om det tas bort så ska det inte påverka flödet i dokumentet.
- £§figcaption§£: Ska innehålla en rubrik till §figure§-elementet. Elementet kan placeras som det första eller sista barnet fill §figure§-elementet.

Tips GIMP £icke förstörande kompression£ (exempelvis §PNG§ och §GIF§):

- Transparens: §Lager§ / §Transparens§ / §Lägg till alfakanal§
- Sammanflätning: §Arkiv§ / §Exportera som...§ / kryssa i §Fläta§ när dialog-rutan visas:

[05_ass/ip3/1/1.8/dialog1.png, GIMP fläta]

- Bitdjup:
== §Bild§ / §Läge§ / §RGB§
== §Bild§ / §Precision§ / <värde>

Tips GIMP £förstörande kompression£ (exempelvis §JPEG§):

- Progressivitet: §Arkiv§ / §Exportera som...§ / kryssa i §Optimera§ och §Progressiv§ (under §Avancerade inställningar§) när dialog-rutan visas:

[05_ass/ip3/1/1.8/dialog2.png, GIMP progressiv]

- Storlek: §Bild§ / §Skala bild§

Titta gärna på morfning där man kan få mjuka övergångar mellan två bilder. I de flesta verktyg börjar man med att placera ut en mängd korrelerade punkter i två bilder (här Pierre och Mitra):

[05_ass/ip3/1/1.8/morphing/pwmw_pgm.gif, Morfning referenspunkter]

Sedan kan verktyget skapa en animation som visar övergången:

[05_ass/ip3/1/1.8/morphing/pwmw.gif, Morfning]

Använd exempelvis verktyget [Morpheus, http://www.morpheussoftware.net/] för Windows eller Gimp. Se vidare [Wikipedia: Morphing, http://en.wikipedia.org/wiki/Morphing].

__ Hjälp

~ 05_ass/help/01.txt

>
[Klicka här för hjälp, helper.dsv@gmail.com, Webbutv I: 1.8 Bild: http://people.dsv.su.se/~pierre/i/i.cgi?href=05_ass/ip3/1.8.txt] ½===system_tutoring_message===½
<

~ 05_ass/help/02.txt