Bilder

Huvudbild är den bild som är placerad längst upp till höger på en innehållssida och som också används som puffbild om ingen annan puffbild har angets.

Så här lägger du in en Huvudbild

• I redigeringsläget klickar du på länken Click here to add media under rubriken Bild, sedan väljer du den bild du vill använda som huvudbild.
• När du valt din bild klickar du på rullistan vid rubriken Bildstorlek och väljer Extern - Huvudbild, innehållssida i listan.
• I fältet till höger väljer ändrar du bildens beskärning genom att ta tag i någon av i kanterna på rutan för att ändra storlek. Du kan också flytta rutan till den beskärning av bilden du vill använda genom att dra och släppa inom rutan. Det du ser inom rutan är vad som kommer att visas på sidan.
• När du är klar klickar du på knappen Använd denna fil.

Puffbild är den bild som används för puffar som nyheter och länkpuffar. Om ingen puffbild har angetts används den underliggande sidans huvudbild. Om ingen huvudbild finns på den underliggande sidan används en förinställd ikon i stället.

Så här lägger du in en Puffbild

• I redigeringsläget klickar du på fliken Puffinnehåll. Klicka på länken Click here to add media under rubriken Puffbild. Välj den bild du vill använda som puffbild.
• När du valt din bild klickar du på rullistan vid rubriken Bildstorlek och väljer Extern - Puffbild i listan.
• I fältet till höger väljer ändrar du bildens beskärning genom att ta tag i någon av i kanterna på rutan för att ändra storlek. Du kan också flytta rutan till den beskärning av bilden du vill använda genom att dra och släppa inom rutan. Det du ser inom rutan är vad som kommer att visas på sidan.
• När du är klar klickar du på knappen Använd denna fil.

Textbild är en bild som placeras i löptext, mellan två stycken. I första hand ska en huvudbild användas, men det kan finnas tillfällen där texten behöver kompletteras eller förtydligas med en textbild.

Det finns två sätt att lägga in textbild på

1. Lägga in en bild direkt i brödtextfältet som då får skarpa kanter.
2. Lägga in en bild med böj. Den bör användas när bilden ska ligga längst ner på sidan, som ett avslut på ditt innehåll.

Viktigt att tänka på

• En textbild behöver inte ha några bestämda bildproportioner utan kan beskäras fritt.
• En textbild blir inte bredare än en textrad.
• Viktigt att komma ihåg är att en textbild som är lång gör att själva sidan också blir längre vilket kan göra att läsbarheten samt användarupplevelsen blir sämre. Det kan också göra att användaren missar text som finns under den långa bilden.

Så här lägger du in en textbild i brödtextfältet

• I redigeringsläget, gör först en tom rad (ett nytt stycke) i texten där du vill placera din bild. Sätt markören vid i den tomma raden.
• Klicka på Mediaflow-ikonen i verktygsmenyn i fältet Innehåll. Sedan väljer du den bild du vill använda som textbild.
• När du valt din bild klickar du på rullistan vid rubriken Bildstorlek. Här kan du antingen välja beskära bilden fritt eller välja Extern - Textbild, innehållssida om du vill använda ett förbestämt bildförhållande (samma bildförhållande som Puffbild, 12:7).
• I fältet till höger väljer ändrar du bildens beskärning genom att ta tag i någon av i kanterna på rutan för att ändra storlek. Du kan också flytta rutan till den beskärning av bilden du vill använda genom att dra och släppa inom rutan. Det du ser inom rutan är vad som kommer att visas på sidan.
• När du är klar klickar på på knappen Använd denna fil.

Så här lägger du in en textbild med böj

• En textbild med böj placeras in med ett block, och hamnar generellt längst ned bland det redaktionella innehållet på sidan.
• För att lägga en textbild med böj skapar du ett nytt block och väljer sedan blocktypen Bild. I kryssrutan kan du välja om bilden ska vara bred eller inte.
• Här nedan är en textbild med vanlig bredd, samt en textbild som är ikryssad att vara bred.
• Klicka på länken Click here to add media under rubriken Bild, sedan väljer du den bild du vill använda som textbild.
• När du valt din bild klickar du på rullistan vid rubriken Bildstorlek. Här kan du i listan antingen välja beskära bilden fritt eller välja Extern - Textbild, innehållssida om du vill använda ett förbestämt bildförhållande (samma bildförhållande som Puffbild, 12:7).
• I fältet till höger väljer ändrar du bildens beskärning genom att ta tag i någon av i kanterna på rutan för att ändra storlek. Du kan också flytta rutan till den beskärning av bilden du vill använda genom att dra och släppa inom rutan. Det du ser inom rutan är vad som kommer att visas på sidan.
• När du är klar klickar du på knappen Använd denna fil.

En bildtext ger kompletterande uppgifter till bilden genom att till exempel berätta vilka som är med på den och information om upphovsrätt.

Så här skriver du en bildtext

• Förklara varför bilden visas i just detta sammanhang.
• Berätta vem som har tagit bilden, eller var den kommer ifrån.
• En bildtext kan du också använda för att kunna hänvisa till den i texten.

Så här skapar du en bildtext – bildblock

• När du skapat ett bildblock har du två fält för att fylla i bildtext respektive fotograf för bilden. Det är inte obligatoriskt att fylla i något av fälten eller båda fälten samtidigt.
  
• Efter du publicerat din bild ser du bildtexten placerad under bilden på sidan.

Så här skapar du en bildtext – textbild

• Har du publicerat en bild i din text mellan två stycken behöver du markera bilden och högerklicka för att få upp inställningar för bilden.
  
• Kryssa för alternativet Visa bildtext.
  
• Texten till bilden hamnar direkt under bilden.

Bilder behöver ha ett textalternativ, även kallat alt-text, för att göra dem tillgängliga. Det är för att användare som får innehållet uppläst eller för användare som stängt av visning av bilder också ska kunna ta del av vad bilden föreställer.

Så här skriver du en alt-text

• Alt-texten ska fungera som en ersättning till bilden. Berätta vad bilden visar och nämn viktiga detaljer. Ett tips är att berätta högt för dig själva vad bilden visar för att komma fram till rätt typ av text.
• Du kan behöva anpassa textalternativet till eventuell bildtext så att de kompletterar varandra och inte säger samma sak.

Så här skapar du en alt-text

• Efter du lagt in en bild i Mediaflow klickar du på fliken Indexering som finns i fältet till höger.
• Inom den fliken finns en ruta som heter Alt-text. Skriv din alt-text utifrån riktlinjerna ovan.
  
• När du är klar klickar du antingen på en ny flik bredvid Indexering eller på en annan bild för att spara dina ändringar direkt.
• När du hämtar vald bild i Optimizely följer alt-texten med varje gång du hämtar bilden.

Om en bild saknar alt-text från Mediaflow, eller om du vill ändra en befintlig alt-text

Om en bild saknar en alt-text när du hämtar den från Mediaflow så behöver du skriva en själv. Du kan antingen gå till bilden i Mediaflow och skriva alt-texten där så det alltid finns en alt-text (se instruktioner ovan).

Du kan annars skriva in en ny alt-text, eller ändra befintlig alt-text efter du hämtat din bild från Mediaflow men innan du klickat på knappen Använd denna fil. Alt-texten blir då endast för den bilden du valt att använda.

Vid beställning av foton behöver du endast beställa det i ett bildmått eftersom all beskärning av bilden görs i Optimizely. Fotot ska även ha nedan inställningar:

• Ett mått på minst 1500 pixlar på fotots kortaste sida
• Fotots upplösning ska vara minst 300 pixlar/tum (DPI/PPI)
• Fotot ska ha färgprofil Adobe RGB (1998) inbäddat i filen
• Fotot ska levereras i JPG-format som är så lite komprimerat som möjligt.

Dessa format och inställningar gör att vi kan använda fotot i både tryck samt på webb.

Vid beställning av illustrationer och grafik ska bilden ha nedan mått och inställningar:

• Bilden ska helst levereras i EPS-format tillsammans med en kopia i PNG-format
• Om inte bilden kan levereras i EPS-format så ska den leveras i PNG-format
• Bilden i PNG-format ska ha ett mått på minst 1500 på bildens kortaste sida samt ha transparent bakgrund
• Om bilden även ska användas till tryck så ska en RGB-version (för skärmar) samt en CMYK-version (för tryck) levereras
• Bilden i RGB-version (för skärmar) ska ha färgprofil sRGB IEC61966-2.1 alternativt Adobe RGB (1998) inbäddat i filen
• Bilden i CMYK-version (för tryck) ska ha färgprofil Coated FOGRA39 (ISO 12647-2:2004) inbäddat i filen.

Dessa format och inställningar gör att vi kan använda illustrationen och grafiken i både tryck samt på webb.