Responsive Bilder erstellen

Exportiere dasselbe Bild in mehreren Breiten und kopiere das passende HTML-srcset.

Auf deinem Gerät · Ohne Konto

Responsive Bilder erstellen verarbeitet deine Eingaben in diesem Browser. Eingaben und Ergebnisse werden nicht in Analysedaten erfasst. Zuletzt verwendete Tools speichern Tool-Namen, Besuchszahlen und den Zeitpunkt des letzten Besuchs. Gespeicherte Tools speichern nur ihre Namen. Das Speichern von Entwürfen ist optional und erfolgt auf diesem Gerät; gespeicherten Text kannst du über die Entwurfsfunktionen löschen. Das optionale Laden von Text über eine URL stellt eine Verbindung zum jeweiligen Server her; der Server sieht die URL und deine IP-Adresse. Die optionale Aktion „Verwenden in“ speichert Daten zur Übergabe in diesem Tab. Das nächste Tool entfernt sie beim Öffnen und ignoriert sie, wenn mehr als eine Minute vergangen ist.

„Link kopieren“ nimmt die von dir zum Teilen ausgewählten Eingaben in die Adresse auf. Alle mit diesem Link können sie erneut öffnen. Dateien und erzeugte Ergebnisse sind nicht enthalten. Passwort- und Schlüssel-Tools teilen nur Einstellungen.

Deutsch

Bild auswählen

Breiten, durch Kommas getrennt

Variante zum Herunterladen

Deine Vorschau

Preparing preview…

Mehr

Tastenkürzel

Über Links und Zurücksetzen

Links enthalten deine Eingaben und Einstellungen. Wer den Link hat, kann sie sehen. Lass private Texte deshalb weg. Dateien und erzeugte Ergebnisse sind nicht enthalten; Zufallsauswahlen werden erneut ausgeführt.

Beim Zurücksetzen wird das Tool mit den Ausgangswerten neu geladen. Offene Dateien und Gerätesteuerungen werden freigegeben. Gespeicherte Entwürfe bleiben auf diesem Gerät, bis du sie löschst.

So erstellst du responsive Bilder

Gib eine Liste von Breiten ein und wähle anschließend jede Breite zum Exportieren aus. Die Höhe folgt dem Seitenverhältnis des Originals. Das vorgeschlagene srcset verwendet dieselben nummerierten Dateinamen und Breitenangaben; ersetze die Bildbeschreibung vor der Veröffentlichung.

Als Nächstes: Farbe aus Bild ermitteln

Beispiel

Das Beispiel mit 640 × 360 Pixeln wird bei der ersten voreingestellten Breite zu 320 × 180 Pixeln. Eine Variante mit 640 Pixeln Breite bleibt bei 640 × 360 Pixeln.

Hinweise zum Ergebnis

Dein Browser dekodiert PNG-, JPEG- und WebP-Dateien. Bei animierten Dateien wird das erste Einzelbild verwendet. Farbprofile können die angezeigten Farben beeinflussen; exportiert werden die gerenderten Pixel, nicht die ursprünglichen Metadaten.

Als Nächstes: Bildgröße ändern

Aktualisiert 7. Oktober 2026

Diese Seite zitieren

Zitierstil

ToolOctopus. “Responsive Bilder erstellen.” Aktualisiert 7. Oktober 2026. https://tooloctopus.com/de/responsive-bilder-erstellen.

Ergänze ein Abrufdatum, wenn deine Vorgaben das verlangen.

Die Quellenangaben werden mit citeproc-js von Frank Bennett und Zitierstilen der Citation Style Language formatiert. Lizenz und Quellcode.