Zum Hauptinhalt springen
ImageSize

Bildgröße ändern: Anleitung

Die drei Werkzeuge sind klar getrennt: Umgestaltung geht an den Konverter, Icons an die Schmiede, reine Größenreduktion an die Stapelkompression. Was folgt, läuft in der Reihenfolge, in der du sie tatsächlich benutzt, mit dem Standardwert für jeden Schritt und wie du ihn änderst; am Ende steht eine Fehlersuche.

Alle drei laufen lokal im Browser, ohne Upload-Endpunkt und ohne Konto — sobald ein Bild geladen ist, funktionieren sie auch offline weiter.

Größenverzeichnis

Ein Bild laden

Drei Wege hinein, gleiches Ergebnis

Drei Methoden, gleiches Ergebnis:

  • Ziehen — der Konverter nimmt ein Ablegen überall auf der Seite an (ersetzt das aktuelle Bild); die Stapelkompression hängt an, wenn schon Ergebnisse da sind; die Schmiede will es auf der Upload-Fläche.
  • Datei wählen — klicke auf die Upload-Fläche, um den Dateidialog zu öffnen.
  • Einfügen — nach einem Screenshot ⌘/Strg + V, was sogar das Zwischenspeichern auf der Platte spart.

Zu den Formaten: Konverter und Schmiede nehmen JPG / PNG / WebP / AVIF / GIF (bei GIF nur das erste Frame, die Animation bleibt nicht erhalten); die Stapelkompression nimmt JPG / PNG / WebP / AVIF und überspringt animierte GIFs und SVG mit einer Erklärung.

Zur Größe: Ziele auf eine lange Kante, die nicht kleiner als das Ziel ist. Konverter und Schmiede verkleinern alles über 4096px vor der Erzeugung auf 4096px — dieser Schritt begrenzt nur den Speicher und beeinflusst die Ausgabe nicht, denn die größte Vorgabe ist gerade YouTube Kanalbanner (2560 × 1440). Die Stapelkompression begrenzt jede Datei auf 50.00 MB und jeden Stapel auf 60.

Eine leichte Falle: Ein Bild auf der Startseite zu ziehen springt zum Konverter und nimmt das Bild mit, übergeben über den Speicher desselben Tabs. Ein Neuladen oder ein neuer Tab verliert es, also wähle erneut.

Zuschneiden oder einpassen

Kanten abschneiden oder ringsum auffüllen

Das ist die eine Wahl, die das Ergebnis sichtbar verändert. Keiner der Modi ist besser; es hängt davon ab, was du brauchst.

Zuschneiden (cover)
Ergebnis
Füllt den Rahmen, Überstand wird abgeschnitten
Am besten für
Screenshots, Poster, mittige Motive
Achtung
Randinformation geht verloren; der Brennpunkt entscheidet welche Seite
Hintergrund
Wird nicht genutzt
Einpassen (contain)
Ergebnis
Ganzes Bild sichtbar, Hintergrund ringsum
Am besten für
Diagramme, Designs mit Schrift, alles, was ganz zu sehen sein muss
Achtung
Fügt Füllung hinzu; wähle einen passenden Hintergrund
Hintergrund
Das ist die Füllfarbe, standardmäßig Weiß

Beim Umschalten wird jedes Ergebnis sofort neu berechnet — kein Knopf nötig.

Brennpunkt

Bildausschnitt, wenn das Motiv nicht mittig sitzt

Der Brennpunkt entscheidet, welche Seite verworfen wird. Oben behält den oberen Teil, unten den unteren; beim Einpassen steuert er, an welchem Ende sich die Füllung sammelt.

Wann es zählt: ein Hochformat geht in ein 16:9-Thumbnail, ein Querformat in ein 9:16-Cover, ein Hochformatfoto in einen quadratischen Post. In diesen drei Fällen schneidet die Standardmitte gern genau dort, wo sie nicht sollte.

Zuschneiden-Dialog

Manuelle Auswahl, Seitenverhältnis sperren

Der Brennpunkt bringt dich nur in die Nähe. Um einen bestimmten Bereich exakt zu treffen, nimm den Zuschneiden-Dialog. Er hat zwei unabhängige Konzepte, und sie getrennt zu halten ist genau das, was ihn nicht verwirrend macht:

  • Das Auswahlfeld ist am Bildschirm fixiert; durch Ziehen entscheidest du, welcher Bereich überlebt.
  • Der Bild-Zoom verändert nur das Bild hinter dem Feld; das Feld selbst bewegt sich nicht.

Die Verhältnis-Chips stammen aus den 8 verschiedenen Verhältnissen der 11 Vorgaben: 16:9 (1280×720), 3:1 (1500×500), 1:1 (400×400), 9:16 (1080×1920), 1:1.56 (420×654), 40:21 (1200×630), 4:1 (1584×396), 2:3 (1000×1500). Jeder Chip zeigt die Pixelgröße der ersten Vorgabe mit diesem Verhältnis, und solange ein Chip aktiv ist, skalieren die Eckgriffe proportional.

Zuschnitte stapeln sich: jedes „Zuschnitt anwenden“ schneidet erneut aus dem aktuellen Bild, statt von vorn am Original zu beginnen. Zum Rückgängigmachen dient „Zuschnitt zurücksetzen“ in der Quellenleiste. Der Zuschneiden-Dialog der Schmiede bietet nur 1:1, weil jede Ausgabe quadratisch ist.

⌘ / Strg + VEin Bild aus der Zwischenablage einfügen — funktioniert in allen drei Werkbänken
Mausrad / PinchBild zoomen; die Auswahl bleibt stehen
Leertaste / MittelziehenBild verschieben; Rechtsziehen geht auch
+ / −In 1,25×-Schritten zoomen
0Bild wieder ins Fenster einpassen
EckgriffeProportionale Skalierung bei gesperrtem Verhältnis — verzerren ist unmöglich
EscZuschneiden-Dialog, Vorschau oder ein offenes Dropdown schließen
← / →Vorheriges / nächstes Bild in der Vorschau
Enter / LeertasteVorschau von einer Karte öffnen

Auf dem Handy gibt es keine Leertaste: ein Finger zieht das Feld, zwei Finger zoomen per Pinch und verschieben das Bild. Alles andere verhält sich gleich.

Format und Qualität

Wählen zwischen JPEG und PNG

JPEG eignet sich für Fotos und die meiste Content-Arbeit und halbiert die Datei, wenn keine Transparenz nötig ist. Die Qualität steht standardmäßig auf 92 (Bereich 40–100): unter 80 entstehen sichtbare Streifen in Verläufen und Flächen, über 95 wächst die Datei ohne sichtbaren Gewinn.

PNG ist für Transparenz (Untertitelbalken über Video, freigestellte Logos) oder große Flächen mit Volltonfarbe und Schrift. Transparenz einzuschalten wechselt automatisch zu PNG, weil JPEG gar keinen Alphakanal hat; zurück auf JPEG schaltet den Schalter aus, sodass du nie bei „transparent angezeigt, weiß exportiert“ landest.

PNG ist verlustfrei, deshalb wird der Qualitätsregler ausgegraut. Das ist so gewollt.

Export und Benennung

Einzeldateien, ZIP, Dateinamenregeln

Einzelne Downloads liegen unten rechts an jeder Karte oder in der Vorschau unter „Nur dieses herunterladen“; das ganze Set ist der Knopf „ZIP herunterladen“ in der Ergebnisleiste. Die Vorschau hat zwei Modi: die Plattformansicht zeichnet die echte Form der Plattform (runder Avatar, abgerundete Karte, Oberflächen-Overlays inklusive), während Original die exportierten Pixel 1:1 zeigt.

Dateinamen sind fest, damit sie direkt in eine Asset-Bibliothek fallen: plattform-zweck-breitexhoehe.jpg, zum Beispiel {sample}. Das Archiv heißt social-sizes-20261024-1208.zip mit lokalem Zeitstempel.

Wenn du nicht alles brauchst, setze in „Größen exportieren“ rechts in der Werkzeugleiste nur die Häkchen, die du brauchst. Weniger Dateien sparen Zeit und Canvas-Speicher.

Von einem Logo zum ganzen Set

Eine ganze Größenpalette aus einer Quelle

Die Schmiede macht aus einem Bild 20 Dateien in sechs Gruppen: Browser-Tab (Favicon), Navigationslogo, iPhone-Home-Bildschirm, Android / PWA, Chrome-Erweiterung sowie runde Avatare und kleine Größen. Jede Größe, jedes Format und jeder Dateiname folgt der Dokumentation der Plattform statt unserer eigenen Erfindung.

Ein quadratisches Logo mit 1024 × 1024 ist die empfohlene Quelle. Nicht quadratisch geht auch — es wird proportional mit Innenabstand eingebettet und nie gestreckt.

Was die vier Regler tun

  • Form (Quadrat / abgerundet / Kreis) ändert nur die gezeichnete Kontur. iOS-Home-Bildschirm-Icons und maskierbare sind immer randlos: das System legt die Maske an, und selbst vorzuschneiden ergibt einen doppelten Rand mit schwarz gefüllten Ecken.
  • Innenabstand (0–20 %) gilt nur für die Größen, die tatsächlich das Logo zeigen (Favicon, Navigationslogo, PWA-Haupticon). Avatare und Touch-Icons bleiben randlos, sonst denken Leute „das Bild ist geschrumpft“; maskierbare behalten mindestens 10 %, weil das System nur die mittleren 80 % garantiert.
  • Hintergrund / transparent: iOS erlaubt kein Alpha, und transparente Pixel werden schwarz gefüllt, deshalb sind Apple-Touch- und PWA-Größen zwangsweise deckend und der Transparenzschalter bewirkt bei ihnen nichts.
  • Nicht hochskalieren bettet native Pixel ein. Ist die Quelle kleiner als das Ziel, bleibt das Pixelraster statt eines Weichzeichners — was das Problem mit einem kleinen Logo sofort sichtbar macht.

Zwei Ausgaben, die oft falsch gelesen werden

favicon.ico ist eine einzelne Datei mit eingebetteten 16 / 32 / 48-PNGs, aus denen der Browser eines wählt — teile sie nicht in drei Dateien. favicon.svg und logo.svg sind Bitmaps, die als Übergangsbehälter in SVG eingebettet sind: eine Bitmap kann kein echter Vektor werden, diese Dateien bekommen also nur den Dateinamen und die Referenzierung richtig. Für die Produktion sollte das Design unter demselben Namen einen echten Vektor exportieren.

Ausliefern

Die Dateien nutzen die üblichen Namen der Plattformen (favicon.ico, favicon-16x16.png, apple-touch-icon.png, android-chrome-512x512.png, android-chrome-maskable-512x512.png, icon-192.png); lege sie alle ins Site-Root. „Alles als ZIP herunterladen“ in der Quellenleiste nimmt das ganze Paket als icons-20261024-1208.zip, inklusive README.txt mit Quellmaßen, Zuschnittbereich, Renderparametern und Dateiliste. Die Snippets unten liefern dir die Blöcke für den HTML-Head und manifest.json zum Kopieren.

Um das Ergebnis zu beurteilen, schau auf die Karten — jede zeichnet das Icon in seiner echten Anzeigegröße, und Öffnen vergrößert es bis auf Pixelebene. Hat die 16px-Version keine erkennbare Kontur, muss die Marke einfacher werden.

Einen Stapel kleiner machen

Qualitätsleiter und Zielgröße

Die Stapelkompression tut genau eine Sache: eine Reihe ähnlicher Bilder kleiner machen, ohne die Komposition anzutasten. Anders als der Konverter schneidet sie nie zu und ändert kein Verhältnis; anders als die Schmiede erzeugt sie keine neuen Dateitypen.

Ausgabeformat

Intelligent (Standard) behält JPEG-Quellen als JPEG und wandelt PNG / WebP / AVIF-Quellen in WebP — WebP behält Alpha, ist meist weniger als halb so groß wie PNG, und PNG zu PNG neu zu kodieren hilft kaum. Du kannst JPEG / WebP / PNG auch erzwingen. Kann der Browser WebP nicht kodieren, fällt er auf PNG zurück, die Endung folgt, und die Seite sagt es oben.

Qualität und Abmessungen

Der Qualitätsregler reicht von 40–100, Standard 80; die drei Voreinstellungen daneben sind 轻压缩 90 / 推荐 80 / 高压缩 60. Alles darunter zeigt sichtbare Blockartefakte, weshalb die Untergrenze 40 ist.

„Längste Kante“ bietet keine Skalierung / 3840 / 2560 / 1920 / 1280 und skaliert nur herunter: eine Quelle unterhalb der Grenze bleibt unangetastet und wird nie hochinterpoliert. Mit PNG eingestellt gelten weder Qualitätsregler noch Zielgröße — PNG ist verlustfrei, eine Steuerung über die Größe ist also sinnlos.

Wie die Zielgröße verfolgt wird

Bei einer KB-Grenze läuft es zuerst die Qualitätsleiter hinunter (bis zu sechs Stufen, bis 30), dann verkleinert es die Abmessungen in 25-%-Schritten (bis zu drei Runden, nie unter 320px). Erst wenn beides nicht reicht, wird die Zeile als „verfehlt“ markiert — Erfolg wird nicht vorgetäuscht.

Das Ergebnis ist nie schlechter als das Original

Wurde nichts skaliert und die Kodierung fiel größer aus, wird die Originaldatei geliefert und als „Original behalten“ markiert. Diese Regel macht Kompression niemals zum Nettoverlust, zum Preis davon, dass manche Zeilen aussehen, als hätten sie nichts getan.

Parameter komprimieren nicht automatisch neu

Qualität, Größe oder Format zu ändern löst nur einen Hinweis aus; die Ergebnisse auf dem Bildschirm stammen noch von den alten Parametern. Bestätige und drücke auf „Neu komprimieren“. Stapel × mehrere Durchläufe ist teuer, und pro Reglerbewegung neu zu rechnen würde den Hauptthread blockieren.

Benennung und Vergleich

Ausgabenamen hängen -min an den Originalnamen (mit neuer Endung, falls sich das Format ändert); Dubletten im Stapel bekommen -2, -3, sonst würden spätere ZIP-Einträge frühere überschreiben. Das Archiv ist compressed-images-20261024-1208.zip. Klicke eine Zeile, um die Vergleichs-Lightbox zu öffnen; der Trenner lässt sich pixelweise ziehen, und ← / → wechseln das Bild.

Neukodierung schreibt nur Pixel, deshalb fällt EXIF (Kamera, Blende, Verschlusszeit, GPS) weg. Das ist meist gewollt, aber wenn du auf EXIF archivierst, sichere die Originale vorher.

Grenzen

Obergrenzen für Größe, Anzahl und Abmessungen

  • Kein Server — kein Upload-Endpunkt und kein Konto. Das bringt Privatsphäre und Offline-Nutzung; der Preis ist, dass ein Neuladen alles löscht, Ergebnisse existieren nur in diesem Tab.
  • 4096-px-Verkleinerung — Konverter und Schmiede skalieren alles über 4096 vor der Erzeugung herunter. Bilder unter dem Ziel werden trotzdem hochskaliert; dieser Schritt rettet sie nicht.
  • Canvas-Speicher — alle 11 Größen auf einmal auf dem Handy zu erzeugen kann ruckeln; weniger Auswahl hilft. Die Stapelkompression begrenzt auf 60 Bilder pro Stapel und 50.00 MB pro Datei.
  • Formatgrenzen — ein animiertes GIF neu zu kodieren verliert die Animation, SVG ist Vektor, Rastern verzerrt also zwangsläufig, und Browser können HEIC nicht dekodieren. Die Stapelkompression überspringt alle drei und sagt warum.
  • Transparenz hängt am Format — transparente Ausgabe gibt es nur als PNG; in JPEG werden transparente Bereiche mit der gewählten Hintergrundfarbe gefüllt.

Fehlersuche

Prüfe dies der Reihe nach, wenn ein Ergebnis falsch aussieht

Die Ausgabe sieht unscharf aus

Die Quelle ist zu klein. Ein quadratischer Post mit 1080 Breite braucht mindestens 1080px Quellbreite, und YouTube Kanalbanner braucht 2560px. Prüfe die Maße in der Quellenleiste — alles unter dem Ziel wird definitiv hochinterpoliert.

Wichtiger Inhalt wurde abgeschnitten

Zuschneiden (cover) schneidet immer Kanten ab; das ist seine Definition, kein Fehler. Wechsle auf Einpassen oder sperre im Zuschneiden-Dialog das Zielverhältnis und rahme den benötigten Bereich.

Der Avatar sieht aus, als fehle ein Stück

Avatare werden kreisförmig zugeschnitten, die Ecken erscheinen also nie. Halte das Motiv in einem mittigen Kreis von 80 % Durchmesser; die Plattformansicht in der Vorschau zeigt das echte runde Ergebnis.

Das exportierte PNG ist viel größer als erwartet

Normal. Ein Bild mit 1080×1920 als PNG kann 3–5 MB groß sein. Ohne Transparenz nimm JPEG — derselbe Inhalt liegt meist bei 200–500 KB.

Die Seite hängt, nachdem ich auf dem Handy ein großes Bild geladen habe

Mobile Browser begrenzen den Canvas-Speicher pro Seite. Reduziere die Auswahl in „Größen exportieren“ rechts in der Werkzeugleiste und erzeuge zwei oder drei auf einmal; das hilft deutlich.

Einige Bilder wurden in der Stapelkompression nicht kleiner

Zwei Fälle: die Quelle war schon stark komprimiert, Neukodieren schadet also nur; oder „längste Kante“ war aus, die Abmessungen blieben und die Kodierung wuchs. Beides liefert die Originaldatei und markiert die Zeile als „Original behalten“.

Icons haben nach der Installation schwarze Ränder

iOS erlaubt kein Alpha, transparente Pixel werden also schwarz. Hier sind Apple-Touch- und PWA-Größen zwangsweise deckend, aber wenn die Quelle ein dunkles Logo auf Transparenz ist, setze den Hintergrund vor dem Export nahe an die Logofarbe.

Ich habe die Kompressionsparameter geändert und nichts ist passiert

Die Stapelkompression rechnet bewusst nicht live neu — ein Stapel kann Dutzende Bilder mit bis zu neun Kodierungen je Bild umfassen. Parameteränderungen lösen nur einen Hinweis aus; drücke „Neu komprimieren“ zum Bestätigen. Die Einzelbild-Werkzeuge aktualisieren live.

Nach einem Neuladen ist alles weg

Keines der drei Werkzeuge hat einen Upload-Endpunkt, es gibt also keine Serverkopie: Bilder leben im Speicher dieses Tabs, und Neuladen, Schließen oder ein neuer Tab löscht sie. Lade zuerst herunter, was du brauchst.


Noch eine Frage zu einer bestimmten Größe?Die Größenbibliothek dokumentiert für jeden Eintrag die echten Anzeigeregeln, Overlays und den häufigsten Fehler; der Konverter, die Icon-Schmiede, und der Stapelkompressor sind alle einsatzbereit.