---

Hvis jeg v.hj.a. Kompozer indsætter et billede med størrelsen 180x34
pixel på en html-side, så indsætter programmet følgende type kode:
style="width: 180px; height: 34px;
Mit gamle Frontpage indsatte tilsvarende:
width="180" height="34"

Jeg kan ikke få øje på hvilken funktion disse størrelsesangivelser
har, når billeder skal vises i den størrelse de rent faktisk har. (Og
det skal de hos mig.)
Valideringsmæssigt gør det heller ingen forskel om
størrelsesangivelserne er med eller ej.

Har disse størrelsesangivelser et formål? I givet fald: hvilket?

---

On 16-05-2011 14:09, Preben Nielsen wrote:
> Hvis jeg v.hj.a. Kompozer indsætter et billede med størrelsen 180x34
> pixel på en html-side, så indsætter programmet følgende type kode:
> style="width: 180px; height: 34px;
> Mit gamle Frontpage indsatte tilsvarende:
> width="180" height="34"
>
> Jeg kan ikke få øje på hvilken funktion disse størrelsesangivelser
> har, når billeder skal vises i den størrelse de rent faktisk har. (Og
> det skal de hos mig.)
> Valideringsmæssigt gør det heller ingen forskel om
> størrelsesangivelserne er med eller ej.
>
> Har disse størrelsesangivelser et formål? I givet fald: hvilket?

Når en browser skal vise en html-side, indlæser den al tekst, og
indsætter denne. Er forbindelsen til internettet knap så hurtig, vil det
tage længere tid at indlæse billeder.
Hvis browseren ikke får at vide, hvor megen plads den skal afsætte til
et billede, får du typisk det fænomen, at den allerede viste tekst,
hopper og danser rundt på skærmen, indtil biledet er indlæst.

Du oplever fænomenet hvis der er iframes på en side.

Nu er 180x34px jo ikke særlig meget, så angivelse af størrelse kan
springes over. Men gør det alligevel, så vænner du dig til det.

<img src="..." style="...." er jo inline style, deraf forskellen.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Fint. Tak skal du have.

Preben

---

On 16 Maj, 14:09, Preben Nielsen <p...@mail.dk> wrote:
> Hvis jeg v.hj.a. Kompozer indsætter et billede med størrelsen 180x34
> pixel på en html-side, så indsætter programmet følgende type kode:
> style="width: 180px; height: 34px;
> Mit gamle Frontpage indsatte tilsvarende:
> width="180" height="34"
>
> Jeg kan ikke få øje på hvilken funktion disse størrelsesangivelser
> har, når billeder skal vises i den størrelse de rent faktisk har. (Og
> det skal de hos mig.)

Som Karl Erik skriver, har height og width også betydning for
placeholders. Her er det dem for HTML-attributterne, som tages efter
allerførst, så har du den samme width/height i både HTML og CSS, kan
du faktisk droppe den i CSS.

CSS er jo til udseende, men den er allerede sat med HTML-
attributterne. Ingen grund til at gentage sig sev.


F.eks.:

<img src="/billede.jpg" alt="Min hund" width="200" height="250"
style="width: 200px; height: 250px" />

Her er stylen unødvendig.


MVH
Rune Jensen

---

runeofdenmark@hotmail.com sendte dette med sin computer:
> On 16 Maj, 14:09, Preben Nielsen <p...@mail.dk> wrote:
>> Hvis jeg v.hj.a. Kompozer indsætter et billede med størrelsen 180x34
>> pixel på en html-side, så indsætter programmet følgende type kode:
>> style="width: 180px; height: 34px;
>> Mit gamle Frontpage indsatte tilsvarende:
>> width="180" height="34"
>>
>> Jeg kan ikke få øje på hvilken funktion disse størrelsesangivelser
>> har, når billeder skal vises i den størrelse de rent faktisk har. (Og
>> det skal de hos mig.)
>
> Som Karl Erik skriver, har height og width også betydning for
> placeholders. Her er det dem for HTML-attributterne, som tages efter
> allerførst, så har du den samme width/height i både HTML og CSS, kan
> du faktisk droppe den i CSS.
>
> CSS er jo til udseende, men den er allerede sat med HTML-
> attributterne. Ingen grund til at gentage sig sev.
>
>
> F.eks.:
>
> <img src="/billede.jpg" alt="Min hund" width="200" height="250"
> style="width: 200px; height: 250px" />
>
> Her er stylen unødvendig.
>
>
> MVH
> Rune Jensen

På
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG
står at HTML værdierne er til override af eksisterende værdier.
Så skal der bruges nogen værdier, bør det være i CSS'en. De bør dog
ikke stå i HTML'en, men i enten en separat fil der linkes, eller inline
i head.

Jeg bruger i øvrigt aldrig height og width på img (hverken i HTML eller
CSS), men altid den størrelse img jeg vil have vist.
Undtagelserne (og dem er der altid nogen af ) er hvis billedet er
floated i layoutet - så skal det have størrelser - eller hvis jeg kan
risikere at billedet ikke kan læses (reklamer f.eks.) og at dette ville
ødelægge layoutet.

Mener i øvrigt at moderne browsere læser billed størrelsen og starter
hentning af billedet så snart det mødes. Og der er vel ingen på et 27K
tlf-modem i dag...
Jeg har aldrig set tingene flytte sig efterhånden som billeder indlæses
- det har jeg derimod når det tager for lang tid at hente CSS.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den Mon, 16 May 2011 18:22:54 +0200 skrev Birger Sørensen:
> runeofdenmark@hotmail.com sendte dette med sin computer:
>> On 16 Maj, 14:09, Preben Nielsen <p...@mail.dk> wrote:
>>> Hvis jeg v.hj.a. Kompozer indsætter et billede med størrelsen 180x34
>>> pixel på en html-side, så indsætter programmet følgende type kode:
>>> style="width: 180px; height: 34px;
>>> Mit gamle Frontpage indsatte tilsvarende:
>>> width="180" height="34"
>>>
>>> Jeg kan ikke få øje på hvilken funktion disse størrelsesangivelser
>>> har, når billeder skal vises i den størrelse de rent faktisk har. (Og
>>> det skal de hos mig.)
>>
>> Som Karl Erik skriver, har height og width også betydning for
>> placeholders. Her er det dem for HTML-attributterne, som tages efter
>> allerførst, så har du den samme width/height i både HTML og CSS, kan
>> du faktisk droppe den i CSS.
>>
>> CSS er jo til udseende, men den er allerede sat med HTML-
>> attributterne. Ingen grund til at gentage sig sev.
>>
>>
>> F.eks.:
>>
>> <img src="/billede.jpg" alt="Min hund" width="200" height="250"
>> style="width: 200px; height: 250px" />
>>
>> Her er stylen unødvendig.
>
> Mener i øvrigt at moderne browsere læser billed størrelsen og starter
> hentning af billedet så snart det mødes.

Hvilket er for sent, da det er det tidspunkt den skulle være færdig med
at hente billedet.

> Og der er vel ingen på et 27K
> tlf-modem i dag...
> Jeg har aldrig set tingene flytte sig efterhånden som billeder indlæses

Det skyldes formentlig at moderne browsere venter et stykke tid
(i Firefox kan delay indstilles i about:config) med at tegne siden,
hvis billedet ikke er der.

Hvis forbindelsen er hurtig nok til at billedet når at blive hentet
inden for den tid browseren er villig til at vente, når tingene ikke
at hoppe. Så opleves siden bare langsommere end andre sider, hvor man
ikke skal vente.

> - det har jeg derimod når det tager for lang tid at hente CSS.

Det er præcis samme problem og samme resultat.

Mvh
Kent
--
"The Brothers are History"
http://www.gianas-return.de/

---

Kent Friis har bragt dette til os:

>> Mener i øvrigt at moderne browsere læser billed størrelsen og starter
>> hentning af billedet så snart det mødes.
>
> Hvilket er for sent, da det er det tidspunkt den skulle være færdig med
> at hente billedet.

Og det første den får retur er størrelsen. For BMP og jpg, står den
indenfor de første 44 bytes. Så den kan sagtens sætte plads af til
billedet, også uden på forhånd at kende størrelsen.

> Hvis forbindelsen er hurtig nok til at billedet når at blive hentet
> inden for den tid browseren er villig til at vente, når tingene ikke
> at hoppe. Så opleves siden bare langsommere end andre sider, hvor man
> ikke skal vente.
>
>> - det har jeg derimod når det tager for lang tid at hente CSS.
>
> Det er præcis samme problem og samme resultat.

Næppe.
Men det ser nok ens ud for brugeren...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

runeofdenmark@hotmail.com skrev:

> <img src="/billede.jpg" alt="Min hund" width="200"
> height="250" style="width: 200px; height: 250px" />
>
> Her er stylen unødvendig.

Jeg ville gøre det på en anden måde, hvor der kun
er style i css-filen.

<img src="hund1.png" id="hund1" alt="" />

#hund1{
width:200px;
height:250px;
}

På den måde er det også nemmere at tilføje mere
til #hund1, det kan være border, margin, padding
og meget andet.

For mig drejer det sig om at få html-koden så
minimal som mulig, og at formateringen kun er
skrevet i én fil, css-filen.

Jeg undlader som regel inline-css, det bliver ofte
et helvede at rette i, hvis der også skal border,
background-image og meget andet på.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

On 16 Maj, 18:22, Birger Sørensen <s...@bbsorensen.com> wrote:

> Påhttp://www.w3.org/TR/html401/struct/objects.html#edef-IMG
> står at HTML værdierne er til override af eksisterende værdier.
> Så skal der bruges nogen værdier, bør det være i CSS'en. De bør dog
> ikke stå i HTML'en, men i enten en separat fil der linkes, eller inline
> i head.

Der står at width og height i <img> er deprecated?

Det var en dårlig beslutning fra W3C. De attributter beskriver dele af
indholdet, og det er ulogisk, det skal ligge i en CSS. Størrelsen er
"en del af indholdet", og dvs. billedet kan mistolkes hvis ikke det
får korrekte height/width. Som sådan bør det være HTML, ikke CSS. Det
bør kun være CSS, hvis det er pyntebillede (baggrundsbillede).

Men OK, du har ret. W3C får det sidste ord...


MVH
Rune Jensen

---

On 16 Maj, 22:24, runeofdenm...@hotmail.com wrote:
> On 16 Maj, 18:22, Birger Sørensen <s...@bbsorensen.com> wrote:
>
> > Påhttp://www.w3.org/TR/html401/struct/objects.html#edef-IMG
> > står at HTML værdierne er til override af eksisterende værdier.
> > Så skal der bruges nogen værdier, bør det være i CSS'en. De bør dog
> > ikke stå i HTML'en, men i enten en separat fil der linkes, eller inline
> > i head.
>
> Der står at width og height i <img> er deprecated?

OK, jeg var for hurtig. De er kun deprecated til Visuet presentation.
(Den tygger man så lidt på, eftersom img er til betydningsbærende
billeder, ikke pyntebilleder...)

Jeg har faktisk brugt begge muligheder i de forskellige gallerier, jeg
har lavet.

Fordelen ved (ekstern) CSS er, hvis alle billeder er af samme
størrelse, så man bare kan give dem en ID eller nå dem via omkransende
DIV, og så angive height/width for alle billeder på én gang i CSSen*)..
Det er selvfølgelig en optimering af koden. Bagdelen ved CSS er, det
er måske ikke så fleksibelt som attributterne, hvis billederne
varierer i størrelse.


*) Eksempel:

div img{
height: 100px;
width: 200px;
}


MVH
Rune Jensen

---

On 16 Maj, 22:54, "Allan Vebel" <s...@do.not> wrote:
> runeofdenm...@hotmail.com skrev:
>
> > <img src="/billede.jpg" alt="Min hund" width="200"
> > height="250" style="width: 200px; height: 250px" />
>
> > Her er stylen unødvendig.
>
> Jeg ville gøre det på en anden måde, hvor der kun
> er style i css-filen.
>
> <img src="hund1.png" id="hund1" alt="" />
>
> #hund1{
> width:200px;
> height:250px;
>
> }

Æv, du kom før mig. Men dit CSS er fint nok som sagt, hvis alle
billeder har samme størrelse.


MVH
Rune Jensen

---

runeofdenmark@hotmail.com skrev:

> Æv, du kom før mig. Men dit CSS er fint nok
> som sagt, hvis alle billeder har samme størrelse.

Nu har jeg jo brugt #id i eksemplet, det kan man
kun bruge ét sted.

Ellers ville jeg bruge .class

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

On 16 Maj, 23:21, "Allan Vebel" <s...@do.not> wrote:

> Nu har jeg jo brugt #id i eksemplet, det kan man
> kun bruge t sted.
>
> Ellers ville jeg bruge .class

Nåhja, det kan man selvfølgelig også, det er klart.


MVH
Rune Jensenacariate

---

Sikke mange indfaldsvinkler.

I mit tilfælde drejer det sig om (mange hundrede) billeder, der
altoovervejende er af forskellig størrelse, så størrelsesangivelse
bliver enten inline CSS eller html, ikke ekstern CSS. Da det drejer
sig om renovering af en masse sider, vil jeg gerne lægge mig fast på
én af måderne fra start. Vil den ene være mere hensigtsmæssig end den
anden?

I og med at Kompozer angiver billedstørrelser i inline CSS og gamle
Frontpage (der jo kritiseres for dets kodegenerering) i html, tænkte
jeg at CSS måske var mere hensigtsmæssigt eller nutidigt. Men ud fra
det i skriver, er jeg i tvivl om CSS afsætter plads på forhånd, sådan
som html gør?

Hvilken af de to vil I anbefale, at jeg benytter mig af?

---

Den 17-05-2011 10:47, Preben Nielsen skrev:

> I og med at Kompozer angiver billedstørrelser i inline CSS og gamle
> Frontpage (der jo kritiseres for dets kodegenerering) i html, tænkte
> jeg at CSS måske var mere hensigtsmæssigt eller nutidigt. Men ud fra
> det i skriver, er jeg i tvivl om CSS afsætter plads på forhånd, sådan
> som html gør?

CSS indlæses før renderingen af siden begynder.

> Hvilken af de to vil I anbefale, at jeg benytter mig af?

Det er helt op til dig, så vælg det, som er nemmest for dig.

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker.php

---

Kim Ludvigsen skrev den 17-05-2011:

> CSS indlæses før renderingen af siden begynder.

Den holder ikke.
Det er måske browserafhængigt - men i hvert fald FF både 3.6 og 4 viser
gerne tekst og billeder før den er færdig med at hente CSS'en.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 17-05-2011 15:29, Birger Sørensen skrev:
> Kim Ludvigsen skrev den 17-05-2011:
>
>> CSS indlæses før renderingen af siden begynder.
>
> Den holder ikke.
> Det er måske browserafhængigt - men i hvert fald FF både 3.6
> og 4 viser gerne tekst og billeder før den er færdig med at
> hente CSS'en.

Jeg bør nok præcisere. Jeg tænkte ikke på CSS i en ekstern
fil, men intern CSS, som der vil være tale om i dette tilfælde.

Og så skal jeg nok tilføje, at jeg ikke er 100 procent
sikker. Intern CSS i headeren indlæses før renderingen, jeg
er ikke 100 procent sikker på, at det også gælder inline CSS.

--
Mvh. Kim Ludvigsen
Undgå virus og andet snavs på computeren:
http://pc-sikkerhed.dk

---

Preben Nielsen kom med følgende:
> Sikke mange indfaldsvinkler.
>
> I mit tilfælde drejer det sig om (mange hundrede) billeder, der
> altoovervejende er af forskellig størrelse, så størrelsesangivelse
> bliver enten inline CSS eller html, ikke ekstern CSS. Da det drejer
> sig om renovering af en masse sider, vil jeg gerne lægge mig fast på
> én af måderne fra start. Vil den ene være mere hensigtsmæssig end den
> anden?
>
> I og med at Kompozer angiver billedstørrelser i inline CSS og gamle
> Frontpage (der jo kritiseres for dets kodegenerering) i html, tænkte
> jeg at CSS måske var mere hensigtsmæssigt eller nutidigt. Men ud fra
> det i skriver, er jeg i tvivl om CSS afsætter plads på forhånd, sådan
> som html gør?
>
> Hvilken af de to vil I anbefale, at jeg benytter mig af?

Hvis dine billeder har den størrelse de skal vises i, er det ikke
nødvendigt at angive width/height.
Hvis de ikke har, skal du kun angive den ene - ellers bliver billedet
forvrænget (med mindre du selv beregner i forhold til billedet - og det
er altså ikke nødvendigt).

Ellers foretrækker jeg CSS. W3C siger (som tidligere angivet) i
HTML4.01 at HTML-værdierne er til override af tidlige givne værdier
(altså CSS eller billedets dimensioner - hvilket også indikerer at man
bør sætte dem i CSS).

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 17 Maj, 10:47, Preben Nielsen <p...@mail.dk> wrote:

> Hvilken af de to vil I anbefale, at jeg benytter mig af?

Man skal selvfølgelig lige huske, at det ikke er officielle standarder
(sådan som W3C er), men sådan noget som hastighed, hvis man vil
optimere det, så kan man finde svar på både hos Yahoo (Yslow) og
Google (PageSpeed):
http://code.google.com/intl/da/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

Mao. som Kim skriver, er der frit valg imellem CSS og HTML. Du skal
bare angive både height og width.


MVH
Rune Jensen

---

On 17 Maj, 15:28, Birger Sørensen <s...@bbsorensen.com> wrote:

> Hvis dine billeder har den st rrelse de skal vises i, er det ikke
> nødvendigt at angive width/height.

Nej. Men hvis man ikke gør, kommer der en repaint. Det ser ikke godt
ud for brugeren. Om det er i CSS eller HTML man sætter height/width,
er i princippet ligegyldigt, så hvis du kan anbefale CSS, så gør man
bare det.

Der er heller ikke noget rigtigt sparet ved det ene i forhold til det
andet, når man ser på kodemængden.

<img src="billede1.jpg" height="200" width="100" />
<img src="billede1.jpg" style="width: 200px; height: 100px" />

Hvis man alligevel vil sætte style på billede ud over width og height
(f.eks. float), så kan man ligeså godt sætte det hele i style.

Men der er ikke rigtigt noget semantisk, som foreskriver det ene for
det andet. En skærmlæser får intet ud af dimensionerne på billedet,
hvilket ellers ville være eneste grund til at sætte det i HTML.

Så er man tilbage ved, hvad W3C anbefaler, og hvis det er CSS, så gør
det.


MVH
Rune Jensen

---

On 17 Maj, 15:47, Kim Ludvigsen <use...@kimludvigsen.dk> wrote:

> Og så skal jeg nok tilføje, at jeg ikke er 100 procent
> sikker. Intern CSS i headeren indlæses før renderingen, jeg
> er ikke 100 procent sikker på, at det også gælder inline CSS.

Med den usikkerhed giver det vel mest mening - hvis man vil sætte
dimensioner - at gøre det i html! Da mine billeder helt konsekvent
skal vises i deres faktuelle størrelse, kan jeg, på baggrund af det I
har skrevet, kun få øje på ét formål med at angive dimensioner: at
undgå repaint ved at pladsen til billedet afsættes på forhånd. Og hvis
der ikke er garanti for det med inline css, kan jeg ikke få øje på
ideen i at bruge css her.

Men jeg kan sagtens følge Birgers oplevelse af det unødvendige i at
angive noget somhelst i og med at dagens internetforbindelser typisk
er hurtige. Jeg ved ikke hvad de langsommeste er med dagens standard.
Med min 4 megabit (eller hvad det hedder), som vel er er middel i dag,
oplever jeg ingen problemer ved at selv testsider med adskillige
billeder indlæses problemfrit uden angivelse af dimensioner.
Så jeg spørger stadig mig selv om det overhovedet er krudtet værd at
bruge tid på at indsætte dimensioner. Hm.

Preben

---

På http://code.google.com/intl/da/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
står der "To prevent reflows, specify the width and height of all
images, either in the HTML <img> tag, or in CSS."

Hvis man ellers kan stole på det, så duer css altså også til
pladsafsættelse.