Upload een landschapsfoto naar een Instagram-post, een hoge telefoonfoto als LinkedIn-linkafbeelding, of een screenshot naar X, en het platform beslist stilletjes welk deel ervan mensen zien Het past de afbeelding op een van de weinige vaste vormen en versiert wat niet past, en het snijdt af van het midden naar buiten Als het onderwerp in het midden staat, werkt dat Als het onderwerp een gezicht is aan de bovenkant van het frame, een product aan de linkerkant of een kop aan de onderkant, dan oogst het platform het weg.
De oplossing is om de afbeelding zelf bij te snijden, naar de exacte vorm die het voer wil, en om te kiezen welk onderdeel overleeft Deze gids behandelt de maten en beeldverhoudingen die de belangrijkste platforms weergeven, de geometrie van een gewas, hoe je een brandpunt kiest, wat bijsnijden doet met kwaliteit en bestandsgrootte, en hoe je het zachte, opgeschaalde resultaat kunt vermijden dat mensen uitschakelt De uitgewerkte voorbeelden gebruiken de gratis Social Media Image Cropper op Toolz, dat de hele taakclient-kant doet.
tl;dr: Om een afbeelding voor sociale media bij te snijden, kiest u de beoogde beeldverhouding voor het platform en de plaatsing (bijvoorbeeld 1080 x 1350 voor een Instagram-portretpost, 1200 x 630 voor een linkvoorbeeld, 1600 x 900 voor een X-postafbeelding), neemt u de grootste gebied van die vorm dat in uw foto past, verankert het op het onderdeel dat ertoe doet en schaalt het vervolgens naar de exacte pixelgrootte. Een telefoonfoto van 4032 x 3024 bijgesneden tot 4:5 houdt 60% van de oppervlakte; bijgesneden tot 16:9 houdt het 75% bij. De social media afbeelding cropper doet dit op een canvas in uw browser met een negenpunts brandpuntsraster, gratis, geen aanmelding, zonder upload.
Wat doet een social media image cropper?
Een cropper voor afbeeldingen op sociale media knipt een foto naar de beeldverhouding die een platform weergeeft en schaalt deze naar dat platform' s pixelgrootte, zodat het platform niets meer te croppen heeft Er gebeuren twee afzonderlijke bewerkingen, en het helpt om ze uit elkaar te houden:
- Crop. Kies een rechthoek binnenin het origineel die de doelvorm heeft Pixels erbuiten worden weggegooid Pixels erin zijn onaangeroerd.
- Schaal. Formaat van die rechthoek aanpassen naar de doelafmetingen, zoals 1080 x 1350 Hier kan de kwaliteit veranderen, omdat de afbeelding opnieuw wordt bemonsterd.
Een generieke afbeeldingseditor kan beide doen, maar het zorgt ervoor dat je de verhouding vindt, het vak met de hand tekent en de uitvoergrootte onthoudt. Een speciale cropper kent de maten, tekent automatisch het grootste geldige vak en laat je het met één klik verplaatsen. De Toolz-versie vertelt je ook wat de oogst kostte voordat je downloadt: hoeveel van het oorspronkelijke gebied overleeft en of het resultaat is verkleind of verhoogd.
Welke beeldformaten gebruiken de belangrijkste platforms?
Elk netwerk geeft feedbeelden weer met een kleine set beeldverhoudingen, en al het andere wordt op de dichtstbijzijnde aangepast. De tabel bevat de 15 doelgroottes die in de cropper zijn ingebouwd en die weerspiegelen wat elk platform momenteel weergeeft zonder opnieuw te croppen. Platforms herzien deze van tijd tot tijd, dus behandel ze als huidige richtlijnen in plaats van als een permanente specificatie.
| spreekgestoel | Plaatsing | Pixelgrootte | aspectverhouding | waar het wordt gebruikt |
|---|---|---|---|---|
| Vierkante paal | 1080 x 1080 | 1:1 | De klassieke feedpost | |
| Portretpost | 1080 x 1350 | 4:5 | Het hoogste dat de feed toelaat, de meeste schermruimte | |
| Landschapspost | 1080 x 566 | 1.91:1 | Breedste de feed accepteert | |
| Verhaal of rol | 1080 x 1920 | 9:16 | Volledig scherm; houd tekst vrij van de bovenste en onderste 250 px | |
| Threads | Vierkante paal | 1080 x 1080 | 1:1 | Niet-gecropped weergegeven in de tijdlijn |
| Threads | Portretpost | 1080 x 1350 | 4:5 | Tallest Threads-displays zonder bijsnijden |
| Bluesky | Afbeelding feed | 1200 x 630 | 1,90:1 | Brede beelden worden richting 1,91:1 getrokken |
| Bluesky | Vierkante afbeelding | 1080 x 1080 | 1:1 | Ongekleed weergegeven |
| X | Afbeelding plaatsen | 1600 x 900 | 16:9 | Volledig weergegeven zonder tik |
| X | Overzichtskaart | 1200 x 628 | 1.91:1 | Voorbeeldkaart voor grote links |
| Voerpost | 1200 x 630 | 1,90:1 | Ook de Open Graph-grootte | |
| linkeind | Voerpost | 1200 x 627 | 1.91:1 | LinkedIn feed standaard |
| YouTube | vleien | 1280 x 720 | 16:9 | Minimaal 1280 breed voor de HD-speler |
| Standaard pin | 1000 x 1500 | 2:3 | Grotere pinnen worden naar beneden gerangschikt | |
| Open Graph | Voorbeeld koppelen | 1200 x 630 | 1,90:1 | Standaardkaart die de meeste sites en chat-apps weergeven |
Twee dingen vallen op. De "1.91:1" familie (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) is één vorm met een iets andere afronding, en het is de vorm van bijna elke linkvoorbeeld op internet. Het gaat terug naar de Open Graph-protocol, die de og:image tag sites gebruiken om een voorbeeld foto te leveren En de hoge formaten verschillen: Instagram en Threads stoppen om 4:5, Pinterest gaat naar 2:3, en Stories gebruiken 9:16. één crop niet alle van hen te dienen.
Als u ook de voorbeeldafbeelding voor een webpagina instelt, wordt de Open Graph voorbeeldtool laat zien hoe die 1200 x 630 afbeelding eruit zal zien als deze eenmaal gedeeld is.
Hoe wordt de gewasrechthoek berekend?
Het gewas is de grootste rechthoek van de doelvorm die binnen de originele afbeelding past, als de afbeelding breder is dan de doelvorm, behoudt het gewas de volledige hoogte en worden de zijkanten afgesneden Als het groter is, behoudt het gewas de volledige breedte en worden de boven- en onderkant afgesneden.
In getallen, voor een bron van breedte W en hoogte H en een doelverhouding R (breedte gedeeld door hoogte):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
Werkvoorbeeld 1: een telefoonfoto van 4032 x 3024 naar een portretpost op Instagram.
- Bronverhouding: 4032 /3024 = 1,333 Doelverhouding: 1080 / 1350 = 0,8.
- De bron is breder, dus het gewas behoudt de volledige hoogte van 3024 px.
- Gewasbreedte: 3024 x 0,8 = 2419,2 px.
- Bewaard oppervlak: 2419,2 /4032 = 0,60, dus 60% van de foto overleeft en 40% is vanaf de zijkanten bijgesneden.
- Het gewas wordt vervolgens geschaald van ongeveer 2419 x 3024 naar 1080 x 1350.
Bewerkt voorbeeld 2: dezelfde foto naar een X-postafbeelding.
- Doelverhouding: 1600 /900 = 1,778. De bronverhouding 1,333 is kleiner, zodat het gewas de volledige breedte van 4032 px behoudt.
- Gewashoogte: 4032 / 1,778 = 2268 px.
- Bewaard oppervlak: 2268 /3024 = 0,75, dus 75% overleeft, waarbij 756 px is afgezet vanaf de hoogte.
Bewerkt voorbeeld 3: dezelfde foto naar een Pinterest pin.
- Doelverhouding: 1000 /1500 = 0,667. Gewasbreedte: 3024 x 0,667 = 2016 px.
- Bewaard oppervlak: 2016 /4032 = 50%. De helft van de foto gaat.
Deze percentages zijn wat de tool rapporteert als & quot; 60% van het origineel behouden", en ze zijn de moeite waard om te lezen voordat je je vastlegt Een bijsnijding die de helft van het frame behoudt, is een compositiebeslissing, geen opmaakstap.
Hoe kies je welk deel van de afbeelding je wilt behouden?
Kies het brandpunt dat het onderwerp vasthoudt, en onthoud dat het alleen belangrijk is langs de as die wordt bijgesneden De cropper' s negenpuntsraster stelt een focus van 0, 0,5 of 1 over elke as, die het gewas verankert aan de linkerrand, het midden of de rechterrand horizontaal, en aan de bovenkant, het midden of de onderkant verticaal.
De positie wordt zo uitgewerkt, vervolgens vastgeklemd zodat het gewas nooit van het beeld afloopt:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
In bewerkt voorbeeld 1 worden alleen de zijkanten bijgesneden, dus alleen de horizontale keuze verandert iets:
| Ankerzuil | Gewas x | Bewaarde kolommen van de foto |
|---|---|---|
| Links | 0 | 0 tot 2419 |
| Centrum | 806,4 | 806 tot 3226 |
| Right | 1612,8 | 1613 tot 4032 |
De bovenste, middelste en onderste rij geven identieke resultaten voor dat gewas, omdat de volledige hoogte al behouden blijft Het is een handige controle wanneer een klik niets lijkt te doen: het gewas is slechts vrij om in één richting te bewegen.
Werkvoorbeeld 4: een portrettelefoonfoto als LinkedIn-afbeelding. Een 3024 x 4032 foto bijgesneden tot 1200 x 627 (verhouding 1,914) houdt de volledige breedte en een strook 3024 /1,914 = 1580 px hoog Dat is 1580 /4032 = 39% van de foto Met het standaard middenanker loopt de strook van y = 1226 tot y = 2806, wat op een typisch hoofd-en-schouders portret de borst is, niet het gezicht. Het klikken van het bovenste midden is de strook naar y = 0 tot 18 cent.
Een paar vuistregels voor het plukken van een anker:
- Mensen: bovenste rij, aangezien gezichten meestal in het bovenste derde deel van een frame zitten.
- Koppen of bijschriften gebakken in een afbeelding: de rij of kolom waarin de tekst staat.
- Producten en off-center onderwerpen: de bijpassende hoek of zijkant.
- Symmetrische scènes en gecentreerde logo's: laat het in het midden.
Zal bijsnijden de beeldkwaliteit verminderen?
Bijsnijden alleen vermindert de kwaliteit niet, maar de schaalstap kan wel Pixels buiten het frame weggooien laat de resterende pixels precies zoals ze waren De grootte aanpassen aan de doelgrootte is waar het resultaat kan verbeteren of verslechteren.
Afschalen is veilig en zorgt er vaak voor dat een foto er scherper uitziet, omdat in elke uitvoerpixel meerdere bronpixels worden gemiddeld. De cropper tekent met de canvas's hoge afvlakkingskwaliteitsinstelling, met behulp van de drawImage methode gedefinieerd in de WHATWG HTML canvas specificatie. Opschalen kan geen details toevoegen die nooit zijn vastgelegd. De uitvoer wordt groter maar niet scherper, en de randen zien er zacht uit.
Bewerkt voorbeeld 5: een opgeschaalde schermafbeelding. Een 800 x 600 schermafbeelding bijgesneden voor een X-postafbeelding behoudt de volledige 800 px breedte en een 450 px hoge strook, 75% van het gebied Die 800 x 450 regio wordt dan vergroot tot 1600 x 900, tweemaal de grootte in elke richting De tool zegt dit onder de preview: & quot;Upscaled - de bron is kleiner dan het doel, dus het zal er zacht uitzien."
De snelle test is om de crop breedte te vergelijken met de doel breedte Als de crop breder is dan het doel, wordt de afbeelding verkleind en ziet er prima uit Als deze smaller is, wordt deze vergroot Voor foto's heeft een telefooncamera bijna altijd pixels over Screenshots, oude afbeeldingen en afbeeldingen die zijn opgeslagen van andere berichten zijn de gebruikelijke opschalingsgevallen, en de enige echte oplossing is een grotere bron.
Moet u PNG, JPEG of WebP exporteren?
JPEG exporteren voor foto's, PNG voor schermafbeeldingen, tekst en afbeeldingen met harde randen, en WebP wanneer u het kleinste bestand wilt en weet dat de bestemming het accepteert De cropper is standaard ingesteld op PNG omdat het verliesvrij is en biedt ze alle drie.
| formaat | Compressie | het beste voor | uitzien voor |
|---|---|---|---|
| Great | Verliesloos, zoals gespecificeerd door de W3C PNG standaard | Screenshots, gebruikersinterface, tekst, logo's, transparantie | Grote bestanden voor foto's |
| JPEG | Verliesgevend, de methode in ITU-T T.81 | Foto's | Halo's rond scherpe tekst en lijnen; geen transparantie |
| WEBP | Verlies of verliesvrij, beschreven in Google's WebP-documentatie | Kleinste bestanden van vergelijkbare kwaliteit | Een paar oudere gereedschappen kunnen het niet openen |
JPEG en WebP exports gebruiken een kwaliteitsinstelling van 0,92 op de canvas encoder, wat hoog genoeg is dat compressie artefacten moeilijk te zien zijn op foto's Het gedownloade bestand is vernoemd naar het origineel plus de preset, dus team.jpg bijgesneden voor een Instagram-portretbericht terwijl JPEG opslaat als team-ig-portrait.jpeg.
De meeste platforms hercoderen wat je uploadt hoe dan ook, dus een verliesloze PNG van een foto overleeft niet zoals PNG ooit plaatste Het voegt voornamelijk uploadgrootte toe Voor het kiezen van formaten in meer diepte, de Convertergids voor afbeeldingsformaat vergelijkt ze met meer gebruiksscenario's.
Stap voor stap: een afbeelding bijsnijden met het gereedschap
de afbeelding cropper voor sociale media heeft vier stappen, en het voorbeeld canvas is hetzelfde canvas dat het bestand produceert, dus wat je goedkeurt is wat je downloadt.
- Voeg de afbeelding toe. Laat een bestand vallen, klik om er een te kiezen, of plak een afbeelding van het klembord met Cmd+V of Ctrl+V. De plakluisteraar staat op de hele pagina, dus een naar het klembord gekopieerde schermafbeelding gaat direct naar binnen zonder eerst opgeslagen te worden. De dropzone accepteert PNG, JPEG, WebP, GIF of AVIF, of iets anders dat uw browser kan decoderen.
- Kies de doelgrootte. Het menu Doelgrootte groepeert de 15 presets per platform, elk gelabeld met zijn pixelgrootte en - verhouding, en toont een notitie van één regel over waar de grootte wordt gebruikt De standaard is het portretbericht van Instagram.
- Kies wat u wilt behouden. Klik op een van de negen punten in het Keep-raster De preview tekent direct opnieuw.
- Controleer de nummers en download. Lees onder het voorbeeld de regel die het behouden percentage vermeldt, de afmetingen van de bijsnijding en of het resultaat is verkleind of opgeschaald Kies PNG, JPEG of WebP en klik op Downloaden.
Alles draait op een HTML canvas in de browser tab De afbeelding wordt niet geüpload, opgeslagen of gelogd, en de pagina blijft werken met het netwerk uit Zoals elke tool op de site, de download stap controleert een dagelijkse gebruikslimiet.
Welke fouten kun je tegenkomen?
De meeste problemen komen van het bestandsformaat of van de grootte van de bron De berichten zijn specifiek.
- "Dat bestand is geen afbeelding." Het bestand's-type begint niet met
image/, bijvoorbeeld een PDF of een video Het bericht noemt het bestand. - " die afbeelding kon niet worden gelezen Het kan corrupt zijn of in een formaat dat deze browser niet decodeert." Het bestand beweert een afbeelding te zijn maar de browser kan deze niet decoderen Het gebruikelijke geval is een iPhone HEIC foto in een browser zonder HEIC ondersteuning Converteer het eerst naar JPG met de converter voor beeldformaat.
- "Upscaled - de bron is kleiner dan het doel, dus het zal er zacht uitzien." Geen fout, een waarschuwing Gebruik een groter origineel als je er een hebt.
- Het brandpuntsraster lijkt niets te doen. Het gewas wordt slechts langs één as bijgesneden, dus alleen de ankers langs die as verplaatsen het.
- Daglimiet bereikt. Er is gebruik gemaakt van de gratis dagelijkse gebruiksvergoeding.
Nog een effect is het weten waard Omdat de uitvoer opnieuw wordt gecodeerd vanuit canvas pixels, draagt het gedownloade bestand geen EXIF-metagegevens: geen camera-instellingen, opnamedatum of GPS-locatie Voor openbaar geplaatste foto's is dat meestal een privacywinst De EXIF remover guide legt uit wat die metadata bevat en waarom het ertoe doet bij het delen van foto's.
Bijsnijden, vergroten of verkleinen of op een achtergrond passen?
Bijsnijden is een van de drie manieren om een afbeelding in een vaste vorm te krijgen, en de juiste is afhankelijk van of je het je kunt veroorloven om iets van de afbeelding kwijt te raken.
| toegang | Wat gebeurt | Wanneer het te gebruiken | kwast |
|---|---|---|---|
| Bijsnijden tot de verhouding | Snijdt de randen, houdt de vorm exact | Het onderwerp is een onderdeel van het frame en de randen kunnen verdwijnen | Social Media Image Cropper |
| Pasvorm op een matte | Krimpt de hele afbeelding op een gekleurde of wazige achtergrond | Er mag niets worden geknipt, zoals artwork of een groepsfoto | Matte Generator |
| Alleen formaat wijzigen | Verandert pixelafmetingen, behoudt de oorspronkelijke verhouding | De verhouding is al goed, of het platform accepteert elke vorm | Afbeelding wijzigen |
| Opsplitsen in dia's | Snijdt een breed beeld in opeenvolgende carrousel dia's | Een panorama te breed voor één post | Carrousel Scroll Generator |
Als het probleem eerder bestandsgrootte dan vorm is, zal de gids voor het wijzigen van de grootte van de afbeelding dekt veranderende afmetingen zonder vervorming Wanneer een bijgesneden afbeelding publiekelijk wordt uitgezonden en uw naam moet dragen, zal de watermarker voegt een logo of handtekening toe in een hoek of betegeld over het frame De volledige set afbeeldingshulpmiddelen voor het plaatsen van levens in de hub voor sociale media-instrumenten.
Waarom überhaupt bijsnijden voordat u uploadt?
Omdat de platform crop wordt beslist door software die je onderwerp niet kan zien Elke feed wordt weergegeven op vaste verhoudingen, en een upload in elke andere vorm wordt automatisch aangepast, meestal door gelijkmatig te trimmen van beide zijden van de lange dimensie Sommige platforms, Bluesky onder hen, passen die crop alleen toe die wordt weergegeven in de tijdlijn, dus de volledige afbeelding bestaat, maar de meeste mensen zien het nooit.
Bijsnijden brengt eerst drie beslissingen naar je terug: welk deel van het frame zichtbaar is, hoe scherp het resultaat is bij de exacte weergavegrootte, en hoe groot het bestand is Het duurt een paar seconden per afbeelding, en het maakt het meest uit voor precies de afbeeldingen waar mensen om geven: portretten, productopnamen, en afbeeldingen met tekst bij een rand Voor die, snijd de afbeelding bij tot de platformgrootte met het centrale punt over het onderwerp, gratis, geen aanmelding en het uploaden van een bestand heeft de feed geen reden om te wijzigen.
