CodeKitHubWat is deze tool?
Een afbeelding splitter verdeelt één bronafbeelding in een raster van kleinere tegels van gelijke grootte, meestal voor de Instagram-"rasterlayout"-trend waarbij één brede foto of illustratie wordt gepost als een reeks losse vierkante afbeeldingen die samen weer het origineel vormen wanneer ze samen op een profielraster worden bekeken.
De techniek zelf is simpele meetkunde — de breedte en hoogte van de bronafbeelding worden elk gedeeld door het aantal kolommen en rijen, en elk resulterend rechthoek wordt uitgesneden als eigen bestand — maar het nauwkeurig handmatig doen in een algemene fotobewerker is lastig en foutgevoelig, vooral bij een raster van 3x3 of groter, waar een kleine verschuiving in één tegel de hele reeks verstoort.
Deze tool berekent de rastergrenzen precies op basis van de daadwerkelijke pixelafmetingen van de afbeelding en rendert elke tegel met de HTML5 Canvas API volledig in je browser, zodat elke tegel exact aansluit en de afbeelding zelf je apparaat nooit verlaat.
Waarom gebruiken?
- Je hebt net een brede illustratie of foto af die je als een 3x3-rasterovername op je Instagramprofiel wilt onthullen, en je hebt alle negen tegels pixelperfect uitgesneden nodig zodat de naden aansluiten wanneer bezoekers voorbijscrollen.
- Je lanceert een product en wilt een panoramische bannerafbeelding laten uitvouwen over een carrousel van vier posts in plaats van ongemakkelijk in één vierkante crop te proppen.
- Je hebt ooit geprobeerd een rasterafbeelding handmatig te splitsen in een gewone fotobewerker, de tegels sloten niet helemaal aan, en je wilt die fout niet herhalen op een raster van 9 tegels waar één slechte crop de hele reeks verstoort.
- Je hebt alle negen (of vier, of zes) tegels klaar nodig voordat je begint met het inplannen van posts, niet één voor één uitgesneden tussen elke upload door — de enkele ZIP-download geeft je de hele set in één keer.
- Je wilt precies bekijken hoe het raster er samen tegelt uitziet voordat je je vastlegt op de postvolgorde, zodat je een ongelukkige croplijn of een niet-gecentreerd onderwerp opmerkt voordat het live staat op je profiel.
- 100% lokaal: je afbeelding wordt volledig in je browser verwerkt met Canvas en nooit naar een server geüpload.
Hoe te gebruiken
- Klik op de dropzone (of sleep en zet neer) om een afbeelding van je apparaat te kiezen.
- Kies een rastergrootte — 1x2, 1x3, 2x2, 3x3 of 1x4 — uit het dropdownmenu.
- Bekijk direct een voorvertoning van de resulterende tegels onder de bedieningselementen.
- Klik op "Alles downloaden (ZIP)" om elke tegel als genummerd PNG-bestand in één ZIP-archief te krijgen.
Voorbeeld
Invoer
Een vierkante foto van 1200×1200px, raster: 3x3Uitvoer
9 tegels van elk 400×400px, tile-1.png tot en met tile-9.pngTegels worden genummerd van links naar rechts, boven naar onder — dezelfde volgorde waarin je ze naar Instagram zou uploaden (beginnend bij de rechteronder-tegel en teruglopend, zodat naarmate je nieuwe posts publiceert, oudere tegels naar beneden schuiven en het raster correct wordt samengesteld).
Gangbare rastergroottes en hun toepassingen
Verschillende rastergroottes passen bij verschillende soorten posts en onthullingen.
| Raster | Tegels | Typisch gebruik |
|---|---|---|
| 1x2 | 2 | Eenvoudige voor/na of tweedelige onthulling |
| 2x2 | 4 | Kleine vierkante onthulling, snel te posten |
| 1x3 | 3 | Eén rij verspreid over drie opeenvolgende posts |
| 3x3 | 9 | Volledige profielrasterovername — de klassieke Instagram-rasterlayout |
| 1x4 | 4 | Een brede panorama gesplitst over vier posts op een rij |
Gerelateerde tools
Voor andere lokale afbeeldingsbewerking, probeer deze tools.
→ Afbeelding Vergroter/Verkleiner · Afbeelding Compressor · Afbeelding Bijsnijder
Een strakke onthulling krijgen: tips voor de bronafbeelding
De splitsing zelf is exacte wiskunde, maar hoe goed het uiteindelijke raster eruitziet hangt sterk af van de bronafbeelding die je erin stopt — een paar gewoontes voordat je uploadt besparen veel frustratie achteraf.
Begin met een vierkante (of bijna-vierkante) bronafbeelding voor een 3x3- of 2x2-raster, want anders croppt Instagram zelf je tegels naar vierkant wanneer je ze post, wat mogelijk inhoud wegsnijdt die de splitter juist bewaarde. Houd belangrijke details van je onderwerp uit de buurt van waar de rasterlijnen komen te vallen — een gezicht of aandachtspunt dat precies op een tegelgrens valt, oogt visueel gebroken, ook als de crop wiskundig perfect is. En exporteer op de hoogste resolutie die je beschikbaar hebt voordat je splitst; Instagram comprimeert toch bij het uploaden, dus starten met een grotere bronafbeelding geeft elke individuele tegel meer detail om die compressie te overleven dan starten met een afbeelding die al voor één post op maat was gemaakt.
Veelgestelde vragen
Welke rastergrootte moet ik gebruiken voor een Instagramprofielraster?
3x3 (9 tegels) is de meest gangbare keuze omdat het precies één keer een standaard driekoloms Instagramprofielweergave vult. Een 2x2- of 1x3-splitsing werkt voor een kleinere onthulling die niet je hele recente raster overneemt.
In welke volgorde moet ik de tegels posten?
Omdat het Instagramraster de nieuwste posts eerst toont (linksboven), moet je over het algemeen tegels in omgekeerde volgorde publiceren — beginnend met de rechteronder-tegel van je raster en eindigend met de linksboven-tegel — zodat ze, zodra alle tegels zijn geplaatst, correct van links naar rechts, boven naar onder verschijnen.
Moet de afbeelding perfect vierkant zijn?
Nee, maar voor een symmetrische rasterlayout (zoals 3x3) levert een vierkante bronafbeelding vierkante tegels op, wat overeenkomt met hoe Instagram vierkante-rasterposts croppt. Een niet-vierkante afbeelding wordt nog steeds gelijkmatig gesplitst, alleen in rechthoekige in plaats van vierkante tegels.
In welk bestandsformaat worden de tegels opgeslagen?
Elke tegel wordt geëxporteerd als PNG-bestand in het gedownloade ZIP-archief, wat de kwaliteit behoudt zonder verliesgevende herencodering.
Wordt mijn afbeelding ergens naartoe geüpload?
Nee. De afbeelding wordt direct in je browser ingelezen en volledig client-side gesplitst met de Canvas API. Er wordt niets naar een server verzonden — ook het ZIP-bestand wordt lokaal in je browser samengesteld.
Verliest het splitsen kwaliteit ten opzichte van mijn originele afbeelding?
Er vindt geen herencodering plaats buiten de exportstap — elke tegel wordt direct uit de pixeldata van de bronafbeelding gesneden en geëxporteerd als PNG, een verliesvrij formaat, dus de enige kwaliteitswijziging komt van Instagrams eigen uploadcompressie, hetzelfde wat gebeurt met elke foto die je daar plaatst.
De afmetingen van mijn bronafbeelding zijn niet gelijk deelbaar door het raster — wat gebeurt er met de overgebleven pixels?
De tool berekent tegelgrenzen op basis van de daadwerkelijke breedte en hoogte van de afbeelding gedeeld door het aantal kolommen en rijen, dus elke rest wordt verdeeld over de tegelgrenzen in plaats van volledig te worden weggesneden — je verliest geen strook van de afbeelding, maar tegels kunnen een pixel of twee verschillen in grootte wanneer de afmetingen niet perfect gelijk deelbaar zijn.
Kan ik een rastersplitsing gebruiken voor iets anders dan Instagram, zoals een websitebanner of een gedrukte poster?
Ja — de onderliggende bewerking is simpelweg een afbeelding in gelijke tegels croppen, wat werkt voor elke toepassing waarbij een grote afbeelding in stukken moet worden opgedeeld, waaronder een meerpanelige printlayout, een getegelde website-herobanner, of panelen voor een fysieke fotomuur. De Instagram-rastertrend is simpelweg de meest voorkomende reden waarom mensen naar deze specifieke tool grijpen.
Waarom nummert de tool tegels van links naar rechts, boven naar onder, in plaats van in Instagrams daadwerkelijke postvolgorde?
Nummering volgt de natuurlijke leesvolgorde voor duidelijkheid en makkelijke referentie wanneer je naar de voorvertoning kijkt, niet de omgekeerde volgorde waarin je daadwerkelijk zou uploaden — omdat Instagrams raster de nieuwste posts eerst toont, moet je beginnen bij de hoogst genummerde (rechteronder) tegel en achteruit werken naar tegel 1, zodat het voltooide raster correct verschijnt zodra elke tegel live staat.