Exempel
Exempel på en bild och hur srcset och sizes används som attribut. Bildinladdningen bör även kompletteras med lazy-loading.
För tydligare översikt och exempel på bildformat se: Riktlinjer för bildformat på 1177.
Designspecifikation
Det finns flera bildstorlekar att använda i plattformen och vissa kan ligga utfallande för att skapa mer dynamik i texten. Bildblocket innehåller en bild eller illustration, bildtext samt kan ha funktionalitet som tex. bildförstoring.
Bildformatet rekommenderas ha proportionerna 3:2 (landscape). Bilder på artikelsidor finns i olika storlekar.
Bildstorlekarna som är gemensamma för tjänsterna är:
• Bredd 620 px (valfri höjd)
• Bredd 300 px (valfri höjd)
• Bredd 193 px (valfri höjd)
De två mindre formaten (300 och 193) kan även vara högerställda.
För 1177.se (dvs inspiration för invånare) så finns det ytterligare två bildstorlekar:
• Huvudbild 833x555 px
(fasta proportioner).
Används som omslagsbild
till en artikel.
• Utfallande 407 px (valfri höjd).
Även formaten 300 px och 193 px används för utfallande bilder på 1177.se.
Det finns även funktionalitet för att dölja känsliga bilder.
Do’s and Don’ts
-
Tillgänglighet
Se till att bilder som bär på någon form av information kan beskrivas för användare med skärmläsare. Är det icke-informativa/dekorativa bilder så kan de lämnas tomt (alt=””).
Research på komponenten
-
Relaterade resurser/komponenter
Status
Status | FÄRDIG VALIDERAD |
|---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |