bilder & filmer


bilder


alternativtexter

Bilder kan ha två funktioner på en webbsida: de kan vara dekoration och de kan ha ett sakinnehåll. Bilder som har något att berätta ska ha alternativtext som förklarar vad bilden innehåller! Blinda och andra användare av talsyntes har rätt att få veta vad bilden föreställer.

Alternativtexten ska i den mån det är möjligt vara ett likvärdigt alternativ till bilden. Det är inte nödvändigtvis så att den ska beskriva vad bilden föreställer - den ska fylla samma funktion. Om bilden används för att navigera till nästa sida ska alternativtexten vara "Nästa sida", inte "Pil som pekar åt höger".

Boken Användbart.se har en riktigt bra sida om alt-texter. Läs den! Eller ännu hellre, läs hela boken. Den finns båda att köpa och att läsa gratis på webben.

Ett gott råd från boken är att tänka att du ska beskriva bilden för någon i telefon. Den beskrivningen är bra att utgå från när du formulerar alt-texten. Men var kortfattad! Max 80 tecken är ett riktmärke. Krävs en längre alternativtext, komplettera med longdesc.

Texten ska avslutas med punkt eller annat skiljetecken för att det ska låta bra när talsyntesen läser upp den.

Du behöver inte skriva in att en bild är en bild eller att den innehåller en länk. Det talar talsyntesen om ändå.

Alla bilder ska inte ha alternativtexter. Finns det inget vettigt att säga om bilden, låt bli. Har du flera liknande bilder på sidan, lägg alternativtext bara på en av dem. Att höra samma beskrivning flera gånger blir bara tjatigt.

filformat för bilder på webben

Det finns mängder av bildformat. Långt ifrån alla är lämpliga på webben. De vanligaste där är JPEG, PNG och GIF, men den sistnämda börjar bli lite föråldrad och används numera mest för enklare animationer. WebP och SVG kommer mer och mer.

 

jpeg (jpg)

Formatet kan hantera många olika färger och är det vanligaste formatet för fotografier. Det går komprimera jpeg-bilder så att filerna blir mindre. Det blir en kvalitetsförlust när man komprimerar, så man får försöka hitta en bra kompromiss mellan filstorlek och bildkvalitet. En måttlig komprimering brukar inte synas mycket, men göra stor skillnad för filstorleken. Det man ska tänka på är att spara ett original innan man komprimerar bilden, för komprimeringen för jpeg är förstörande. Det går aldrig få tillbaka den information som försvunnit i komprimeringen. Det samma gäller om man krymper bilden - gör en kopia först!

JPEG är dock inte lämpligt till bilder med stora enfärgade fält, till exempel logotyper, då det finns risk för ojämnheter, särskilt vid övergången till andra färger.

Exempel på hur fula kanter det kan bli på enfärgade ytor i jpeg.

 

gif

Till logotyper är, eller snarare var, GIF ett vanligt val av filformat för att slippa ojämnheterna vi såg i bildexemplet vid JPEG. GIF-bilder kan dessutom innehålla genomskinliga partier, vilket kan vara en fördel om man vill ha annat än fyrkantiga bilder.

GIF-bilder kan innehålla max 256 färger. För fotografier är det ofta för lite.

GIF-bilder kan animeras. Tänk dig dock för: En webbsida full med hoppande krabater och blinkande stjärnor ser i regel väldigt amatörmössig ut och kan vara riktigt irriterande.

 

png

PNG togs fram som en ersättning för GIF och är också överlägset, i alla fall för stillbilder. PNG kan återge färgerna i fotografier bra, men filerna tenderar att bli större än i JPEG, vilket gör att man inte brukar välja PNG till foton.

PNG är lämpligt även till logotyper och det kan hantera genomskiliga partier, till exempel för bilder som inte är rektangulära. Ibland kan man dock se att det blir en ljus, lite hackig kant när man lägger en sådan bild mpå en färgad bakgrund. Det kan man skippa undan på två sätt:

  • Välja filformatsvarianten PNG-24. Det kan ge en större fil, men tonar kanten mot genomskinligt istället för mot en färg. Man slipper den fula kanten. Tidigare hanterade inte alla webbläsare PNG-24, men det börjar vara ett övergående problem.
  • Vill man ändå använda PNG-8 kan man i samband med exporteringen till PNG välja en mask i samma nyans som ska användas senare som bakgrundsfärg. Då tonas kanterna mot den färgen istället för mot vitt.

 

webp

WebP är ett realitvt nytt format utvecklat av Google som uttalas weppy. Det är optimerat för webben och ger minst 25 procent mindre filstorlek än JPG, PNG och GIF i motsvarande kvalitet. Formatet stöder transparens och animering.

 

svg

SVG är ett vektorgrafikformat, vilket innebär att bilderna är skalbara och därmed kan göras hur stora som helst utan att förlora kvalitet. Används ofta till logotyper, ikoner och liknande bilder. Animatioer och interaktivetet stöds.

 

(Mer om filformat för bilder finns att läsa i fotodelen av sajten. Alla lämpar sig dock inte för webben.)


optimering

Förutom att välja rätt filformat ska man också välja rätt format när det gäller storlek i antal pixlar i bilden. För bilder som ska visas på bildskärmar är upplösnigen helt oväsentlig. Det är bara antalet pixlar som spelar roll. Men då är frågan hur stor en lagom bild är?

Man kan ställa in bredd och höjd både i HTML och CSS, och arbetar du med responsiva webbsidor ska bilderna kunna presenteras i olika storlekar. Gör man bilderna onödigt stora ta de längre tid att ladda och gör av med onödigt stor del av surfpotten för den som har begränsad nedladdning. En lagom stor bild är därför den storlek den som störst kommer att visas i på en responsiv webbplats, och så stor att den är behaglig att titta på om storleken är fast. Bilder som är större än skärmen skapar ofta irritation. Man vill sällan skrolla runt i en bild, utan föredrar att se hela bilden på en gång.

Om du krymper en bild, se till att proportiorna blir rätt så inte bilden blir långsmal eller kort och bred! Tänk också på att göra en kopia först, för pixlar du tagit bort går aldrig få tillbaka.

För att hålla ner filstorleken bör du även komprimera den. Det finns ingen "rätt" komprimeringsgrad, utan man får prova sig fram till vad som verkar vara en lämplig kompromiss mellan kvalitet och filstorlek. Själv väljer jag ofta någonstans mellan 6 och 8 för bilder till webben men ofta skulle det nog funka att komprimera ännu hårdare. Filstorleken blir mycket, mycket mindre om man går ner några snäpp (ex 8) jämfört med högsta kvalitet (12), men få tänker på att det är någon skillnad när de tittar på bilden. Komprimera inte förrän du är färdig med bilden, eftersom den förlorar kvalitet varje gång den sparas om med komprimering.

bakgrundsbilder

Många använder fotografier som bakgrundsbilder på sina sajter. Problemet är att veta hur stor skärm besökaren har. Är bilden mindre än skärmen upprepas den med en ful kant som följd, eller så tar den slut för tidigt. Är bilden för stor i förhållande till skärmen riskerar man att en stor del av bilden faller bort. Det går lösa genom att lägga in JavaScript som känner av hur stor besökarens skärm är och laddar bakgrundsbild i lämplig storlek utifrån det. Tänk på att komrimera bilden så hårt du kan (med acceptabelt resuiltat) i och med att bilderna blir så stora!

En risk med fotografier som bakgrundsbilder är att sidan blir rörig och svårläst. Med ett innehållsrikt fotografi i bakgrunden är det närmast ett krav med färgade plattor bakom texten, eller möjligen halvtransparenta. Tänk på att även personer med nedsatt syn ska kunna läsa texten!

En annan vanlig lösning är att ha en tapetliknande bakgrundsbild. Då sådana mönster upprepar sig är det perfekt om du kan hitta - eller göra - en bild där skarvarna stämmer ihop både i sid- och höjdled. En sådan bild behöver inte alls bli lika tungladdad som en som ska fylla hela skärmen, och den upprepar sig efter det utrymme som finns.

 

 

Bakgrundsbilden anger du i CSS-koden. Det är ofta bra att ange en bakgrundsfärg i liknande nyans också, så texten går att läsa medan bakgrundsbilden laddas. Överväg också att göra fler inställningar, till exempel när det gäller repeat. Vill du till exempel att bilden ska upprepas för den som har en större skärm, och i vilken ledd i så fall? Och vill du att bakgrunden ska ligga still eller följa med när du skrollar? Läs mer på CSS Backgrounds.

body {
background-image: url("bild.jpg");
background-color: #cccccc;
}

Ibland är det bättre att hitta andra lösningar än att använda bilder. Till exempel ser man ofta tonade bilder som används för att få en toning på bakgrunden. Det kan man skapa med kod istället.


skapa din egen bakgrundsbild

Om bilden ska upprepas måste kanterna passa ihop som en mönsterpassad tapet. Det kan tyckas lite klurigt att få till det, men det är faktiskt inte svårt. Hemligheten är att rita den i steg.

Bakgrundsbild

Börja med att skapa en yta av önskad storlek i Photoshop. Jag använde 300 x 200 pixlar i exemplet. Ta gärna en titt på exempelsidan. Tycker du att mönstret återkommer för ofta väljer du en större rityta och vice versa.

Rita det du önskar, men se till att inte rita över kanterna. Det kan underlätta att zooma in när du ritar.

 

När du är nöjd markerar du övre halvan av bilden och klipper ut den (Redigera > Klipp ut). Det är inte så noga att det blir exakt halva bilden.

Skapa ett nytt lager (Lager > Nytt > Lager > OK) och klistra in den utklippta halvan på det (Redigera > Klistra in).

Markera ett lager i taget (klicka på det i Lagerpanelen) och välj Flyttaverktyget. Då går det flytta objektet med piltangenterna eller muspekaren. Dra halvorna på respektive lager så de byter plats. Var noga med att lägga halvorna exakt mot ytterkanterna!

Om det inte går flytta lagret kan det vara låst. I så fall ser du ett hänglås till höger i Lagerpanelen. Klicka på hänglåset så låser det upp sig.

Lägg ihop de båda lagren till ett (markera båda lagren i Lagerpanelen, högerklicka och välj Lägg samman lager).

 

 

Fortsätt rita. Gör sedan likadant igen, men klipp ut vänstra halvan denna gång och låt sidorna byta plats.

Efter att ha lagt ihop dem till ett lager ritar du det sista på bilden.

Nu är din bakgrundsbild färdig. Spara den i ett lämpligt format för webbben, till exempel png, och lägg in den som bakgrundsbild genom att skriva in det i din stilmall.

body {
background-image: url("monster.png");
}


filmer


filformat

Det finns många inställningar att välja när man redigerat en film och ska exportera det färdiga resultatet. Vilka format som är lämpliga styrs av hur filmnen ska användas. Ska filmen användas på en webbsida bör filformatet kunna visas på såväl mobiltelefoner som tablets och datorer med olika operativsystem och programvaror och samtidigt generera små filer.

Du kan se på filformatet som en container där du stoppar in olika delar: bild, ljud och i en del filformat även undertexter. Olika containrar packas på olika sätt och innehåller olika typer av film- och ljudspår.

Placeholder image

Codec, eller kodek som det helst ska kallas på svenska, står för COmpressor/DECompressor, alltså hur innehållet ska packas (komprimeras) och packas upp (dekomprimeras).

Anledningen till att ljud och bild komprimeras är att filerna skulle bli enormt stora annars. Man tar i första hand bort sådant som vi ändå inte ser eller hör, men om filmen komprimeras hårt kan vi även uppleva en kvalitetsförlust.

Det här med filformat är en hel vetenskap och kan upplevas rätt förvirrande. Inte blir det lättare att hålla koll på vad som är vad när en container ibland kan ha samma namn som en kodek. Så vad ska man välja då? Ett tips är MP4 som container och MPEG-4 eller H.264 som kodek. De brukar fungera på olika plattformar.

visa responsiv film på bootstrapsida

(Det finns flera sätt att visa film på webben. Här går vi bara igenom de sätt vi använt i kursen. Läs Adobes hjälptexter eller googla om du vill vet mer.)

  1. Exportera filmen med lämpliga inställningar för webben och lägg in den färdiga filmen i rotmappen eller i lämplig undermapp.
  2. Ställ muspekaren där du vill att filmen ska visas.
  3. Gå till panelen Infoga > Bootstrap-komponenter > Responsive Video Embed.
  4. Byt ut sökvägen till filmen i koden som skapas:

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>

</div>

Det går också välja förhållandet 4by3.

 

bädda in Youtube-film

  1. Gå till den Youtube-film du vill bädda in.
  2. Under filmen hittar du en pil och texten Dela. Klicka på den.
  3. Klicka på Bädda in.
  4. Kopiera koden som visas.
  5. Ställ muspekaren i koden på din sida, på den plats där du vill att filmen ska hamna.
  6. Klistra in koden.

 

Behöver du mer hjälp? Använd dig av den lärarledda studietiden på tisdagar!
Maila eller säg till vad du vill ha hjälp med i förväg, så läraren är förberedd.