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.
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. Animationer och interaktivetet stöds.
(Mer om filformat för bilder finns att läsa i fotokursen här på sajten. Alla format som tas upp där 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.
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
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.)
- 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.
- Ställ muspekaren där du vill att filmen ska visas.
- Gå till panelen Infoga > Bootstrap-komponenter > Responsive Video Embed.
- 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
- Gå till den Youtube-film du vill bädda in.
- Under filmen hittar du en pil och texten Dela. Klicka på den.
- Klicka på Bädda in.
- Kopiera koden som visas.
- Ställ muspekaren i koden på din sida, på den plats där du vill att filmen ska hamna.
- Klistra in koden.
