Canva-afbeeldingen optimaliseren voor websites: exporteren en comprimeren

Controleer Canva's downloadinstellingen

Kies voor een gewone download Delen → Downloaden, dan JPG voor een foto of PNG voor tekst en afbeeldingen. Selecteer de pagina en download deze. Controleer de opgeslagen afmetingen. Heeft je account geen grootte- of kwaliteitsinstellingen, dan kun je de kopie achteraf verkleinen of comprimeren.

Als de optie Grootte beperken beschikbaar is, ondersteunt Canva die momenteel voor een JPG- of PNG-export van één pagina. Volgens de documentatie kunnen complexe ontwerpen toch boven de gekozen limiet uitkomen. Controleer het opgeslagen bestand zelf.

Bewaar een scherpe Canva-export voordat je kleinere versies probeert. Eerst de JPG-kwaliteit in Canva verlagen en daarna nogmaals comprimeren of converteren kan twee keer details verwijderen. Maak elke versie vanuit dezelfde goede export om eerlijk te vergelijken.

Gebruik een afbeeldingsformaat voor een afbeelding op je site. PDF voor drukwerk is bedoeld om te printen, niet om een gewone afbeelding op een webpagina te zetten. Een optie die beter klinkt, is niet automatisch geschikt. Controleer afmetingen, uiterlijk en het bestand dat je pagina werkelijk laadt.

Bepaal waar de Canva-afbeelding komt

Een banner over de volle breedte, een blogminiatuur en een klein logo hebben verschillende eisen. Open vóór het exporteren de pagina en controleer de weergavebreedte, vorm en achtergrond. Een vierkante socialmediapost past niet vanzelf in een brede websiteheader.

Noteer drie dingen: de geschatte weergavebreedte, of transparantie nodig is en wat lezers moeten kunnen herkennen. Bij een banner zijn dat misschien een product en een kort label; bij een diagram elk woord en elke lijn. Zo beoordeel je meer dan alleen de bestandsgrootte.

Bevat het ontwerp een titel, alinea of knop, overweeg dan om die rechtstreeks op de webpagina te zetten. Tekst in een PNG of JPG is onderdeel van de afbeelding en kan niet opnieuw over regels worden verdeeld op een smaller scherm. Een in Canva getekende knop is ook alleen een plaatje, tenzij je op de website een werkende link toevoegt. Gebruik de afbeelding waar mogelijk voor illustraties en de pagina voor belangrijke tekst en knoppen.

Kies JPG, PNG of SVG voor je ontwerp

Canva biedt JPG, PNG en SVG voor verschillende toepassingen. Bekijk de handleiding voor downloadformaten voor de actuele mogelijkheden. De tabel helpt je eigen bestanden te vergelijken; geen enkel formaat is altijd het beste.

JPG verkleint bestanden door een deel van de beelddetails weg te laten. Dat heet compressie met kwaliteitsverlies. Voor foto's werkt dit vaak goed, maar het kan randen vervagen of vlekjes rond letters veroorzaken. PNG voorkomt dit soort schade, hoewel een foto in PNG veel meer ruimte kan innemen. Geen van beide herstelt onscherpte in het oorspronkelijke ontwerp.

SVG beschrijft vormen en lijnen die bij vergroting scherp blijven. Een foto in een SVG blijft echter een foto: exporteren als SVG voegt geen extra details toe. Met foto's erin kan het bestand ook groot blijven. Pixilo's compressor ondersteunt geen SVG. Als je website het bestand accepteert en het er goed uitziet, kun je het rechtstreeks gebruiken.

Na het downloaden kun je ook WebP proberen. Gebruik PNG → WebP voor een PNG-illustratie, of JPG → WebP voor een JPG-foto. Vergelijk het resultaat met de Canva-export. Is het bestand groter of de tekst slechter leesbaar, bewaar dan de oorspronkelijke export. Onze gids voor afbeeldingsformaten op websites legt uit wanneer elk formaat handig is.

Kies pixelafmetingen die bij de pagina passen

Controleer de grootste breedte waarop de afbeelding verschijnt. Bij een banner van 800 pixels breed vergelijk je een afbeelding van 800 pixels met een versie van 1600 op een telefoon of laptop met een scherp scherm. Extra pixels kunnen meer details tonen, maar verhogen de hoeveelheid te downloaden data. Vergelijk beide in plaats van standaard alle afmetingen te verdubbelen.

Behoud de verhouding tussen breedte en hoogte, ook wel beeldverhouding genoemd. Een vlak van 800 × 450 heeft de verhouding 16:9, net als een afbeelding van 1600 × 900. Een vierkant van 1600 × 1600 vraagt om bijsnijden of een andere indeling. Is de mobiele header veel hoger, pas dan het ontwerp aan zodat belangrijke inhoud niet aan de zijkanten verdwijnt.

Je website kan kleinere bestanden aan telefoons en grotere aan grote schermen aanbieden. Dat zijn responsieve afbeeldingen. Eén grote afbeelding uploaden is niet genoeg: de site moet de versies maken of aanbieden en bepalen welke wordt geladen. Controleer eerst wat je websitebouwer al doet voordat je zelf veel kopieën maakt. Lees onze gids voor responsieve afbeeldingen en de uitleg van MDN over responsieve afbeeldingen voor meer informatie.

Controleer de breedte en hoogte van het gedownloade bestand, niet alleen de afmetingen in Canva. Kun je de downloadgrootte niet aanpassen, begin dan met een ontwerp dat ongeveer de gewenste afmetingen heeft en controleer de uitvoer. Gebruik Pixilo's hulpmiddel voor afbeeldingsgrootte om een te grote afbeelding te verkleinen. Een kleine JPG of PNG vergroten brengt ontbrekende details niet terug.

Download een illustratie met een transparante achtergrond

Sommige downloadopties, waaronder transparante PNG, vereisen een geschikt Canva-abonnement. Ontbreekt een optie, controleer dan de gekoppelde hulp voor je account. Een gewone JPG- of PNG-download kun je wel optimaliseren.

Een afbeeldingsviewer kan transparantie op wit weergeven. Een witte voorvertoning bewijst dus niet of de achtergrond transparant is. Test de afbeelding op een lichte én donkere achtergrond en controleer randen en schaduwen.

JPG omzetten naar PNG verwijdert de achtergrond niet. Zit er in de foto een witte rechthoek achter het onderwerp, dan verdwijnt die niet door PNG te kiezen. Verwijder de ongewenste achtergrond in het ontwerp voordat je downloadt.

Komt de afbeelding altijd op dezelfde effen achtergrond, dan is transparantie misschien niet nodig. Bewaar apart een transparante versie als je die later elders wilt gebruiken. Onze gids voor zwarte of witte achtergronden helpt bepalen of de achtergrond in het bestand zit of alleen in de app die het weergeeft.

instructies voor exporteren met transparantie

Comprimeer de Canva-export met Pixilo

Zijn formaat en indeling goed, open dan de afbeeldingscompressor. Je kunt maximaal 20 JPG-, PNG- of WebP-bestanden toevoegen, elk maximaal 25 MB. Pixilo verwerkt ze één voor één op je apparaat en behoudt het formaat, de breedte en de hoogte. Geen zijde mag langer zijn dan 8000 pixels en de afbeelding mag maximaal 32 miljoen pixels bevatten. 8000 × 4000 voldoet aan beide grenzen, 8000 × 8000 niet.

PNG-compressie is verliesvrij: pixels en kleuren blijven hetzelfde. Een PNG die Canva al goed heeft gecomprimeerd, wordt misschien maar weinig kleiner. JPG- en WebP-compressie kunnen fijne details veranderen; controleer daarom het resultaat. Is het nieuwe bestand niet kleiner, dan behoudt Pixilo het origineel.

Gebruik een converter om het bestandsformaat te veranderen. De compressor op de homepage houdt PNG als PNG. Bij PNG → WebP en JPG → WebP kun je na het toevoegen de kwaliteit aanpassen en vervolgens Resultaten bijwerken kiezen. Deze converters verkleinen afbeeldingen boven 4000 pixels breed of hoog evenredig tot de langste zijde 4000 pixels is. Controleer de gedownloade afmetingen bij zeer grote ontwerpen.

Heeft een uploadformulier een strikte bestandsgroottelimiet, probeer dan Comprimeren naar een doelgrootte. Kies een toegestaan formaat en controleer de minimale breedte en hoogte. Een heel klein bestand is niet altijd haalbaar zonder onduidelijke tekst of detailverlies. Controleer alle eisen, niet alleen de bestandsgrootte.

Voorbeeld: een Canva-banner voor een artikel maken

Stel dat je artikel een banner nodig heeft die maximaal 800 × 450 pixels groot verschijnt. Het ontwerp combineert een foto met een kort label. Dit zijn afmetingen als planningsvoorbeeld, geen resultaten van een compressietest.

1. Bereid de compositie voor. Gebruik 16:9 en houd het hoofdonderwerp zichtbaar op computer en mobiel. Zet de artikeltitel op de pagina in plaats van een lange titel ook in de afbeelding op te nemen.
2. Download twee versies. Exporteer zo mogelijk een JPG en PNG van 1600 × 900 uit hetzelfde ontwerp. Open beide en controleer het korte label. Maak beide rechtstreeks vanuit Canva, niet vanuit een al gecomprimeerde kopie.
3. Vergelijk de compressie. Test de homepagecompressor met je gekozen export. Probeer bij PNG ook een WebP-kopie als je site die ondersteunt. Geef de bestanden verschillende namen zodat je de juiste versies vergelijkt.
4. Controleer op computer en mobiel. Bekijk de banner op 800 × 450 en op de breedte van je telefoon. De tekst moet zonder zoomen leesbaar zijn. Is hij te klein, vereenvoudig dan het ontwerp of zet de tekst op de pagina in plaats van sterker te comprimeren.
5. Publiceer je voorkeursversie. Controleer welk bestand de site werkelijk laadt, hoe groot het is en hoe het wordt bijgesneden. Maakt de site automatisch kleinere versies, bekijk die dan ook voordat je de andere afbeeldingen aanpast.

Noteer welke afmetingen en welk formaat op deze plek werkten. Gebruik ze als startpunt voor vergelijkbare ontwerpen, maar controleer elk resultaat. Een eenvoudige illustratie en een foto met veel textuur kunnen bij gelijke afmetingen toch andere instellingen nodig hebben.

Los wazige tekst of onverwacht grote bestanden op

Het gedownloade ontwerp is al wazig

Open de Canva-download vóór het comprimeren. Is hij al wazig, ga dan terug naar het ontwerp en controleer de oorspronkelijke foto, tekstgrootte en downloadafmetingen. Canva's uitleg over wazige downloads behandelt veelvoorkomende oorzaken. Compressie herstelt geen onscherpe foto of tekst die in een te kleine afbeelding is opgeslagen.

De afbeelding is lokaal scherp, maar wazig op de website

De site vergroot mogelijk een kleine miniatuur, comprimeert opnieuw of toont een oudere opgeslagen versie. Open de gepubliceerde afbeelding in een nieuw tabblad als je browser dat toestaat en controleer de afmetingen. Gebruik zo nodig de ontwikkelaarstools om het werkelijk geladen bestand te vinden. Een grotere Canva-export helpt niet als de site de kleine miniatuur blijft laden.

Het PNG-bestand wordt nauwelijks kleiner

Zonder de afbeelding te veranderen kun je maar een beperkte hoeveelheid gegevens verwijderen. Een PNG met een foto of gedetailleerde textuur kan groot blijven, zeker als hij al goed is gecomprimeerd. Probeer JPG als transparantie niet nodig is. WebP ondersteunt ook transparantie, maar controleer tekst en randen na conversie. Bewaar PNG als het er beter uitziet, of verklein de afmetingen alleen als de afbeelding duidelijk blijft.

Het ontwerp ziet er slechter uit na twee conversies

Ga terug naar de goede Canva-export. Vermijd herhaaldelijk omzetten van JPG naar WebP en terug naar JPG. Elke opslag met kwaliteitsverlies kan extra schade veroorzaken; de laatste conversie herstelt eerdere schade niet. Maak alle varianten vanuit dezelfde bron en vergelijk ze rechtstreeks daarmee.

Controleer de gepubliceerde pagina, niet alleen het bestand

• Controleer de geladen afbeelding. De pagina moet het nieuwe bestand of een geschikte automatisch gemaakte versie tonen, geen oude of onnodig grote kopie.
• Controleer de mobiele uitsnede. Houd het onderwerp zichtbaar en zet belangrijke labels niet tegen randen die de indeling kan verbergen.
• Zet belangrijke informatie als tekst op de pagina. Bezoekers zouden niet hoeven inzoomen om de enige prijs, instructie of oproep tot actie te lezen.
• Beschrijf betekenisvolle afbeeldingen. Voeg alt-tekst toe: een korte beschrijving voor mensen die de afbeelding niet kunnen zien. Leg uit wat op deze pagina belangrijk is. Puur decoratieve afbeeldingen hebben meestal lege alt-tekst. Volg Googles richtlijnen voor afbeeldings-SEO zonder beschrijvingen met zoekwoorden vol te stoppen.
• Controleer het laden van de pagina. Een kleiner bestand helpt, maar ook het startmoment van de download telt. Lees onze gids over afbeeldingen en Core Web Vitals als het hoofdbeeld nog steeds laat verschijnt.

Veelgestelde vragen

Moet ik Canva-ontwerpen altijd als PNG downloaden?

Nee. Probeer PNG voor transparante illustraties en scherpe tekst, en JPG voor foto's zonder transparantie. Vergelijk bestanden op hun werkelijke weergavegrootte, in plaats van voor elk ontwerp hetzelfde formaat te kiezen.

Kan ik Canva-afbeeldingen optimaliseren zonder betaalde exportopties?

Ja. Download een beschikbaar JPG of PNG, controleer de afmetingen en gebruik Pixilo om de kopie te verkleinen, comprimeren of converteren. Dit ontgrendelt geen betaalde Canva-functies en creëert geen transparantie die in de bron ontbreekt.

Maakt exporteren op dubbele grootte de afbeelding altijd beter?

Nee. Op een scherp scherm kan een grotere export beter ogen, maar hij herstelt geen kleine of wazige foto in het ontwerp. Vergelijk beide op je pagina en gebruik de grotere alleen als die echt voordeel biedt.

Hebben website-afbeeldingen een bepaalde DPI-instelling nodig?

Let op de breedte en hoogte in pixels en op de weergavegrootte. Alleen het DPI-getal aanpassen voegt geen details toe. Onze gids over DPI, PPI en pixels legt de verschillen tussen web en drukwerk uit.

Garandeert WebP betere posities in zoekmachines?

Nee. Een ander formaat garandeert geen betere positie. Een nuttige afbeelding, begrijpelijke inhoud eromheen, passende beschrijvingen en een efficiënte pagina zijn betere doelen dan een bestandsextensie op zichzelf.