Så här storleksanpassar och placerar du foton i en text- och bildartikel

Innan du flyttar eller ändrar storlek på ett foto bör du bestämma vad läsaren ska få ut av det. Är det evidens som läsaren behöver granska, ett exempel som gör ett avsnitt lättare att föreställa sig eller dekoration? Den skillnaden är mer användbar än att börja med en förinställd bildbredd.

Om fotot förmedlar information som inte finns i texten bör det få tillräckligt med utrymme för att relevanta detaljer ska vara läsbara. En liten bild av ett dokument, ett föremål eller en process kanske inte fyller sin huvudsakliga funktion om läsaren inte kan granska den. Om fotot bara illustrerar en poäng som redan förklaras i texten kan en mindre storlek räcka – eller så behövs bilden inte alls. Det här är en praktisk designregel som utgår från fotots syfte, inte en universell storleksstandard. GOV.UK Design Systems vägledning om bilder säger på liknande sätt att bilder bör fylla ett verkligt användarbehov och fungera som visuellt stöd, medan nödvändig information ska finnas tillgänglig i text. Rekommendationerna är skrivna för offentliga digitala tjänster, så se dem som en användbar referens snarare än en regelbok för alla slags artiklar.

Ett användbart beslutsstöd är att ge varje foto en av tre roller: granska, illustrera eller dekorera. ”Granska” kräver oftast en större visning och en förklaring eller bildtext som riktar uppmärksamheten mot den relevanta detaljen. ”Illustrera” kan ofta visas i måttlig storlek nära stycket som bilden stöder. ”Dekorera” innebär ingen informationsuppgift; överväg att utelämna bilden eller hålla den visuellt diskret. De här kategorierna är ett praktiskt redigeringsverktyg, inte terminologi som föreskrivs av källorna.

Utgå från artikelns textkolumn. Ett foto som sträcker sig över hela kolumnen är lätt att lägga märke till och ger detaljerat innehåll mer utrymme. Använd den lösningen för bilder vars betydelse motiverar det visuella avbrottet. Ett mindre foto som är anpassat till kolumnen kan stödja en närliggande poäng utan att konkurrera med rubriken eller texten. Välj inte storlek enbart för att originalfilen är stor: visningsmåtten bör passa layouten och den information läsarna behöver se.

Här är ett illustrativt beslut, inte en testad mall: tänk dig att en innehållskolumn som är 700 pixlar bred innehåller ett foto av ett föremål i två delar, där skillnaden mellan delarna är central för avsnittet. En visningsbredd nära hela kolumnen kan göra jämförelsen enklare. Om samma foto bara sätter scenen i allmänhet och stycket står för förklaringen kan en smalare visning låta texten behålla tyngdpunkten. Bredden 700 pixlar är bara ett exempel på en kolumnbredd, inte en rekommenderad standard.

När ett foto visas bredvid text på en bred skärm bör de behandlas som en sammanhållen enhet. Ge bilden tillräcklig bredd för att motivet ska framgå och texten tillräckligt med utrymme för att förbli lättläst. Om något av dem blir trångt bör du placera dem ovanpå varandra i stället för att förminska fotot och pressa ihop texten i en smal remsa. På mindre skärmar är en sekvens med en kolumn ofta tydligast: text, sedan tillhörande foto, sedan nästa avsnitt. W3C:s förklaring av WCAG 2.2 Reflow beskriver hur många artikelsidor kan anpassas till en enda kolumn och förklarar målet att undvika rullning i två riktningar för vanligt läsinnehåll. Den tar också upp undantag för innehåll vars betydelse eller användning kräver en tvådimensionell layout. För en artikellayout är poängen att se till att bild och text inte tvingar läsarna att rulla i sidled för att följa texten.

Placera fotot nära meningen eller stycket som förklarar varför det finns där. Om läsarna måste rulla förbi flera orelaterade stycken för att hitta bilden kan kopplingen vara otydlig. På samma sätt kan ett stort foto mitt i ett resonemang avbryta tankegången. En ren placering är oftast efter det första avsnittet som introducerar ämnet, eller precis före ett steg där bilden behövs.

Använd en bildtext när den tillför något konkret: identifierar motivet, pekar ut en detalj eller förklarar varför bilden är viktig. Upprepa inte den omgivande meningen ord för ord i bildtexten. Om fotot behöver granskas noga bör du också ange i den närliggande texten vad läsaren ska titta på; läsaren ska inte behöva dra slutsatser enbart utifrån placeringen.

Förhållandet mellan ett foto och dess text spelar också roll för icke-visuell läsning. W3C:s Images Tutorial säger att informativa bilder behöver textalternativ som förmedlar deras viktigaste information, medan dekorativa bilder kan ha ett tomt textalternativ så att hjälpmedel kan hoppa över dem. W3C:s vägledning om informativa bilder betonar att textalternativet ska uttrycka bildens betydelse i sitt sammanhang, inte bara räkna upp synliga objekt. Som en praktisk kontroll kan du fråga dig: vilken information skulle någon missa om personen inte kunde se fotot? Lägg viktig information i artikeltexten och ge bilden ett lämpligt textalternativ. Om bilden inte tillför något utöver den närliggande texten kan det vara onödigt att upprepa dess beskrivning.

Ett fotos bildförhållande – förhållandet mellan bredd och höjd – påverkar hur mycket utrymme det tar och vad som förblir synligt. Börja med att passa in hela fotot i det valda området. Beskär bara om motivet fortfarande är tydligt och beskärningen inte tar bort detaljer som läsaren behöver. Ett liggande utsnitt kan passa för en bred inledande bild; en stående bild kan fungera bättre i mindre bredd inom kolumnen. Det här är kompositionsval, inte fasta föreskrifter.

Om en beskärning tar bort sammanhang, ändrar det upplevda budskapet eller döljer en detalj som tas upp i artikeln bör du välja en annan beskärning eller visa originalets proportioner. För diagram, etiketter eller dokument bör du kontrollera den slutliga visningsstorleken: text inbäddad i ett foto kan bli för liten för att läsa. GOV.UK:s vägledning om bilder avråder i allmänhet från text i bilder eftersom den kan vara svår att läsa, kopiera, ändra storlek på eller komma åt med en skärmläsare. Om texten är nödvändig för att förstå bilden bör betydelsen även finnas i den närliggande texten.

Förhandsgranska artikeln i bred datorbredd och smal mobilbredd. Kontrollera att fotot inte spiller utanför textkolumnen, täcker innehåll eller gör texten inklämd bredvid sig. Följ läsordningen från rubrik till stycke till foto: när layouten staplas bör bilden fortfarande visas nära avsnittet den förklarar. Kontrollera också bildtexter och viktiga detaljer i bilden i den faktiska visningsstorleken.

På webbsidor är visningsstorlek och filstorlek två separata beslut. En stor källfil kan behövas för en stor visning, men att skicka onödigt stora bildfiler till mindre skärmar kan slösa med data. Googles guide på web.dev om responsiva bilder förklarar hur webbläsare kan välja mellan olika bildstorlekar för olika visningsförhållanden och påpekar att det inte finns något enda rätt antal bildversioner. Det här är implementeringsvägledning för webbpublicering; den avgör inte var bilden hör hemma i artikeln.

Ange funktionen. Ska fotot granskas, illustrera texten eller bara dekorera sidan?

Hitta förankringen. Identifiera avsnittet som introducerar bilden eller bygger vidare på den och placera sedan fotot intill det avsnittet.

Bestäm visningsbredden. Ge viktig evidens tillräckligt med utrymme; låt ett stödjande foto ta mindre plats om detaljerna inte är nödvändiga.

Kontrollera beskärningen. Se till att motivet och allt relevant sammanhang är synligt.

Följ läsordningen högt. Kontrollera på en smal skärm att text och foto fortfarande visas i en logisk ordning och att texten är lättläst.

Beskriv informationen. Lägg till en bildtext när den hjälper och ge bilden ett textalternativ som utgår från dess funktion.

Den praktiska regeln är enkel: låt betydelsen avgöra hur framträdande bilden ska vara, låt den relaterade texten avgöra placeringen och låt förhandsgranskningen på en smal skärm visa om arrangemanget fortfarande fungerar. Om fotot är svårt att förstå i den valda storleken kan du förstora det, förenkla beskärningen eller förklara den relevanta detaljen i texten.