Kurz-Fakten

  • Die übliche Angabe lautet: meta name="viewport" content="width=device-width, initial-scale=1"
  • Ein Sperren der Zoom-Funktion über user-scalable=no verstößt gegen die Zugänglichkeitsanforderungen und sollte unterbleiben
  • srcset nennt dem Browser mehrere Bildgrößen, sizes die Anzeigebreite – die Auswahl trifft der Browser
  • Das picture-Element wird gebraucht, wenn sich der Bildausschnitt ändern soll oder ein anderes Dateiformat angeboten wird
  • width und height am Bild reservieren den Platz vor dem Laden und verhindern springendes Layout

Einordnung für die Praxis

Die Trennung ist nützlich, weil sie die Fehlersuche verkürzt: Passt sich die Seite gar nicht an, fehlt fast immer die Viewport-Angabe. Passt sie sich an, aber Bilder sind zu schwer, geht es um srcset.

Der zweite Punkt ist der teurere. Ein Bild in Desktop-Auflösung auf einem Mobilgerät kostet Ladezeit, die sich mit keiner Optimierung an anderer Stelle wieder einspielen lässt – und es ist zugleich der am leichtesten behebbare Fehler.

Verwandte Begriffe

Quellen und Weiterlesen