Canva-Bilder für Websites optimieren: Export und Komprimierung

Prüfe die Download-Einstellungen in Canva

Wähle für einen einfachen Download Teilen → Herunterladen, dann JPG für ein Foto oder PNG für Schrift und Grafik. Wähle die Seite und lade sie herunter. Prüfe die gespeicherten Pixelmaße. Fehlen Größen- oder Qualitätsregler, kannst du die Kopie anschließend verkleinern oder komprimieren.

Wenn die Option Größe begrenzen verfügbar ist, unterstützt Canva sie derzeit beim einseitigen JPG- oder PNG-Export. Laut Dokumentation können komplexe Designs das gewünschte Limit trotzdem überschreiten. Prüfe die gespeicherte Datei selbst.

Bewahre einen klaren Canva-Export auf, bevor du kleinere Versionen testest. Reduzierst du die JPG-Qualität in Canva und komprimierst oder konvertierst danach erneut, können zweimal Details verloren gehen. Erstelle jede Testversion aus demselben hochwertigen Export.

Verwende für Website-Bilder ein Bildformat. PDF-Druck ist für den Druck gedacht, nicht zum Einfügen eines gewöhnlichen Bildes auf einer Webseite. Eine hochwertig klingende Option ist nicht automatisch die richtige. Prüfe Maße, Darstellung und die Datei, die deine Seite tatsächlich lädt.

Lege fest, wo das Canva-Bild erscheinen soll

Ein Banner über die gesamte Seitenbreite, ein Blog-Vorschaubild und ein kleines Logo haben unterschiedliche Anforderungen. Öffne vor dem Export die Zielseite und prüfe Anzeigebreite, Form und Hintergrund. Ein quadratischer Social-Media-Beitrag passt nicht automatisch in einen breiten Website-Kopfbereich.

Notiere drei Dinge: die ungefähre Anzeigebreite, den Bedarf an Transparenz und das, was Leser erkennen müssen. Bei einem Banner sind das vielleicht ein Produkt und eine kurze Beschriftung, bei einem Diagramm jedes Wort und jede Linie. So beurteilst du das Ergebnis auch unabhängig von der Dateigröße.

Enthält das Design eine Überschrift, einen Absatz oder einen Button, füge diese möglichst direkt auf der Website ein. Text in einer PNG- oder JPG-Datei ist Teil des Bildes und kann auf schmalen Bildschirmen nicht neu umbrechen. Auch ein in Canva gezeichneter Button ist nur ein Bild, solange du auf der Website keinen funktionierenden Link hinzufügst. Nutze Bilder für Illustrationen und die Seite selbst für wichtige Texte und Buttons.

Wähle JPG, PNG oder SVG für dein Design

Canva bietet JPG, PNG und SVG für verschiedene Zwecke an. Die aktuellen Optionen findest du in der Anleitung zu Downloadformaten. Die Tabelle hilft beim Vergleich eigener Dateien; sie bedeutet nicht, dass ein Format immer gewinnt.

JPG verkleinert Dateien, indem es einen Teil der Bilddetails entfernt. Das nennt man verlustbehaftete Komprimierung. Für Fotos funktioniert sie oft gut, kann aber unscharfe Kanten oder Spuren um Buchstaben erzeugen. PNG vermeidet solche Schäden, benötigt bei Fotos jedoch mitunter deutlich mehr Speicherplatz. Keines der Formate behebt Unschärfe im ursprünglichen Design.

SVG beschreibt Formen und Linien so, dass sie beim Vergrößern scharf bleiben. Ein in SVG eingebettetes Foto erhält dadurch aber keine zusätzlichen Details. Enthält die Datei Fotos, kann sie weiterhin groß sein. Pixilos Bildkompressor unterstützt SVG nicht. Wenn deine Website SVG akzeptiert und das Bild richtig aussieht, kannst du es direkt verwenden.

Nach dem Download kannst du auch WebP ausprobieren. Verwende für PNG-Grafiken PNG → WebP und für JPG-Fotos JPG → WebP. Vergleiche die neue Datei mit dem Canva-Export. Wird sie größer oder die Schrift schlechter, behalte den ursprünglichen Export. Unser Ratgeber zu Bildformaten für Websites erklärt die Einsatzmöglichkeiten.

Wähle passende Pixelmaße für die Seite

Prüfe die größte Breite, in der das Bild auf deiner Seite erscheint. Wird ein Banner 800 Pixel breit angezeigt, vergleiche ein 800-Pixel-Bild mit einer 1600-Pixel-Version auf einem hochauflösenden Smartphone- oder Laptopdisplay. Zusätzliche Pixel können mehr Details zeigen, erhöhen aber die zu ladende Datenmenge. Vergleiche beide Varianten, statt die Größe jedes Bildes automatisch zu verdoppeln.

Behalte das Verhältnis zwischen Breite und Höhe bei, also das Seitenverhältnis. Ein Bereich von 800 × 450 hat das Verhältnis 16:9; ein Bild mit 1600 × 900 passt dazu. Ein Quadrat mit 1600 × 1600 muss zugeschnitten werden oder braucht ein anderes Layout. Ist der Kopfbereich auf dem Smartphone viel höher, passe das Design an, damit wichtige Inhalte nicht seitlich abgeschnitten werden.

Deine Website kann möglicherweise kleinere Bilddateien an Smartphones und größere an große Bildschirme liefern. Das bezeichnet man als responsive Bilder. Ein einziges großes Bild hochzuladen reicht dafür nicht: Die Website muss die Varianten erstellen oder bereitstellen und die passende auswählen. Prüfe zuerst die Funktionen deines Website-Baukastens, bevor du viele Kopien selbst anlegst. Mehr dazu findest du in unserem Ratgeber zu responsiven Bildern und in MDNs Erklärung zu responsiven Bildern.

Prüfe Breite und Höhe der heruntergeladenen Datei, nicht nur die Maße im Canva-Editor. Lässt sich die Downloadgröße nicht ändern, beginne mit einem Design nahe der benötigten Größe und kontrolliere das Ergebnis. Zu große Bilder verkleinerst du mit Pixilos Werkzeug zur Größenänderung. Das Vergrößern einer kleinen JPG- oder PNG-Datei stellt fehlende Details nicht wieder her.

Lade eine Grafik mit transparentem Hintergrund herunter

Einige Downloadoptionen, etwa transparente PNGs, erfordern einen passenden Canva-Tarif. Fehlt eine Option, prüfe die verlinkte Hilfe für dein Konto. Einen normalen JPG- oder PNG-Download kannst du trotzdem optimieren.

Ein Bildbetrachter kann eine transparente Grafik auf Weiß anzeigen. Eine weiße Vorschau allein sagt deshalb nichts über die Transparenz aus. Teste die heruntergeladene Grafik vor einem hellen und einem dunklen Hintergrund und prüfe Kanten und Schatten.

Eine JPG-Datei in PNG umzuwandeln entfernt ihren Hintergrund nicht. Enthält das Foto im Design ein weißes Rechteck hinter dem Motiv, verschwindet es durch die Wahl von PNG nicht. Entferne den unerwünschten Hintergrund vor dem Download im Design.

Liegt die Grafik immer auf derselben einfarbigen Fläche, brauchst du möglicherweise keine Transparenz. Bewahre eine transparente Version separat auf, wenn du sie später anderswo einsetzen möchtest. Unser Ratgeber zu schwarzen oder weißen Hintergründen hilft zu klären, ob der Hintergrund in der Datei steckt oder nur im Anzeigeprogramm erscheint.

Anleitung zum Export mit transparentem Hintergrund

Komprimiere den Canva-Export mit Pixilo

Sobald Größe und Gestaltung stimmen, öffne den Bildkompressor. Du kannst bis zu 20 JPG-, PNG- oder WebP-Dateien mit jeweils höchstens 25 MB hinzufügen. Pixilo verarbeitet sie einzeln auf deinem Gerät und behält Format, Breite und Höhe bei. Jede Seite darf höchstens 8000 Pixel lang sein; insgesamt sind höchstens 32 Millionen Pixel erlaubt. 8000 × 4000 erfüllt beide Grenzen, 8000 × 8000 hingegen nicht.

PNG wird verlustfrei komprimiert: Pixel und Farben bleiben unverändert. Ein bereits gut komprimiertes Canva-PNG wird möglicherweise nur wenig kleiner. Bei JPG und WebP können sich feine Details verändern; prüfe deshalb das Ergebnis. Ist die neue Datei nicht kleiner, behält Pixilo das Original.

Zum Ändern des Formats brauchst du einen Konverter. Der Kompressor auf der Startseite lässt PNG als PNG bestehen. Bei PNG → WebP und JPG → WebP kannst du nach dem Hinzufügen die Qualität einstellen und anschließend Ergebnisse aktualisieren wählen. Diese Konverter verkleinern Bilder über 4000 Pixel Breite oder Höhe proportional, sodass die längste Seite 4000 Pixel beträgt. Prüfe die heruntergeladenen Maße bei sehr großen Designs.

Hat ein Uploadformular ein striktes Dateilimit, teste Auf eine Zielgröße komprimieren. Wähle ein erlaubtes Format und prüfe Mindestbreite und -höhe. Eine sehr kleine Datei lässt sich nicht immer ohne unleserliche Schrift oder Detailverlust erreichen. Beachte alle Anforderungen des Formulars.

Beispiel: ein Canva-Banner für einen Artikel vorbereiten

Angenommen, dein Artikel braucht ein Banner, das auf der Seite höchstens 800 × 450 Pixel groß erscheint. Das Design kombiniert ein Foto mit einer kurzen Beschriftung. Diese Maße sind Planungsbeispiele, keine Ergebnisse eines Komprimierungstests.

1. Gestaltung vorbereiten. Nutze 16:9 und halte das Hauptmotiv sowohl im Desktop- als auch im mobilen Layout sichtbar. Setze die Artikelüberschrift auf die Webseite, statt eine lange Überschrift zusätzlich ins Bild zu schreiben.
2. Zwei Versionen herunterladen. Exportiere, wenn möglich, eine JPG- und eine PNG-Datei mit 1600 × 900 aus demselben Design. Öffne beide und prüfe die kurze Beschriftung. Erstelle beide direkt aus Canva, nicht aus einer bereits komprimierten Kopie.
3. Komprimierung vergleichen. Teste den Startseiten-Kompressor mit deinem bevorzugten Export. Probiere bei PNG auch WebP, wenn deine Website es unterstützt. Verwende unterschiedliche Dateinamen, damit du die richtigen Dateien vergleichst.
4. Auf Computer und Smartphone prüfen. Betrachte das Banner bei 800 × 450 und bei der auf deinem Smartphone verwendeten Breite. Die Schrift sollte ohne Vergrößern lesbar bleiben. Ist sie zu klein, vereinfache das Design oder verlagere den Text auf die Seite, statt stärker zu komprimieren.
5. Die bevorzugte Version veröffentlichen. Kontrolliere die tatsächlich geladene Datei, ihre Größe und den Zuschnitt. Erstellt deine Website automatisch kleinere Varianten, prüfe diese ebenfalls, bevor du weitere Bilder aktualisierst.

Notiere die passenden Maße und das Format für diesen Seitenbereich. Nutze sie als Ausgangspunkt für ähnliche Designs, prüfe aber jedes Ergebnis. Eine einfache Illustration und ein detailreiches Foto können trotz gleicher Maße andere Einstellungen benötigen.

Unscharfe Schrift oder unerwartet große Dateien korrigieren

Schon der Download ist unscharf

Öffne den Canva-Download vor der Komprimierung. Ist er bereits unscharf, überprüfe im Design das ursprüngliche Foto, die Schriftgröße und die Downloadmaße. Canavas Hilfe zu unscharfen Downloads erläutert häufige Ursachen. Komprimierung korrigiert kein unscharfes Foto und keine Schrift in einer zu klein gespeicherten Datei.

Die Datei ist lokal scharf, auf der Website aber unscharf

Möglicherweise vergrößert die Website ein kleines Vorschaubild, komprimiert erneut oder zeigt eine alte gespeicherte Version. Öffne das Bild der veröffentlichten Seite in einem neuen Tab, sofern dein Browser das erlaubt, und prüfe die Maße. Bei Bedarf zeigen die Entwicklertools die tatsächlich geladene Datei. Ein größerer Canva-Export hilft nicht, solange die Seite das kleine Vorschaubild lädt.

Das PNG wird kaum kleiner

Ohne das Bild zu verändern, lässt sich nur begrenzt Datenmenge entfernen. Ein PNG mit Foto oder feinen Texturen kann groß bleiben, besonders wenn es schon gut komprimiert ist. Teste JPG, falls du keine Transparenz brauchst. WebP unterstützt auch Transparenz; prüfe nach dem Konvertieren aber Schrift und Kanten. Behalte PNG, wenn es besser aussieht, oder verkleinere die Maße nur, wenn das Bild klar bleibt.

Das Design sieht nach zwei Konvertierungen schlechter aus

Kehre zum hochwertigen Canva-Export zurück. Vermeide wiederholtes Konvertieren von JPG zu WebP und zurück zu JPG. Jede verlustbehaftete Speicherung kann weitere Schäden verursachen; die letzte Konvertierung macht frühere Verluste nicht rückgängig. Erstelle alle Varianten aus derselben Quelle und vergleiche sie direkt damit.

Prüfe die veröffentlichte Seite, nicht nur die Datei

• Geladenes Bild prüfen. Die Seite sollte die neue Datei oder eine geeignete automatisch erzeugte Version anzeigen, keine alte oder unnötig große Kopie.
• Mobilen Zuschnitt prüfen. Halte das Motiv sichtbar und platziere wichtige Beschriftungen nicht an möglicherweise verdeckten Rändern.
• Wichtige Informationen als Seitentext einfügen. Besucher sollten ein Bild nicht vergrößern müssen, um den einzigen Preis, eine Anleitung oder eine Handlungsaufforderung zu lesen.
• Aussagekräftige Bilder beschreiben. Füge Alt-Text hinzu: eine kurze Beschreibung für Menschen, die das Bild nicht sehen können. Beschreibe seine Bedeutung auf dieser Seite. Rein dekorative Bilder benötigen normalerweise leeren Alt-Text. Beachte Googles Hinweise zur Bild-SEO und vermeide Ansammlungen von Suchbegriffen.
• Seitenladezeit prüfen. Eine kleinere Datei hilft, doch auch der Beginn des Ladevorgangs zählt. Lies unseren Ratgeber zu Bildern und Core Web Vitals, wenn das Hauptbild weiterhin spät erscheint.

Häufig gestellte Fragen

Sollte ich Canva-Designs immer als PNG herunterladen?

Nein. Teste PNG für transparente Grafiken und scharfe Schrift, JPG für Fotos ohne Transparenz. Vergleiche die Dateien in ihrer tatsächlichen Anzeigegröße, statt für jedes Design dasselbe Format zu verwenden.

Kann ich Canva-Bilder ohne kostenpflichtige Exportoptionen optimieren?

Ja. Lade ein verfügbares JPG oder PNG herunter, prüfe die Maße und ändere Größe, Komprimierung oder Format der Kopie mit Pixilo. Das schaltet keine kostenpflichtigen Canva-Funktionen frei und erzeugt keine Transparenz, die in der Quelle fehlt.

Verbessert ein Export in doppelter Größe immer das Bild?

Nein. Auf hochauflösenden Displays kann er schärfer wirken, ein kleines oder unscharfes Foto im Design verbessert er aber nicht. Vergleiche beide Versionen auf deiner Seite und nutze die größere nur bei erkennbarem Vorteil.

Brauchen Website-Bilder eine bestimmte DPI-Einstellung?

Achte auf Breite und Höhe in Pixeln und auf die Anzeigegröße. Nur den DPI-Wert zu ändern fügt keine Details hinzu. Unser Ratgeber zu DPI, PPI und Pixeln erklärt die Unterschiede zwischen Web und Druck.

Garantiert WebP bessere Suchmaschinenplatzierungen?

Nein. Ein Formatwechsel ist keine Ranking-Garantie. Ein hilfreiches Bild, verständlicher Seitentext, passende Beschreibungen und eine schnelle Seite sind sinnvollere Ziele als eine Dateiendung um ihrer selbst willen.