ForHosting KIT · Bilder bearbeiten & analysieren

Responsive Bildgrößen erstellen

Ein responsiver Bildsatz besteht aus mehreren Kopien desselben Bildes in unterschiedlichen Breiten, wie sie das HTML-Attribut srcset erwartet. Der Browser des Besuchers wählt je nach Bildschirmgröße automatisch die passende Datei aus, statt immer die größte Version zu laden, was Ladezeit und Datenvolumen spürbar reduziert.

● Stabilpro Anfrage + pro Bild$0.002

Ausführen — $0.002 + $0.005/Bild API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Online ausführen

Führen Sie dies mit Ihrem Konto auf unseren Servern aus. Kostenlose Tools laufen in Ihrem Browser; dieses wird zum oben genannten Preis von Ihrem KIT-Guthaben abgebucht.

Warum ein Bild nicht für alle Bildschirme reicht

Ein Smartphone-Bildschirm braucht keine Datei in Desktop-Breite – sie würde nur unnötig Datenvolumen und Ladezeit kosten. Ein responsiver Bildsatz liefert für jede Bildschirmbreite eine passend große Datei, sodass der Browser selbst die sinnvollste Version auswählt, ohne dass mehr geladen wird als nötig. Gerade bei mobilen Verbindungen mit begrenztem Datenvolumen macht dieser Unterschied den größten Teil der wahrgenommenen Geschwindigkeit aus, besonders bei Seiten mit mehreren großformatigen Fotos.

Welche Breiten entstehen

Aus der Quelldatei entsteht ein Satz üblicher Breiten, etwa für Smartphone, Tablet und Desktop, jeweils mit erhaltenem Seitenverhältnis. Die Ausgabe liefert die Dateien einzeln zurück, benannt nach ihrer Breite, damit sie sich direkt in das srcset-Attribut eines img-Elements eintragen lassen. Je nach Ausgangsauflösung der Quelldatei kann die Anzahl der sinnvollen Zwischengrößen variieren, da eine kleine Quelldatei keine größeren Breiten liefern kann, ohne an Schärfe zu verlieren.

Einbindung auf der Website

Die erzeugten Dateien gehören in das srcset-Attribut, ergänzt um die passenden sizes-Angaben für Ihr Layout. Damit lädt jeder Besucher nur die Bildgröße, die sein Gerät tatsächlich benötigt – ein messbarer Vorteil für Ladezeit und Core Web Vitals, besonders bei bildlastigen Seiten mit vielen großformatigen Fotos oberhalb der Kante. Die Einbindung selbst erfordert nur wenige Zeilen im bestehenden Template, ohne dass an der übrigen Seitenstruktur etwas geändert werden muss.

Kein Ersatz für ein CDN, aber ein guter Ausgangspunkt

Der Bildsatz liefert die Rohdateien in den richtigen Breiten; die Auslieferung selbst übernimmt weiterhin Ihr Webserver oder Ihr CDN. Für viele kleine und mittlere Websites reicht das bereits aus, ohne dass zusätzlich eine eigene Bildoptimierungs-Infrastruktur aufgebaut werden muss. Wer später doch ein CDN einsetzt, kann dieselben Breiten dort unverändert weiterverwenden, ohne den Bildsatz erneut erzeugen zu müssen, was den Umstieg auf eine größere Infrastruktur erheblich erleichtert.

Anwendungsfälle

Eine Agentur liefert Bilder für eine Kundenwebsite

Schneider IT-Systeme GmbH & Co. KG erstellt für einen Kunden einen responsiven Bildsatz aus jedem Header-Bild und bindet die Breiten direkt in das neue Template ein.

Produktfotos für Mobilgeräte optimieren

Weber Metallbau GmbH bemerkt, dass die Ladezeit auf dem Smartphone zu hoch ist. Aus jedem Produktfoto entsteht ein Bildsatz mit kleineren Varianten für mobile Besucher.

Ein Blog mit vielen Bildern beschleunigen

Katrin Baumann betreibt einen Blog mit großformatigen Fotos. Der responsive Bildsatz sorgt dafür, dass Leser auf dem Handy nicht unnötig die Desktop-Version laden.

Häufige Fragen

Wie viele Breiten entstehen aus einem Bild?

Ein Satz üblicher Breiten für Smartphone, Tablet und Desktop, jeweils mit erhaltenem Seitenverhältnis. Die genaue Anzahl richtet sich nach der Auflösung der Quelldatei.

In welchem Format erhalte ich die Bilder zurück?

Im ursprünglichen Format der Quelldatei, sofern Sie keine zusätzliche Umwandlung angeben. JPG, PNG und WebP werden unterstützt.

Muss ich srcset selbst in mein Template einbauen?

Ja. Das Tool liefert die einzelnen Bilddateien; das Eintragen in das srcset- und sizes-Attribut Ihrer Website übernehmen Sie oder Ihre Entwicklerin beziehungsweise Ihr Entwickler.

Was kostet ein responsiver Bildsatz?

$0.002 pro Anfrage und $0.005 pro erzeugtem Bild innerhalb des Satzes. Der Gesamtpreis hängt von der Anzahl der Breiten ab, die Sie anfordern.

Werden meine Bilder danach gespeichert?

Nein. Die Quelldatei wird nur für die Dauer der Verarbeitung übertragen und anschließend nicht aufbewahrt.

Ersetzt das ein CDN für Bilder?

Nein. Es liefert die passenden Dateigrößen; die Auslieferung an die Besucher übernimmt weiterhin Ihr Webserver oder Ihr CDN.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/image/responsive-set

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/image/responsive-set \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"image":"https://ejemplo.com/imagen.jpg"}'

const res = await fetch("https://api.kit.forhosting.com/image/responsive-set", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "image": "https://ejemplo.com/imagen.jpg"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/responsive-set",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-set", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-set", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "image": "https://ejemplo.com/imagen.jpg"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.responsive_set",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

pro Bild$0.005

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`max_mb`	15
`max_megapixels`	12

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →