CodeKitHubWas ist dieses Tool?
Ein Bild-Aufteiler zerlegt ein einzelnes Ausgangsbild in ein Raster aus kleineren, gleich großen Kacheln — am häufigsten für den Instagram-"Grid-Layout"-Trend, bei dem ein einzelnes breites Foto oder eine Illustration als Abfolge einzelner quadratischer Bilder gepostet wird, die sich beim gemeinsamen Betrachten auf einem Profilraster wieder zum Originalbild zusammensetzen.
Die Technik selbst ist einfache Geometrie — Breite und Höhe des Ausgangsbildes werden jeweils durch die Anzahl der Spalten und Zeilen geteilt, und jedes entstehende Rechteck wird als eigene Datei ausgeschnitten — aber das von Hand in einem allgemeinen Bildbearbeitungsprogramm präzise hinzubekommen ist umständlich und fehleranfällig, besonders bei einem 3x3- oder größeren Raster, wo schon eine kleine Verschiebung bei einer Kachel die gesamte Sequenz durcheinanderbringt.
Dieses Tool berechnet die Rastergrenzen präzise aus den tatsächlichen Pixelmaßen des Bildes und rendert jede Kachel mit der HTML5-Canvas-API vollständig in deinem Browser, sodass jede Kachel exakt passt und das Bild selbst niemals dein Gerät verlassen muss.
Warum sollte man es nutzen?
- Ein Illustrator hat gerade ein Panorama-Wandbild für einen Markenlaunch geliefert, und der Content-Plan sieht am Ankündigungstag eine komplette 3x3-Grid-Übernahme vor — du lädst das Bild hoch und hast die neun fertigen Kacheln in einer Minute.
- Du willst eine "Vorher/Nachher"-Enthüllung über zwei aufeinanderfolgende Posts machen, ohne Pixel von Hand in Photoshop auszumessen, damit beide Hälften perfekt zusammenpassen.
- Du betreust den Instagram-Account einer Marke, und der Kunde verlangt wöchentlich Karussell-Posts aus breiten Kampagnen-Bannern — du musst denselben Zuschnitt immer wieder wiederholen, ohne jedes Mal Zeit zu verlieren.
- Du hast schon einmal versucht, ein Foto von Hand in deinem üblichen Editor zu zerschneiden, und die Kacheln passten beim Hochladen nicht zusammen — ein winziger Pixel-Versatz in einer Ecke reichte, um das ganze Raster zu ruinieren.
- Du arbeitest mit Kundendaten oder unveröffentlichten Produktbildern und brauchst ein Tool, das die Datei vor dem offiziellen Launch nicht auf einen Server hochlädt.
Anleitung
- Klicke auf die Ablagefläche (oder ziehe per Drag & Drop), um ein Bild von deinem Gerät auszuwählen.
- Wähle eine Rastergröße — 1x2, 1x3, 2x2, 3x3 oder 1x4 — aus dem Dropdown-Menü.
- Sieh dir die resultierenden Kacheln sofort unter den Steuerelementen an.
- Klicke auf "Alle herunterladen (ZIP)", um jede Kachel als nummerierte PNG-Datei in einem einzigen ZIP-Archiv zu erhalten.
Beispiel
Eingabe
Ein 1200×1200px großes quadratisches Foto, Raster: 3x3Ausgabe
9 Kacheln zu je 400×400px, tile-1.png bis tile-9.pngDie Kacheln sind von links nach rechts, von oben nach unten nummeriert — in der gleichen Reihenfolge, in der du sie auf Instagram hochladen würdest (beginnend mit der unteren rechten Kachel und rückwärts arbeitend, sodass bei jedem neuen Post ältere Kacheln nach unten geschoben werden und sich das Raster korrekt wieder zusammensetzt).
Gängige Rastergrößen und ihre Verwendung
Unterschiedliche Rastergrößen eignen sich für unterschiedliche Arten von Beiträgen und Enthüllungen.
| Raster | Kacheln | Typische Verwendung |
|---|---|---|
| 1x2 | 2 | Einfache Vorher/Nachher- oder zweiteilige Enthüllung |
| 2x2 | 4 | Kleine quadratische Enthüllung, schnell zu posten |
| 1x3 | 3 | Eine einzelne Reihe über drei aufeinanderfolgende Posts |
| 3x3 | 9 | Komplette Profilraster-Übernahme — das klassische Instagram-Grid-Layout |
| 1x4 | 4 | Ein breites Panorama, aufgeteilt auf vier Posts in einer Reihe |
Verwandte Tools
Für andere lokale Bildbearbeitung probiere diese Tools aus.
Veröffentlichungsreihenfolge: warum rückwärts gepostet wird
Dass die Kacheln von der unteren rechten Ecke aus nummeriert werden statt von oben links, hängt damit zusammen, wie der Instagram-Feed funktioniert: Jeder neue Beitrag landet immer an erster Stelle (oben links) und schiebt den Rest nach unten — würdest du die Kacheln in der "natürlichen" Leserichtung posten, würde das Raster am Ende spiegelverkehrt sein.
Postest du zuerst die untere rechte Kachel, dann die mittlere der unteren Reihe und so weiter bis zur oberen linken Kachel, schiebt jeder neue Beitrag den Rest genau an die richtige Position — mit dem letzten Post (der oberen linken Kachel) setzt sich das komplette Bild perfekt auf deinem Profil zusammen.
Hat dein Account bereits ältere Beiträge darunter, beachte, dass der Grid-Effekt nur bei zusammenhängenden, aufeinanderfolgenden Kacheln funktioniert — jeder dazwischengeschobene Beitrag zerstört die Illusion, daher solltest du alle Kacheln hintereinander posten, ohne etwas anderes dazwischen zu veröffentlichen.
Häufig gestellte Fragen
Welche Rastergröße sollte ich für ein Instagram-Profilraster verwenden?
3x3 (9 Kacheln) ist die gängigste Wahl, da es eine standardmäßige dreispaltige Instagram-Profilansicht genau einmal füllt. Eine 2x2- oder 1x3-Aufteilung eignet sich für eine kleinere Enthüllung, die nicht dein gesamtes aktuelles Raster einnimmt.
In welcher Reihenfolge sollte ich die Kacheln posten?
Da Instagrams Raster die neuesten Beiträge zuerst anzeigt (oben links), musst du die Kacheln in der Regel in umgekehrter Reihenfolge veröffentlichen — beginnend mit der unteren rechten Kachel deines Rasters und endend mit der oberen linken — sodass sie, sobald alle Kacheln gepostet sind, korrekt von links nach rechts, oben nach unten gelesen werden.
Muss das Bild ein perfektes Quadrat sein?
Nein, aber für ein symmetrisches Rasterlayout (wie 3x3) ergibt ein quadratisches Ausgangsbild quadratische Kacheln, was der Art entspricht, wie Instagram quadratische Grid-Posts zuschneidet. Ein nicht-quadratisches Bild lässt sich trotzdem gleichmäßig aufteilen, nur in rechteckige statt quadratische Kacheln.
In welchem Dateiformat werden die Kacheln gespeichert?
Jede Kachel wird als PNG-Datei innerhalb des heruntergeladenen ZIP-Archivs exportiert, was die Qualität ohne verlustbehaftete Neukomprimierung erhält.
Wird mein Bild irgendwohin hochgeladen?
Nein. Das Bild wird direkt in deinen Browser eingelesen und vollständig clientseitig mit der Canvas-API aufgeteilt. Es wird nichts an einen Server gesendet — auch die ZIP-Datei wird lokal in deinem Browser zusammengestellt.
Welche Mindestauflösung braucht mein Ausgangsbild für ein 3x3-Raster?
Je größer das Originalbild, desto besser sieht jede Kachel im fertigen Raster aus. Zum Vergleich: Instagram zeigt jede Profil-Miniatur mit etwa 340×340px an, daher lässt ein Ausgangsbild von mindestens 1200×1200px (ergibt 400×400px-Kacheln bei einem 3x3-Raster) reichlich Spielraum, ohne dass Pixelbildung auffällt.
Kann ich ein nicht-quadratisches Raster nutzen, etwa ein breites Panorama-Rechteck?
Ja — die Optionen 1x2, 1x3 und 1x4 sind genau dafür gedacht: Sie teilen das Bild in horizontale Streifen statt quadratische Kacheln, ideal für ein Panorama-Banner, das über mehrere aufeinanderfolgende Karussell-Posts oder eine Rasterzeile verteilt wird.
Was passiert, wenn sich mein Bild nicht exakt gleich teilen lässt, etwa wenn die Breite kein Vielfaches von 3 ist?
Das Tool berechnet die Grenzen jeder Kachel aus den tatsächlichen Pixelmaßen und rundet intern bei Bedarf, sodass die entstehenden Kacheln praktisch identisch groß sind, auch wenn sich Breite oder Höhe nicht in exakte Zahlen teilen lassen — der Unterschied liegt, falls überhaupt vorhanden, bei höchstens einem Pixel und ist mit bloßem Auge nicht erkennbar.
Kann ich mehrere Bilder gleichzeitig aufteilen?
Nein — dieses Tool verarbeitet ein Bild pro Sitzung. Um mehrere Fotos aufzuteilen, wiederhole den Vorgang für jedes einzeln; da alles lokal in deinem Browser ohne Upload abläuft, ist jede Aufteilung praktisch sofort erledigt.