Selina: Größenangaben im HTML

Guten Abend,

bis jetzt war ich mir immer sicher, dass Größenangaben bei Bildern nicht in das HTML sondern in das CSS gehören.

Heute habe ich in einem Buch gelesen, wenn man dem Bild direkt im HTML eine Höhe und Breite mitgibt dann weiß der Browser vorab bereits wie groß das Bild ist nun die Seite wird schneller geladen.

Ist dieses denn richtig?

Schönen Abend euch,
Selina

  1. Hi,

    bis jetzt war ich mir immer sicher, dass Größenangaben bei Bildern nicht in das HTML sondern in das CSS gehören.

    das kommt drauf an[tm].

    Heute habe ich in einem Buch gelesen, wenn man dem Bild direkt im HTML eine Höhe und Breite mitgibt dann weiß der Browser vorab bereits wie groß das Bild ist nun die Seite wird schneller geladen.

    Schneller wohl nicht; aber der Rest ist richtig: Der Browser bekommt im HTML schon die Information, wie groß das Bild ist, und kann so im Layout schon den erforderlichen Platz berechnen und reservieren, auch wenn das Bild noch nicht geladen ist. Das führt auf jeden Fall zu einem ruhigeren Bildaufbau, weil das Layout nicht mehr hin- und herspringt, wenn die Bilder nach und nach eintrudeln.

    Ist dieses denn richtig?

    Ja. Anders mag es aussehen, wenn du Bilder der Optik/des Designs wegen vom Browser skalieren lassen willst, etwa auf einen bestimmten Prozentsatz der Bildschirmbreite oder der Größe eines Containerelements. Diese Angaben würde ich dann ins Stylesheet schreiben.

    So long,
     Martin

    --
    Ich bin 30. Ich demensiere apokalyptisch.
      (Orlando)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. @@Der Martin:

      nuqneH

      Heute habe ich in einem Buch gelesen, wenn man dem Bild direkt im HTML eine Höhe und Breite mitgibt dann weiß der Browser vorab bereits wie groß das Bild ist nun die Seite wird schneller geladen.

      Schneller wohl nicht

      Geladen wohl nicht, aber schneller gerendert.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo!

    bis jetzt war ich mir immer sicher, dass Größenangaben bei Bildern nicht in das HTML sondern in das CSS gehören.

    Das ist im Allgemeinen sinnvoll.

    In einem Stylesheet stehen meist allgemeine Regeln, die für mehrere Seiten gelten. Größenangaben für Bilder schreibt man dort rein, wenn diese viele Bilder auf vielen Seiten gelten.

    Zum Beispiel wenn ich viele Artikel mit Teasergrafiken habe und die immer gleich groß sind, schreibe ich .article-image { width: 20% } oder einen px-Wert.

    Du kannst durchaus auch die Größen einzelner Bilder (die nur auf einer Seite vorkommen und sich nicht wiederholen) im Stylesheet angeben.

    Heute habe ich in einem Buch gelesen, wenn man dem Bild direkt im HTML eine Höhe und Breite mitgibt dann weiß der Browser vorab bereits wie groß das Bild ist nun die Seite wird schneller geladen.

    Das ist schon richtig. Aber ein Stylesheet das normal im <head> verlinkt ist wird geladen, bevor der Browser die Seite rendert. Der Download blockt sozusagen den Seitnaufbau. Das heißt die Größenangaben sind dem Browser schon bekannt wenn er das Layout berechnet. Ob du die Größe im CSS oder HTML angibst dürfte gleich also schnell sein.

    Es ist natürlich besser, die Größe im HTML _ODER_ CSS anzugeben als weder noch. Denn sonst muss der Browser die Grafik erst runterladen, um das Layout zu berechnen.

    MFG Nico

  3. Guten Morgen,

    vielen Dank für eure Antworten. Dazu habe ich allerdings noch eine Frage. Wenn ich im HTML die Größenangabe mache, wie sieht es dann mit einem responsives Design aus?

    Grüße,
    Selina

    1. Hallo

      Wenn ich im HTML die Größenangabe mache, wie sieht es dann mit einem responsives Design aus?

      Deshalb sollst du die Größe von Bildern ja nicht im HMTL-Quelltext angeben sondern im CSS-Teil.

      Je nach Seite ist es auch sinnvoll, die Bilder in passende Container (wie figure) zu packen.

      Gruss

      MrMurphy