Optimales Format (jpg, png, gif...) Grafik / Banner auf Webseite

[Auge]

Hallo

Wenn eine Grafik so derart groß ist (bei dir 10.500 x 1.812), wird sie im Browser herunterskaliert, weil die Anzeigefläche im Browser … nicht so groß ist, wie es die Grafik ist. Dabei treten Unschärfen auf, das ist soweit normal.

Was wäre denn die optimale Pixelgröße der Grafik?

Das kommt auf die Anzeigefläche im Ausgabemedium an. Du kannst dir eine Website auf einem Smartphone mit 400px Breite anzeigen, auch auf einem Full-HD Bildschirm mit 1920px oder genauso auf einem UHD-Display mit einer Breite von 3840px oder irgendwas dazwischen. Das ganze, zumindest bei den letzten beiden Beispielauflösungen, entweder im Vollbild, wobei die Auflösung bis auf etwaige Fensterränder vollständig genutzt wird, oder in einem beliebig großen und breiten Fenster, dessen Größe du als Seitenautor nicht kennst, nicht kennen kannst und nicht kennen musst.

Um damit umzugehen und für unterschiedliche Anzeigegrößen Bilder unterschiedliche Auflösungen des gleichen Bildes oder gar unterschiedliche Bilder bereitzustellen, gibt es in HTML mehrere Techniken. Für unterschiedliche Auflösungen des gleichen Bildes gibt es für img das Attribut srcset und für unterschiedliche Bilder für unterschiedliche Anzeigegrößen die Elemente picture und source. Beide Techniken können auch kombiniert werden, wie es in diesem Beispiel beschrieben wird.

Habe die Grafik mal auf dem PC runter skaliert, dummerweise wird die Grafik beim runterskalieren auf dem PC unscharf. Wie kann ich eine Grafik runterskalieren ohne das Sie unscharf wird?

Um was für Grafiken handelt es sich denn überhaupt? Ist es ein Foto oder ein Logo mit scharf voneinader abgegrenzten Linien und Flächen? Je nach Art des Bildes eignen sich unterschiedliche (Raster)-Grafikformate (JPEG, PNG, GIF), eventuell auch Vektorgrafiken (SVG), mit denen Skalierung keine Rolle mehr spielt.

Tschö, Auge