Resize oder Crop: Bildgrößen für Web und Social richtig machen

Sie laden ein 6000×4000-Foto in einen Onlineshop-Eintrag, der es als 400×300 anzeigt, und die Pipeline des Shops skaliert und komprimiert es beim Veröffentlichen neu. Das Foto überlebt, aber der PNG-Screenshot, den Sie ebenfalls hochgeladen haben, sieht jetzt verschmiert aus: Das Skript hat ihn auf eine krumme Größe skaliert, durch eine zweite JPEG-Kompression geschickt und Ihre gestochen scharfen UI-Texte in weiche Kanten verwandelt. Ihre Quelldatei war nicht falsch — der Schaden entsteht, wenn eine bereits einmal kodierte Datei ein Resize und ein erneutes Speichern durchläuft, ohne dass bekannt ist, welche Endgröße geplant war. Dieser Leitfaden dreht sich darum, diesen Prozess zu kontrollieren: was Resize und Crop wirklich tun, warum DPI fast nichts mit Web-Pixeln zu tun hat, welche Maße die Social-Plattformen tatsächlich erwarten und wie die Browser-Werkzeuge von Convrs dieselbe Arbeit erledigen, ohne dass eine Datei Ihr Gerät verlässt.

Resize und Crop: zwei Operationen, ein Bild

Beide Befehle wirken ähnlich, weil sie die Bildabmessungen ändern, aber sie arbeiten unterschiedlich — und Sie sollten bewusst wählen, was Sie wollen.

• Resize skaliert das ganze Bild: Jedes Pixel wird auf eine neue Breite und Höhe gestaucht oder gestreckt; das Seitenverhältnis bleibt erhalten, es sei denn, Sie erzwingen eine nicht passende Größe. Es passt ein Bild an eine maximale Platzgröße an oder verkleinert die Datei vor dem Hochladen.
• Crop behält nur einen rechteckigen Bereich und verwirft alles außerhalb. Das Bild wird kleiner, weil Inhalt entfernt wurde, und das Seitenverhältnis ändert sich fast immer. Es rahmt neu, schneidet unruhige Ränder weg oder erfüllt ein Plattform-Format (16:9, 1:1, 4:5, 9:16).

Die praktische Reihenfolge ist meist erst Crop, dann Resize: erst auf das Verhältnis der Platzierung schneiden, dann das Ergebnis auf die Pixelgröße bringen. Andersherum resizen Sie einen Rahmen, der noch unerwünschten Inhalt trägt, oder Sie croppen eine Datei, die bereits interpoliert wurde — ein kleiner, aber echter Qualitätsverlust.

Der nicht umkehrbare Schaden: Rekompression

JPEG und WebP sind verlustbehaftet. Jedes Speichern quantisiert die Pixel neu und verwirft, was der Encoder für unsichtbar hält. Rekompression potenziert das: Ein verkleinert gespeichertes JPEG ist eine zweite Generation; feine Kanten — Text, Logos, UI-Screenshots — bekommen Halos, Mückenrauschen und Weichheit. In der dritten oder vierten Generation ist die Verschlechterung schon in der Thumbnail-Größe sichtbar. PNG ist pro Speicherung verlustfrei, aber ein auf eine nicht ganzzahlige Größe skalierter und neu kodierter PNG-Screenshot wird trotzdem interpoliert: Diagonalen werden treppenförmig, Text verschwimmt.

Die Regel, die das alles verhindert, lautet: Behalten Sie das Master. Speichern Sie die Aufnahme, skalieren Sie genau einmal und exportieren Sie daraus. Haben Sie das Original nicht mehr — oder haben Sie es, aber nur noch als rekomprimiertes Monster aus Schritt drei — behandeln Sie Ihre beste Kopie als neues Master und arbeiten Sie nicht weiter daran.

Pixel, nicht DPI: was „300 DPI“ wirklich bedeutet

Ein digitales Bild ist ein Pixelraster mit genau zwei Eigenschaften: Breite und Höhe. Genau das liest das Web. DPI (dots per inch) und PPI (pixels per inch) beschreiben, wie dicht ein Drucker diese Pixel aufs Papier legt — reine Druck-Konzepte, gespeichert als Metadaten. Ein 1200×1200-Bild ist auf jedem Bildschirm, ob Laptop oder Smartphone, 1200 Pixel groß, egal was im DPI-Feld steht.

Wenn ein Kunde ein „300-DPI-Bild“ verlangt, meint er fast immer Druckqualität. Bei 300 PPI braucht ein 5×7-Zoll-Druck etwa 1500×2100 Pixel; ein Web-Banner in dieser Größe ist übertrieben. Die DPI-Zahl im Editor zu erhöhen, fügt keine Pixel hinzu — sie schreibt nur Metadaten neu und re-kodiert in manchen Werkzeugen die Datei grundlos. Für Web und Social zählt ausschließlich die Pixelgröße.

Seitenverhältnisse und Vorgrößen für Social

Plattformen croppen und skalieren Ihre Uploads für ihre eigenen Platzierungen; maßgeblich ist Ihr Seitenverhältnis (Breite:Höhe). Liefern Sie das richtige Verhältnis, behalten Sie die Kontrolle über den Rahmen; liefern Sie das falsche, entscheidet der Crop der Plattform, was Ihr Publikum sieht. Die Verhältnisse, die Ihnen in der Praxis begegnen:

• 16:9 für Querformat-Videos und die meisten geteilten Link-Karten (Facebook/LinkedIn).
• 1:1 für Instagram-Feed-Quadrate und Profilraster.
• 4:5 für Hochformat-Beiträge — das höchste Verhältnis, das der Instagram-Feed ohne Crop zeigt.
• 9:16 für Stories, Reels, Shorts und TikTok.

Die Platzierungen, die man sich merken sollte:

Regel fürs Vorgrößen: Erstellen Sie die größte Platzierung, die Sie wirklich brauchen, und croppen Sie daraus nach unten. Zählen sowohl Feed-Beitrag (1:1) als auch Story (9:16), produzieren Sie das Quadrat mit 1080×1080 und bereiten Sie das Hochformat aus demselben Master vor — schneiden Sie kein 9:16 aus einem bereits kleinen Quadrat. Plattformen komprimieren Ihren Upload ohnehin neu; wenn Sie ihnen das exakte Verhältnis und eine bequem große Datei geben, komprimieren sie einmal statt zweimal.

Im Browser mit Canvas resizen

Beim Skalieren im Code — hier oder in einem Upload-Widget — stellt der Browser Ihnen Canvas bereit, und zwei Flags entscheiden über die Qualität. Scharfes Herunterskalieren eines Fotos will das Smoothing aktiviert haben, und imageSmoothingQuality: 'high' versetzt den Browser in einen teureren, aber sichtbar besseren Filter. EXIF-Rotation lohnt sich ebenfalls: Telefone speichern Fotos aufrecht, markieren sie aber mit einem Rotations-Tag, und naive drawImage-Aufrufe ignorieren das — Ihr Foto liegt dann auf der Seite.

async function resizeToMax(file, maxDim, quality = 0.82) {
  // Dekodiert das Bild und respektiert das EXIF-Rotations-Tag der Kamera
  const bitmap = await createImageBitmap(file, {
    imageOrientation: "from-image",
  });

  const scale = Math.min(1, maxDim / Math.max(bitmap.width, bitmap.height));
  const w = Math.max(1, Math.round(bitmap.width * scale));
  const h = Math.max(1, Math.round(bitmap.height * scale));

  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  ctx.drawImage(bitmap, 0, 0, w, h);

  // Zum Croppen stattdessen nur den gewünschten Quellbereich zeichnen:
  // ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, w, h);

  const blob = await new Promise((resolve) =>
    canvas.toBlob(resolve, "image/webp", quality) // oder "image/jpeg"
  );
  bitmap.close(); // Speicher des dekodierten Bitmaps freigeben
  return blob;
}

Die Skalierung ist absichtlich auf 1 gedeckelt: Die Klammer Math.min(1, ...) stellt sicher, dass diese Funktion nie hochskaliert — die Ausgabe ist höchstens gleich groß oder kleiner. Genau das ist die Regel für Web-Bilder.

In einem Tool resizen oder CSS entscheiden lassen

CSS skaliert die Darstellung, nicht die Bytes. max-width: 100%, object-fit: cover (ein CSS-Crop) und responsives srcset mit sizes passen das angezeigte Bild jedem Viewport an — das ist richtig und günstig. Aber der Browser lädt trotzdem die Originaldatei. Ein 6000×4000-JPEG hochzuladen, damit CSS es auf 400 Pixel schrumpft, verschwendet auf jeder Seitenansicht Megabytes und hält das Bild länger im Netz, als irgendjemand bemerkt.

Die webgerechte Reihenfolge: Skalieren Sie die Datei selbst auf die größte Größe, die eine Platzierung braucht — üblich ist der 2×-Faktor für Retina, also 1920 oder 2400 breit, falls es je vollbildsichtig wird —, lassen Sie dann CSS für kleinere Breakpoints verkleinern und nennen Sie in srcset ein paar explizite Größen für träge Geräte. Bilddateien sind statisch: Machen Sie sie einmal richtig, statt jedem Besucher eine Rekompression aufzubürden.

Runde Zahlen, Zweierpotenzen und die Kein-Upscale-Regel

Drei Gewohnheiten halten Exporte vorhersagbar. Erstens: Exportieren Sie auf runde Maße — 1200 breit, nicht 1193. Ungerade Zahlen entstehen aus verketteter Skalierungs-Mathematik und laden zu sichtbaren Interpolationsartefakten ein. Zweitens: Skalieren Sie mit einem festen Faktor, bevorzugen Sie saubere Schritte — 0.5×, 0.25× —, denn einige Pipelines (Tiling, Mipmaps, Textur-Atlanten, manche Thumbnail-Dienste) resamplen auf Zweierpotenzen am besten: Eine 2048-Pixel-Quelle, auf 1024 verkleinert, mittelt 2×2-Blöcke sauber, während 1000 fraktionales Sampling einführt.

Drittens die Regel, die mehr verschwommene Bilder repariert als jeder Filter: Skalieren Sie ein Web-Bild nie über seine native Auflösung hoch. Hochskalieren erfindet Pixel. Ein 400 Pixel breites Bild, auf 1200 gestreckt, enthält immer noch 400 Pixel echte Details — die Interpolation rät den Rest, und kein Schärfungsfilter fügt Information hinzu, die nie erfasst wurde. Braucht die Platzierung 1200 Pixel und Ihre Quelle hat 400, fotografieren Sie neu oder rendern Sie neu; versuchen Sie nicht, es im Editor zu „verbessern“.

Filter und Wasserzeichen: Endschritte in der richtigen Reihenfolge

Filter und Wasserzeichen gehören ganz ans Ende, nachdem Resize und Crop den endgültigen Rahmen fixiert haben. Erst Wasserzeichen, dann Crop, und Sie schneiden Ihr eigenes Logo ab; Wasserzeichen vor dem Resize, und der Text kann unleserlich schrumpfen oder die Marke skaliert relativ zu einem Rahmen, der nicht ausgeliefert wird.

Eine sinnvolle Reihenfolge: (1) den Look auf die Quelle anwenden — Graustufen, Sepia, Helligkeit/Kontrast, Sättigung, Unschärfe; (2) auf das Zielverhältnis croppen; (3) auf die Zielpixel resizen; (4) das Wasserzeichen mit Größe und Opazität relativ zum finalen Bild setzen; (5) einmal exportieren. Text-Wasserzeichen überleben kleine Größen meist besser als Bild-Wasserzeichen; 4–6 % der kürzeren Seite bei 30–50 % Opazität in einer Ecke ist die übliche, dezenteste Vorgabe. Einmal nach allen Bearbeitungen zu exportieren, hält die Qualitätsabgabe bei einem einzigen Generationsverlust.

Die Bildwerkzeuge in Convrs

Convrs liefert die ganze Pipeline im Browser, und Dateien verlassen nie Ihr Gerät: der Bild-Resizer skaliert nach Pixeln oder Prozent mit Qualitätskontrolle, der Bild-Cropper schneidet auf Seitenverhältnis-Vorgaben (16:9, 1:1, 4:5, 9:16) oder ein eigenes Rechteck, der Bild-Filter wendet Graustufen, Sepia, Helligkeit/Kontrast/Sättigung und Unschärfe an, der Wasserzeichen-Addierer legt ein Text- oder Bild-Wasserzeichen mit Position, Größe und Opazität über das Bild, und der Bild-Kompressor reduziert die Dateigröße für Uploads. Mit fixiertem Verhältnis croppen, auf Plattform-Pixel resizen, den Look schärfen, einmal wasserzeichen, für den Weg komprimieren — Master und alle Ableitungen bleiben auf Ihrem Rechner, nur der fertige Export wandert.