webForumDet fria alternativet

Width/height på bilder, nödvändigt eller inte?

HTML & CSS

8 svar · 483 visningar · startad av seattlegrunge

Medlem sedan juli 200653 inlägg
Frågan#1

Byggt en sida i XHTML Strict till en kund som kräver superclean kod.
Efter att ha visat arbetet och fått svaret "gediget bygge, clean markup och ren o lättnavigerad css", så fick jag även kommentaren "inte jätteförtjust i bruket att sätta width/height på alla bilder".

Hur ska jag tolka detta?
Hur brukar ni göra med width/height?
Jag har alltid satt width/height på bilder av den gamla anledningen att när en sida laddas, så har bilderna rätt proportioner redan innan bilderna laddats, så att inte bilderna/sidan "hoppar omkring" medan de intar rätt storlek när webbläsaren väl laddat bild med info.

Men hur är det med många bilder av samma storlek som laddas i en lång rad, t ex bilder som loopas ut från en databas? Ska man ta bort width/height-attributen för dessa bilder och sätta en gemensam klass för dessa i stylesheetet och i denna klass deklarera width/height?
Är det i så fall lika effektivt? Vid laddning av sidan (och då antar jag att man även ska tänka på användare av sämre uppkopplingshastighet), slipper man då att bilderna intar rätt storlek först när bilden har laddats?

Hur ska man göra?
Är det god kodning att sätta ut width/height alltid på bilder eller inte?

Självklart pratar jag inte om dynamiska bilder som kanske ska kunna växa på höjden och/eller bredden, där sätter jag ingen width/height.

Medlem sedan jan. 2000978 inlägg
#2

seattlegrunge skrev:

Ska man ta bort width/height-attributen för dessa bilder och sätta en gemensam klass för dessa i stylesheetet och i denna klass deklarera width/height?
Är det i så fall lika effektivt? Vid laddning av sidan (och då antar jag att man även ska tänka på användare av sämre uppkopplingshastighet), slipper man då att bilderna intar rätt storlek först när bilden har laddats?

Jag vet inte, men rent spontant borde det få samma effekt om du lägger storleken i css. Men du kan ju alltid testa! :)
Frågan har tagits upp i en gammal tråd: http://www.webforum.nu/showthread.php?t=142920

Medlem sedan juli 2003270 inlägg
#3

När man validerar en sida i xhtml brukar man få meddelandet att man bör sätta width/height på bilder - har jag för mig...

Medlem sedan maj 200634 inlägg
#4

jag fick ett tips om att lägga bilderna som bakgrunder i css:en och sätt width o height i css:en...
Lycka till!
//Dirre

Medlem sedan aug. 20051 448 inlägg
#5

Dirre - skillnaden mellan detta problem och ditt problem är att dina bilder var bakgrundsbilder och detta inte är det...
personligen tycker jag inte det spelar någon roll om det är höjd&bredd till "innehållsbilder". det finns ju för och nackdelar med både att ha och att inte ha...

Medlem sedan maj 200634 inlägg
#6

så en logo är bakgrundsbild? en fråga bara.. jag vet inte..
d är ni som sitter med kunskaperna jag är bara amatör som försöker hjälpa till lite granna iaf :)

Medlem sedan aug. 20051 448 inlägg
#7

en logga är en del av en layout, så ja, en bakgrundsbild.
det är jättekul att du engagerar dig Dirre :)

Medlem sedan maj 200634 inlägg
#8

ska bara stjäla lite mera av tråden.. så allt som ligger i själv grundlayouten ska vara som bakgrund och bilder så som reklam osv ska ligga som vanliga bilder?

Medlem sedan mars 20041 505 inlägg
#9

Personligen ser jag en logotyp som en sorts rubrik och således en del av innehållet.
Så jag brukar infoga loggan med en vanlig img-tagg, som jag sedan placerar i en h1-tagg.
I img-taggen skriver jag sedan logotypens text som en alternativ text.

<h1><img src="/images/logo.jpg" alt="webForum" /></h1>

Sedan kan du lägga till lite CSS på det här:

h1 img { width:100px; height:50px; }
h1 { color:red; font:20px Verdana,Arial,sans-serif; }

Som du ser så har jag även angivit lite CSS för texten och vissa webbläsare, bland annat Firefox, använder dom egenskaperna på den alternativa texten.

306 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
173 ms — ändringar (db)