Zum Hauptinhalt springen
Bethemesh
Bilder & Grafiken

Responsive Bilder vorbereiten

Erstellt passende Bildvarianten und Markup-Hinweise für responsive Webseiten.

  • Zwischenablage
  • Stapelverarbeitung
  • Export

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

Ihre Dateien werden lokal in Ihrem Browser verarbeitet und niemals an unsere Server gesendet.

Füge ein PNG-, JPEG- oder WebP-Bild hinzu. Jede Variante wird lokal in deinem Browser erzeugt.

Datei hier ablegen

Empfohlene Größe: bis zu 25 MB

Du brauchst mehr Möglichkeiten?

Nutze mehrere Bearbeitungswerkzeuge in einem Arbeitsbereich, deine geöffnete Datei und deine Änderungen kommen mit.

Vollständigen Editor öffnen

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Ein einziges großes Bild bremst Smartphones aus, ein einziges kleines wirkt auf einem Retina-Display unscharf. Dieser Generator erstellt mehrere Breiten desselben Bildes in WebP, JPEG oder PNG und schreibt das HTML-Markup picture mit srcset und sizes: Der Browser lädt dann die Datei, die am besten zu Bildschirm und Layout passt. Alles wird in deinem Browser berechnet.

Importiere ein PNG-, JPEG- oder WebP-Bild bis 25 MB. Wähle die gewünschten Breiten aus 320, 480, 640, 768, 1.024, 1.280, 1.600 und 1.920 px (die ersten sechs sind vorausgewählt) oder gib eigene Breiten durch Kommas getrennt ein. Die Höhe folgt immer den Proportionen des Originals.

Wähle die Formate (standardmäßig WebP und JPEG, PNG optional) und die JPEG/WebP-Qualität von 40 bis 100 % (Standard 82 %). Breiten über dem Original werden übersprungen, außer du erlaubst das Vergrößern. Jede Variante heißt name-breite.endung, zum Beispiel sommer-strand-640.webp: Der Name wird kleingeschrieben, ohne Akzente und Leerzeichen.

Der erzeugte Code enthält ein picture-Element: ein source-Tag pro modernem Format (WebP zuerst) und ein img als Fallback in JPEG, ohne JPEG in PNG, dessen src auf die größte Variante zeigt. Das Attribut sizes übernimmt deine Eingabe, dazu kommen loading="lazy" und decoding="async". Lade alle Varianten herunter und kopiere den Code.

So verwenden Sie dieses Tool

  1. Bild importieren

    Füge die größte und schärfste Version hinzu, die du hast.

  2. Varianten einstellen

    Wähle Breiten, Formate, Qualität und das sizes-Attribut deines Layouts.

  3. Herunterladen und einbinden

    Lade die Dateien herunter, kopiere den Code und ergänze das alt-Attribut.

Welche Breite lädt der Browser?

Der Browser multipliziert die in sizes angegebene Breite mit der Pixeldichte des Bildschirms und wählt meist die kleinste srcset-Variante, die diesen Wert erreicht.

Benötigte Breite

w = s × d

Ein 390-px-Platz bei Dichte 3 braucht 1.170 px: Gewählt wird die Variante 1280w.

w
benötigte Bildbreite in Pixeln
s
Anzeigebreite laut sizes, in CSS-Pixeln
d
Pixeldichte des Bildschirms (devicePixelRatio)

Anwendungsfälle

Titelbild eines Artikels

Liefere aus einem einzigen Foto 320 px an Smartphones und 1.280 px an große Bildschirme.

Eine Website auf WebP umstellen

Biete WebP für Browser an, die es unterstützen, und behalte ein JPEG als Fallback.

LCP verbessern

Verringere das Gewicht des auffälligsten Bildes einer Seite, damit es schneller erscheint.

Beispiele

Foto mit 2.400 × 1.600 px und Standardeinstellungen

Sechs Breiten × zwei Formate. Der Code setzt die WebP-Quelle an den Anfang und ein img sommer-strand-1280.jpg mit JPEG-srcset als Fallback.

Eingabe

Sommer Strand.jpg, Breiten 320 bis 1.280, WebP + JPEG, Qualität 82 %

Ergebnis

12 Dateien, von sommer-strand-320.webp (320 × 213) bis sommer-strand-1280.jpg (1.280 × 853)

Welche Datei wählt der Browser?

Auf einem Rechner mit Dichte 1 nimmt der 768-px-Platz die Variante 768w; bei Dichte 2 wären 1.536 px nötig: Wähle 1.600 px, um das abzudecken.

Eingabe

sizes="(max-width: 768px) 100vw, 768px"

Ergebnis

Smartphone mit 390 px und Pixeldichte 3: 1.170 px → Variante 1280w

Tipps und bewährte Vorgehensweisen

  • Schreibe ein sizes-Attribut, das zum Layout passt: Mit 100vw bei einem Bild, das mit 600 px angezeigt wird, lädt der Browser eine zu schwere Datei.
  • Plane eine Variante mit etwa der doppelten maximalen Anzeigebreite für hochauflösende Bildschirme ein.
  • Der Code enthält alt="": Ersetze es durch eine Beschreibung, außer bei rein dekorativen Bildern.
  • Verwende loading="lazy" nicht beim Hauptbild, das beim Laden sichtbar ist: Entferne es, damit der LCP nicht verzögert wird.

Quellen und Referenzen

Häufig gestellte Fragen

Wozu dient das Attribut sizes?

Es gibt die Anzeigebreite des Bildes je nach Bildschirm an. Zusammen mit srcset leitet der Browser daraus die zu ladende Datei ab, noch bevor er das Layout kennt.

Warum wurden manche Breiten nicht erzeugt?

Sie sind breiter als das Original. Vergrößern fügt keine Details hinzu; aktiviere die Option nur bei Bedarf.

Warum WebP und JPEG zusammen?

WebP ist bei gleicher Qualität leichter; das JPEG im img-Tag dient als Fallback für Browser oder Tools, die kein WebP lesen.

Werden die Dateien in einem ZIP gebündelt?

Nein, jede Variante wird einzeln heruntergeladen; dein Browser fragt eventuell, ob mehrere Downloads erlaubt sind.

Gilt die Qualität auch für PNG?

Nein. PNG ist verlustfrei: Der Qualitätsregler betrifft nur JPEG und WebP.

Wird mein Bild auf einen Server hochgeladen?

Nein. Skalieren und Kodieren erfolgen in deinem Browser.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

Bildgröße ändern

Ändere die Abmessungen eines Bildes schnell und ohne Upload.

Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden

Bild optimieren

Verkleinere ein Bild über die Qualität oder eine Zielgröße in KB und sieh die Dateigröße vor dem Herunterladen.

Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden

Bild konvertieren und komprimieren

Konvertiere Bilder in PNG, JPEG oder WebP und passe die Ausgabequalität direkt im Browser an.

Bilder & GrafikenEmpfohlenDieses Werkzeug verwenden

Auch interessant

LeitfadenBewährte MethodenFortgeschritten

Responsive Bilder: `srcset` und `sizes` verstehen

Lerne, wie Browser mit srcset und sizes eine passende Bildquelle nach Viewport, Layout und Pixeldichte auswählen und unnötige Downloads vermeiden.

31. August 20265 min