Moet de afbeeldingsgrootte worden opgegeven in html?

Ik herinner me dat het lang geleden de beste gewoonte was om breedte en hoogte voor elke afbeelding te coderen (meestal zo dat het voldoende ruimte kreeg tijdens het laden), maar nu met de meeste mensen op hoge snelheid en dingen die over het algemeen dynamischer zijn, wat is de beste methode hiervoor ? Heeft het nog steeds de voorkeur dat voor elke inhoudsafbeelding een inline-grootte is ingesteld met html?

1

8 antwoord

Het maakt niet uit of u de grootte instelt met HTML-kenmerken of in een stylesheet, maar u moet wel de grootte voor afbeeldingen opgeven.

Hoewel afbeeldingen tegenwoordig veel sneller worden geladen, is er nog steeds een merkbare vertraging tussen de pagina die wordt weergegeven en de afbeeldingen. Het is nog steeds irritant wanneer de lay-out van een pagina verandert terwijl de afbeeldingen worden geladen.

2
toegevoegd

Ik heb zojuist een vergelijkbare vraag beantwoord bij Wordpress Stack Exchange en ook bij Webmaster Stack. Ik plaats het hier om meer mensen te verduidelijken en te helpen. (admins/moderators: als dit niet is toegestaan, laat me dan weten wat de juiste manier is om te helpen).

betekent niet dat u de breedte en hoogte in de html moet opgeven. Wat het betekent is dat je de juiste ruimte moet reserveren en wanneer de afbeelding is geladen, hoeft de browser de pagina niet opnieuw te plaatsen en opnieuw te schilderen.

     

Trouwens, als je de dimensies hardcodeert, verslaat het soort responsief gedrag. Als uw lay-out niet reageert, is dat prima, maar als u wat responsiviteit wilt behouden, kunt u alleen CSS gebruiken om de resultaten te bereiken.

     

Meestal zullen zowel de breedte als de max-width: 100 het werk doen, maar dit bericht van Smashing Magazine heeft een interessante techniek: in plaats van het gebruik van max-width: 100%, kunt u The Padding gebruiken -Basis Hack :

     

"Met de techniek definiëren we de hoogte als een maat ten opzichte van de breedte.Vulling en marge hebben zulke intrinsieke eigenschappen en we kunnen ze gebruiken om beeldverhoudingen te maken voor elementen die er geen inhoud in hebben.   Omdat padding deze mogelijkheid heeft, kunnen we padding-bottom instellen als relatief ten opzichte van de breedte van een element. Als we ook de hoogte instellen op 0, krijgen we wat we willen. [...]

     

De volgende stap is om een ​​afbeelding in de container te plaatsen en ervoor te zorgen dat deze de container vult. Om dit te doen, moeten we de afbeelding absoluut in de container positioneren, zoals dit: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
2
toegevoegd

Ja, het heeft nog steeds de voorkeur.

Veel mensen zijn niet op hoge snelheden en mobiel wordt steeds gebruikelijker.

1
toegevoegd

Het is altijd het beste om CSS te gebruiken

Je zou de beeldhoogte en -breedte zo kunnen hardcoderen

.myimg img {
width: 10px;
height: 10px;
}
0
toegevoegd
veel mensen zeggen om CSS te gebruiken. Hoe zit het met situaties waarin afbeeldingen deel uitmaken van inhoud en variabel zijn? zou ik een aangepaste klasse voor verschillende afbeeldingen maken? Heeft u een stabiel aantal afbeeldingsgrootteklassen .. (verticaal/horizontaal, verschillende beeldverhoudingen, klein/middelgroot/groot), of alleen die in de html?
toegevoegd de auteur Damon, de bron

uw afbeeldingsbestand zelf moet de afmeting hebben die u wilt weergeven, voor het grootste deel, als u zich zorgen maakt over langzaam laden, vooral! als je een afbeelding van 500X800 px hebt, die je alleen als 100X200 wilt weergeven, schaal hem dan naar beneden! de bestandsgrootte zal veel kleiner zijn, dus het wordt sneller geladen :)

0
toegevoegd
in het algemeen ja, hoewel veel nieuwe responsieve technieken dit niet vereisen (hoewel je toch wilt dat het niet groter is dan absoluut noodzakelijk)
toegevoegd de auteur Damon, de bron

Het hoeft niet inline te zijn - je kunt het in externe CSS doen. Sommige oudere browsers behandelen het als 0px als u de grootte niet opgeeft;

0
toegevoegd

Ik zou ja zeggen als je zeker wilt weten dat de witte ruimte is opgenomen in het geval dat de afbeelding niet wordt geladen of tijdens het laden van het document. Maar nee, als u de afbeelding schaalt/van grootte verandert met die attributen, omdat deze onnodig wordt belast in de browser en beeldvervorming veroorzaakt.

0
toegevoegd

Als u ontwerpt voor compatibiliteit met verschillende browsers, moet u op zijn minst de hoogte en breedte van uw CSS voor de afbeelding zelf opgeven. Ik heb inconsistentie gevonden tussen FireFox, IE, Opera, enz. Als formaten niet specifiek voor de afbeelding zijn opgegeven. Vanwege het feit dat elke browser, om nog te zwijgen van verschillende versies, de naleving van HTML-standaarden op een andere manier aanpakt. Ik heb geconstateerd dat sommige browsers hun best zullen doen om de intentie van de HTML-ontwerper te extrapoleren, terwijl anderen de eerste fout alleen maar opmerken. Ik zou ook em sizes aanbevelen in plaats van pixel of% als je van plan bent om de website te bekijken vanaf een mobiel apparaat zoals een tablet. Ik zal wel zeggen, maar ik ben net begonnen met spelen met HTML5, dus ik maak geen verschil in HTML5 met betrekking tot afbeeldingen.

0
toegevoegd