Att placera bilder i designer på webben har alltid varit svårt. Där en webbdesign kan vara flexibel och ha plats för bilder av valfri höjd och bredd kan bilder bara redigeras på två sätt. Båda med sina egna fördelar och nackdelar.
Lägger vi dessutom på responsiv design ökar problematiken ytterligare lite. Bilder är svåra att bara skala om precis hur som helst.
Bildens förhållanden, alltså bildförhållandet
När det kommer till bilder är dess förhållande (aspect ratio) kritiskt. Det är relationen mellan bildens bredd och höjd. Traditionellt med film var bilderna i formatet 3:2. Digitala kompaktkameror och icke-fullformats dSLR-kameror tar istället bilder som är 4:3. Du har med all säkerhet hört talas om widescreen, 16:9, speciellt när vi bytte videoformat och TV-apparater från 4:3 till 16:9 för många år sedan nu.
Dessa relationer mellan bredd och höjd är fasta. Det enda sätt vi kan ändra dem är genom att beskära bilden. Beskära bilder betyder att vi tar bort en del av den.
För att visa en bild i formatet 4:3 på webben måste vi alltså ha den i en ram som också är 4:3.
Bilders förhållanden är inte perfekt för webbdesign
Här är problemet. Dessa traditionella bildförhållanden är inte perfekta för webbdesign. Anledningen till detta är att bildförhållandet på din datorskärm.
Skärmar (idag) är bredare än de är höga, med en rätt stor marginal. De är widescreen. Det betyder att vi har mer plats på bredden när vi designar, än vi har på höjden. Utan att introducera någon typ av scroll.
Även om vi kan scrolla i oändligheten på en webbplats måste vi snabbt visa en översikt för besökaren för att väcka intresse. Detta skapa vissa höjdrestriktioner på banners, headers och andra bildelement som del av en design.
Kort sammanfattat, hur vi designar en effektiv sida står i kontrast till bildernas naturliga bildförhållande.
Ökad komplexitet med responsiv design
För att göra det hela ytterligare lite mer komplicerat måste vi ta hänsyn till responsiv webbdesign. Anledningen till den ökade komplexiteten är en: Vi vet inte, eller styr inte, bildens exakta förhållande mellan bredd och höjd.
När vi skapar en webbdesign som fläckfritt skall anpassas till skärmstorlekar från små, enkelkolumnsdesigner på en smartphone till stora komplexa rutnät på desktop kan vi inte alltid ha kontroll över det exakta förhållandet.
Detta skapar ett problem såklart. Hur skall vi visa våra bilder, med deras perfekta ratio?
Till stor del är svaret på frågan att beskära bilden dynamiskt beroende på storleken på dess ram. För att förtydliga. Vi skapar en bildram som har en viss bredd och/eller höjd. Bilden placeras sidan i ramen och tillåts där att skala upp eller ned efter behov.
Det enda krav vi sätter är att bilden alltid skall fylla ut ramen proportionerligt hela tiden. Aldrig skall något tomrum skapas. Inte heller skall bilden sträckas ut, iväg från dess förhållande.
Ge upp kontrollen över det exakta utseendet
Generellt sett behöver vi ge upp kontrollen över exakt hur bilden kommer att se ut. Det är helt enkelt inte rimligt för alla skärmstorlekar att ha en helt exakt, perfekt miljö för bilder.
Detta betyder att vi måste luta oss mot metoden ovan: Fylla bildramar proportionellt. En lösning som inte är helt problemfri. Det finns bilder där denna metod kommer innebära att du automatiskt beskär ut själva förgrundsföremålet. I dessa fall måste alternativa lösningar hittas.
Sammanfattningsvis dock är den enda hållbara lösningen till snygga bilder på webben att ge upp en stor del av kontrollen över exakt hur bilden kommer visas vid varje given tid. Detta, tillsammans med att välja/ta foton och bilder specifikt för användningsområdet skapar möjlighet för ett vackert bildspråk som samarbetar med ett snyggt formspråk.
