Bilden ovan har förvisso inget med innehållet i den här artikeln att göra, men den illustrerar hur man lätt och enkelt kan skapa ett intresse hos läsaren genom att börja med en stor, tydlig – och om man vill – färgglad bild. Självklart bör bilden vara relevant för texten på något sätt, så försök att inte sväva ut för mycket. Den här texten undantagen.

Men det är inte bara i början av en text som bilder hör hemma. Poster av det lite längre slaget kan även må bra av lite pauser här och där för att inte göra läsningen så tung, och detta gör man enklast med just bilder. Som här.

Hur man sedan väljer att infoga bilden är helt och hållet personligt, med den lilla reservationen att det helst ska fungera med texten rent estetiskt också. Något vi kan titta närmare på nedan.

Det behöver inte alltid vara en perfekt skuren bild som täcker bloggens bredd, utan här kan man vara finurlig och experimentera för lite mer udda eller smakfulla alternativ. Ett exempel kan vara att lägga in bilden i texten utan att göra ett definitivt bryt.

Genom att infoga fotot exempelvis till höger mitt i texten kan den istället för att kapa allting bara ge innehållet lite luft. Man kan också, i den mån kunskap och rätt mjukvara finns, piffa upp bilden en aning. Kanske ge den en klassisk polaroidram och lite skugga för mer djup? Men det fungerar givetvis lika bra utan effekter.

Vad gäller bildernas storlek finns där inga konkreta regler, utan det är som med en väl indelad text. Ser det bra ut så är det nog så också. Däremot finns det så klart personliga preferenser där alla kanske inte alltid tycker allt är snyggt, men det handlar givetvis om vad du själv vill ha.

Du kan till exempel bredda bilden så att den är större än texten för att få den att sticka ut mer, eller så kan du förminska den och centrera för att ge ett mer naturligt bryt i texten tillsammans med lite extra luft, som nedan.

De enda egentliga fällorna man bör se upp med är de designmässiga valen. Text mår sällan bra av bilder som är felplacerade, men det är heller inte svårare än vad man gör det till. Försök att hålla ett jämnt flöde där bilderna ligger i synk med texten och undvik att vänster- och högerjustera dem ifall de är för små och ska ligga på egna rader. Kom också ihåg att inte variera alltför mycket. Den här texten visar endast en rad olika exempel och är därför inte särskilt tilltalande rent layoutmässigt. Det blir lätt lite rörigt och osammanhängande om flera bilder presenteras på olika vis.

Testa dig fram till vad du tycker passar just din post bäst, och glöm inte att du självklart både kan och bör förhandsgrandska innan du trycker på Publicera.

Det enda du behöver göra är att registrera dig, och välja BLOG som bildtyp, den kostar 0 kr. Kom ihåg att ange fotograf och bildbyrå enligt instruktionerna bara, annars Pix Gallery sura på dig!

Du kan inte ta vilken bild som helst på Flickr, men väl de som går under Creative Commons-licenserna. Dessa olika licenser (det är flera) betyder att andra får använda dina bilder, men måste i regel ge dig lämplig kreditering och länk. Till den här posten har jag exempelvis använt en Creative Commons Attribution-licensierad bild, och mycket riktigt så länkar jag till fotografen/bilden längst ned.

Andra Creative Commons-licenser inkluderar Non-Commercial, vilken betyder att du inte får använda bilden för kommersiella syften. Läs mer om de olika licenserna här, och tänk efter vilka som är okej för just ditt bruk på din blog.

Klicka på All Sizes för flera olika bildstorlekar

Det bästa av allt är att det finns en hel del bra foton som är licensierade under Creative Commons på Flickr. Faktum är att det rentav finns en hel sida om det, med sökfunktion och allt, vilket gör det lätt för dig att leta efter lämpliga foton. Bläddra dig genom dem, eller sök – det senare fungerar lite sisådär eftersom det beror på hur fotografen har beskrivit sin bild, men ibland hittar man rätt. När du hittat en bild så klickar du lämpligen på All Sizes-ikonen och väljer en storlek som passar dig.

Räcker inte Flickr? Testa Creative Commons egna sökfunktion, vilken inte bara handlar om bilder utan även text och video. Se även den här posten på Mjukvara.se som berättar hur du kan gör ännu fler saker med Flickr.

Det finns inga anledningar till att inte utsmycka en texttung bloggpost med bilder, så gör du inte det redan så är det hög tid att börja nu.

Foto: .Bala på Flickr.

Bilder används helt enkelt för att ge texten lite mer grafisk framtoning, och för att ge läsaren lite andrum. Det enklaste sättet att använda bilder på är att helt enkelt bryta av textflödet med en (mer eller mindre) relevant bild, och sedan fortsätter texten.

Så här:

Det kan dock upplevas som lite påträngande att använda bilder på det här sättet, speciellt om själva texten egentligen inte tjänar på bilder, det finns inget att illustrera eller förklara. Man kan få känslan av att bilden bara slängdes in bara för att man skulle ha en bild, och det kan i viss mån kanske stämma. Skall du bryta textflödet så markant som ovan så är det bäst om bilden verkligen tillför något till texten, en förklaring eller en bild från filmen du skriver om, eller något liknande.

Flytande bilder

En annan variant är att använda lite mindre bilder och låta dem flyta till höger eller vänster, med texten bruten runt dem. Detta kan lätt göras i antingen HTML-kod eller med CSS, eller med bloggplattformen självt. De flesta bloggplattformar låter dig välja var du vill att bilden skall visas, och sedan ser din bloggs tema/mall till att bilden hamnar snyggt i relation till texten. Som bilden här till höger, exempelvis.

Det är generellt lättare att låta en bild flyta till höger än till vänster. Vi är helt enkelt med vana vid raka vänstermarginaler, än högermarginaler, och en bild som flyter till vänster bryter av marginalen. Det kan förstås göras snyggt, men man får ofta pilla lite mer med bildstorlek och liknande.

Bilder som flyter till höger eller vänster med texten bruten omkring sig bör inte vara alltför stora, helst inte bredare än halva den totala bredden på textkolumnen. Så om textkolumnen är 500 pixlar bred så bör din bild inte vara bredare än 250 pixlar, och troligen blir det snyggast runt 200 pixlar eller rentav lite mindre i bredd. På samma sätt så bör bilder som bryter texten helt vara ganska breda, gärna lika breda som textkolumnen, men det går bra med smalare bilder också, i synnerhet om du centrerar dem.

Fixa ditt tema

Kom ihåg syftet med bilderna: de skall lätta upp din text. Se därför till att de kan göra det, genom att ha en design/ett bloggtema som lägger till ordentligt med utrymme mellan bilden och texten. Vill du hacka din CSS själv så föreslår jag minst 10 pixlar i margin, helst 15 eller rentav 20 om din design tillåter det. På den här sajten har vi följande kod för bilder som flyter till höger samt vänster:

[sourcecode language='css']
.alignleft, img.left { float:left; margin: 0 15px 15px 0; }
.alignright, img.right { float:right; margin: 0 0 15px 15px; text-align:right; }
[/sourcecode]

Sno den om du vill, placeras i ditt bloggtemas CSS-fil (style.css i temats mapp om du kör WordPress). Se dock till att undersöka om temat redan har något liknande, då bör du ersätta det med kodsnutten ovan. Gör en säkerhetskopia ifall du inte skulle bli nöjd, så att du lätt kan återställa temat.