Bilder

Den här guiden förklarar hur bildinställningar fungerar, samt rekommenderade användningsområden för att optimera din webbutik.

För vissa block kan bilden fungera som en bakgrundsbild, medan den för andra visar bilden på vanligt sätt, till exempel om du skapar en banner.

Foton på olika enheter

Det är möjligt att ladda upp 3 olika bilder för 3 olika enheter:

Standard
Bilden som laddas upp under "Standard" kommer att vara huvudbilden. Detta kommer att visas på stationära datorer (PC, Mac).

Tablets
Bilden som laddas upp under "Surfplattor" kommer endast att visas när webbläsaren som används har en storlek som motsvarar en surfplatta.

Mobil
Bilden som laddas upp under "Mobil" visas endast när du besöker webbshoppen via en mobil enhet, eller om du har ett så litet webbläsarfönster att upplösningen motsvarar en mobil enhet.

Tips!

Du kan ladda upp helt olika bilder i olika storlekar, vilket hjälper till att skapa en dynamisk webbplats. Bilden på mobilen kan till exempel ha en annan inramning för att bättre matcha mobila enheter.

Återanvända samma bild

Om du väljer att bara ladda upp en bild under "Standard" kommer både surfplatta och mobil att använda samma bild.
Om du väljer att ladda upp både "Standard" och "Tablet" så är det bilden under "Tablet" som används på mobil upplösning.

Varje upplösning ärver alltså bilden från upplösningen som ligger på nivån ovanför.

Bildstorlekar

För att förbättra laddningstiden för webbplatsen, och i sin tur förbättra SEO, rekommenderas att justera storleken på de olika bilderna.

Exempel:
Du laddar upp en bild till mobilen som ursprungligen är 1200px bred. När du sedan laddar webbplatsen på mobilen måste du ladda hela bilden i 1200px, även om upplösningen på mobilen bara är 400px.

Det rekommenderas därför att ändra storlek för att bättre passa enheten, vilket minskar storleken som behöver laddas.

Så här gör du:

1. Ladda upp bilden du vill använda

2. Klicka på "Redigera storlek"

3. Ange önskad storlek, avsluta med pixlar. Exempel: 400px

Om du bara vill ändra t.ex. bredden kan höjden ställas in så auto att proportionerna behålls.

Lazy load

Inställningen säkerställer att bilder inte laddas förrän avsnittet visas för besökare.

Om bilden till exempel är en banner långt ner på webbplatsen så bör lazy load vara aktiv så att den första laddningen går snabbare och bilden hämtas först när besökare scrollar ner.

Om sektionen och blocket med bilden är placerade högst upp rekommenderas det att ha denna inställning avstängd så att bilden laddas när sidan laddas.

Länk

Lägg till en länk om du vill att ett klick på bilden ska leda till en specifik sida.

Alternativ text

Alternativ text, eller "alt text", är en textbeskrivning som läggs till bilder på webbsidor, i dokument och i sociala medier. Det finns flera viktiga anledningar till varför du bör använda alternativ text på bilder:

• Tillgänglighet:

  • För personer med synnedsättning eller som använder skärmläsare är alt-text viktigt för att förstå innehållet i bilderna. Skärmläsaren läser upp alt-texten så att användaren får en förståelse för vad bilden visar.

  • Detta bidrar till att göra webbplatser och digitalt innehåll mer tillgängligt för alla.

• SEO (Sökmotoroptimering):

  • Sökmotorer kan inte "se" bilder på samma sätt som människor. De använder alt-text för att förstå vad bilderna innehåller.

  • Genom att använda relevanta nyckelord i alt-texten kan du hjälpa till att se till att dina bilder hittas i sökresultaten, särskilt i bildsökningar.

  • Det vill säga, du använder alt-text för att göra bilderna sökbara.

• Fel och saknade foton:

  • Om en bild inte visas på grund av en felaktig eller långsam internetanslutning kommer alt-texten att visas istället. Detta ger användaren en indikation på vad bilden ska visa.

• Web Content Accessibility Guidelines (WCAG):

  • WCAG är den standard som används för att mäta tillgänglighet på webben och således används för att avgöra om din webbplats uppfyller kraven för tillgänglighet på webben. Det innebär att digitala lösningar måste vara tillgängliga för alla, oavsett funktionsförmåga. Detta är en av anledningarna till att alt-text är så viktigt.

Avancerade inställningar

Med anpassade klasser kan du ge ditt block en egen CSS-klass. Detta kan sedan användas i anpassad CSS för att skriva din egen kod som ändrar utseende.

Relaterade artiklar:

• Anpassad CSS