ForHosting KIT · Bilder bearbeiten & analysieren

Responsive Bildgrößen für CSS-Breakpoints berechnen

Responsive Layouts legen häufig fest, wie breit ein Bild an verschiedenen CSS-Breakpoints angezeigt wird.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Die Bild-Pipeline benötigt dagegen die tatsächlichen Pixelbreiten der zu erzeugenden Dateien. Dieser Rechner wandelt jede Anzeigebreite mit einem Pixeldichtefaktor in die erforderliche Quellbreite um und liefert eine sortierte Liste ohne Duplikate. So wird der Zusammenhang zwischen CSS, Displaydichte und Bildressourcen transparent, reproduzierbar und automatisierbar.

Übersetzen Sie Layoutregeln in Quellpixel

Beginnen Sie mit den Breakpoints aus Ihrem Design oder Stylesheet. Geben Sie für jeden Eintrag die minimale Viewportbreite an, ab der die Regel gilt, sowie die tatsächliche Anzeigebreite des Bildes. Beide Werte werden in CSS-Pixeln angegeben und können direkt aus der Spezifikation übernommen werden. Der Rechner sortiert die Zeilen nach dem Breakpoint, unabhängig von der Eingabereihenfolge. Jede Anzeigebreite wird mit der gewählten Pixeldichte multipliziert und auf die nächste ganze Zahl aufgerundet. Das Aufrunden verhindert, dass ein Bruchwert zu einer Quelle führt, die einen Pixel zu klein ist. Die Ausgabe bewahrt jede Zuordnung zur Kontrolle und enthält zusätzlich eine separate Liste eindeutiger Quellbreiten. Diese Liste ist der praktische Variantensatz, den Sie erzeugen, zwischenspeichern und in Ihrem Responsive-Image-Workflow referenzieren können.

Wählen Sie den Pixeldichtefaktor bewusst

Der Standardfaktor ist 2 und eignet sich als Ausgangspunkt für scharfe Bilder auf verbreiteten hochauflösenden Displays. Bei einer Anzeigebreite von 480 CSS-Pixeln wird somit eine 960 Pixel breite Quelle benötigt. Sie können einen anderen Wert zwischen 0.1 und 8 wählen, wenn Ihre Auslieferungsstrategie andere Ziele verfolgt. Der Wert 1 reduziert die Abmessungen für Displays mit normaler Dichte; 3 bereitet Dateien für dichtere Panels vor, benötigt jedoch mehr Speicher und Übertragung. Derselbe Faktor gilt für alle Breakpoints und bildet dadurch eine einheitliche Richtlinie ab. Das Werkzeug entscheidet weder, welche Datei Besucher herunterladen, noch schätzt es Kompression oder Dateigröße. Es berechnet ausschließlich erforderliche Breiten. Übergeben Sie die Ergebnisse an einen Optimierer oder Transformationsdienst und lassen Sie den Browser anhand des Markups und der Media-Regeln die passende Ressource auswählen.

Nutzen Sie das Ergebnis in Ihrer Bild-Pipeline

Die Antwort enthält den angewandten Faktor, eine sortierte Zeile für jeden Breakpoint und eine Zahlenliste eindeutiger Quellbreiten. Mit den einzelnen Zeilen können Sie die Implementierung gegen das Design prüfen, da ursprüngliche Anzeige- und berechnete Quellbreite nebeneinander stehen. Die eindeutige Liste vereinfacht die Automatisierung, wenn mehrere Layoutregeln dieselbe Datei benötigen. Zeigen etwa zwei Bedingungen ein Bild mit 600 CSS-Pixeln an, muss bei Faktor 2 nur eine Variante mit 1200 Pixeln erzeugt werden. Senden Sie jede eindeutige Breite an die Größenänderungsstufe, bewahren Sie dort das Seitenverhältnis und verwenden Sie die erzeugten URLs in Ihrer Komponente. Zuschnitt, Format, Qualität und Höhe gehören in diesen nachgelagerten Schritt, weil sie vom Bild und von der Art Direction abhängen. Leere Listen und doppelte Breakpoints werden abgelehnt, da sie keine eindeutige Responsive-Spezifikation bilden.

Anwendungsfälle

Varianten beim Build vorbereiten

Wandeln Sie Komponentenvorgaben in genau die eindeutigen Breiten um, die eine statische Website erzeugen soll.

Designübergaben prüfen

Prüfen Sie, ob gelieferte Dateien für die vereinbarte Dichte jedes Layoutzustands genügend Pixel enthalten.

Ein Bild-CDN konfigurieren

Erzeugen Sie eine stabile Breitenliste für Resize-Anfragen, Presets oder das Vorwärmen des Caches.

Häufige Fragen

Was kostet die Berechnung?

Jede Berechnung über die API kostet $0.002.

Warum werden Quellbreiten aufgerundet?

Ein Bild kann keine gebrochene Pixelbreite haben; Abrunden könnte weniger Pixel als für die angeforderte Dichte liefern.

Welche Pixeldichte ist voreingestellt?

Der Standardfaktor ist 2. Eine Anzeigebreite von 500 CSS-Pixeln erfordert daher eine Quelle mit 1000 Pixeln.

Erzeugt oder skaliert dieses Werkzeug Bilder?

Nein. Es berechnet die zu erzeugenden Breiten; ein Bildprozessor, Build-Werkzeug oder CDN übernimmt die Skalierung.

Warum enthält die Ausgabe sizes und source_widths?

sizes erhält die Zuordnungen zur Prüfung; source_widths entfernt Duplikate für eine effiziente Erzeugung.

Was geschieht bei einer leeren Breakpointliste?

Die Anfrage schlägt mit einem Fehler für ungültige Eingaben fehl, weil mindestens eine Layoutregel erforderlich ist.

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-breakpoint-sizes

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-breakpoint-sizes \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}'

const res = await fetch("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "breakpoints": [
      {
        "breakpoint": 0,
        "display_width": 320
      },
      {
        "breakpoint": 768,
        "display_width": 720
      },
      {
        "breakpoint": 1200,
        "display_width": 1080
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "breakpoints": [
        {
            "breakpoint": 0,
            "display_width": 320
        },
        {
            "breakpoint": 768,
            "display_width": 720
        },
        {
            "breakpoint": 1200,
            "display_width": 1080
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "breakpoints": [
    {
      "breakpoint": 0,
      "display_width": 320
    },
    {
      "breakpoint": 768,
      "display_width": 720
    },
    {
      "breakpoint": 1200,
      "display_width": 1080
    }
  ]
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.responsive_breakpoint_sizes",
  "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

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 →