Bilder beschneiden und Original behalten in WordPress

Du brauchst aus einem Foto einen breiten Header, ein quadratisches Beitragsbild und später vielleicht doch wieder das ganze Motiv. Dann sollte Bild beschneiden nicht bedeuten, dass du das Original überschreibst oder vorsichtshalber fünf kaum unterscheidbare Dateien anlegst.

Mit neoDraw beschneidest du Bilder direkt in WordPress. Der Ausschnitt bleibt bearbeitbar, die vollständigen Bilddaten bleiben innerhalb der neoDraw-Zeichnung erhalten und das unbeschnittene Original lässt sich per Rechtsklick wieder herunterladen. Das funktioniert in Gutenberg, Bricks, Elementor, dem Classic Editor und der WordPress-Mediathek.

WordPress arbeitet je nach Oberfläche unterschiedlich. Beim Zuschneiden im Bildblock wird eine bearbeitete Variante als neue Bilddatei gespeichert, während das ursprüngliche Bild in der Mediathek bleibt. Der klassische Medieneditor kann Änderungen dagegen auf die Bilddatei und deren Größen anwenden, bietet aber eine Funktion zum Wiederherstellen des Originals. Die Dokumentation zum WordPress-Bildblock beschreibt den Varianten-Ansatz.

Für einen einzelnen, endgültigen Zuschnitt reicht das oft aus. Unbequem wird es, wenn du denselben Bildausschnitt später verschieben möchtest oder beim Arbeiten direkt auf das vollständige Motiv zugreifen willst. Genau dafür ist neoDraw praktisch: Der Crop ist Teil einer editierbaren Zeichnung. Er legt fest, welcher Bereich sichtbar ist, entfernt aber nicht den Rest des eingebetteten Bildes.

Eine neoDraw-Datei ist eine SVG-Zeichnung. Importierst du ein JPG oder PNG, bleibt das Rasterbild vollständig in dieser Zeichnung eingebettet. Beim Beschneiden speichert neoDraw zusätzlich die Position und Größe des sichtbaren Bereichs. Außerhalb des Ausschnitts liegende Bildteile werden ausgeblendet, nicht aus den eingebetteten Bilddaten gelöscht.

Das hat zwei konkrete Folgen: Du kannst den Crop später erneut öffnen und verändern. Und du kannst die unbeschnittenen Bilddaten aus dem Kontextmenü herunterladen. Die ursprüngliche JPG- oder PNG-Datei, aus der du die Zeichnung erstellt hast, bleibt außerdem als eigener Eintrag in der WordPress-Mediathek erhalten.

Lade neoDraw als ZIP-Datei herunter. Öffne in WordPress Plugins > Plugin hinzufügen > Plugin hochladen, wähle die ZIP-Datei aus und aktiviere das Plugin. Wenn du den Ablauf vorher sehen möchtest, kannst du neoDraw ohne Installation in der Demo öffnen.

Wähle das Bild dort aus, wo du gerade arbeitest: im Gutenberg-Bildblock, in Bricks, in Elementor oder direkt in der Mediathek. Öffne es über die neoDrawSchaltfläche. Aus dem vorhandenen Bild entsteht eine neue, bearbeitbare SVG-Zeichnung. Dein hochgeladenes Original bleibt in der Mediathek.

Für einen sauberen Ausschnitt solltest du mit der größten sinnvollen Ausgangsdatei arbeiten. Ein bereits auf 300 Pixel verkleinertes Vorschaubild gewinnt durch späteres Zuschneiden keine Details zurück.

Klicke im neoDrawEditor auf das importierte Bild. Aktiviere anschließend Bild beschneiden über das Crop-Werkzeug. Je nach Arbeitsweise kannst du den Modus auch mit einem Doppelklick auf das ausgewählte Bild oder über die Eingabetaste öffnen.

Ziehe die Kanten des Beschneiden-Rahmens auf den gewünschten Ausschnitt. Du kannst das Bild innerhalb des Rahmens verschieben, bis das Motiv richtig sitzt. Achte nicht nur auf das Hauptmotiv, sondern auch auf Textflächen, Blickrichtung und den Bereich, der auf kleineren Displays noch sichtbar sein soll.

Mit einem Klick außerhalb des Bildes oder erneut mit der Eingabetaste schließt du die Bearbeitung ab. Falls der Ausschnitt nicht passt, öffnest du den Crop einfach noch einmal. Genau darin liegt der Vorteil gegenüber einem dauerhaft exportierten, flachen Bild.

Speichere die Zeichnung in der WordPress-Mediathek und setze sie anschließend im Beitrag, auf der Landingpage oder im Page Builder ein. Die sichtbare Grafik ist ein SVG, die eingebetteten Rasterbilddaten und die Crop-Einstellungen bleiben Teil der neoDrawDatei.

Öffnest du die Zeichnung später erneut mit neoDraw, kannst du den Bildausschnitt korrigieren, Markierungen ergänzen oder Text hinzufügen. Du musst nicht zur ursprünglichen Bilddatei zurückgehen und den gesamten Aufbau wiederholen.

Manchmal brauchst du nicht nur einen anderen Crop, sondern die vollständige Originaldatei. Wähle dafür das Bild innerhalb der neoDrawZeichnung aus und öffne mit der rechten Maustaste das Kontextmenü. Klicke auf Original herunterladen.

neoDraw Verwendet dafür die vollständig eingebetteten Bilddaten. Der erzeugte Dateiname enthält außerdem die ursprüngliche Breite und Höhe, zum Beispiel produktfoto-2400x1600.jpg. So erkennst du direkt, dass du die unbeschnittene Datei in ihrer ursprünglichen Pixelgröße erhalten hast.

• Header und Hero-Bilder: Du verschiebst das Motiv später, wenn Überschrift oder Button mehr Platz brauchen.
• Produktbilder: Eine Detailansicht lässt sich enger setzen, ohne die vollständige Aufnahme zu verlieren.
• Anleitungen und Screenshots: Du blendest unwichtige Ränder aus und kannst bei einer aktualisierten Oberfläche den Ausschnitt nachjustieren.
• Verschiedene Seitenformate: Aus derselben Quelle entstehen ein breites Banner, eine quadratische Vorschau und ein schmaler Karten-Crop.

Für mehrere deutlich verschiedene Formate ist es meist übersichtlicher, je eine eigene neoDrawZeichnung aus demselben Original anzulegen. So bleibt jeder Ausschnitt unabhängig bearbeitbar und du vermeidest gegenseitige Änderungen.

• Beginne mit einer ausreichend großen Quelldatei. Der Crop kann Details ausblenden, aber keine fehlende Auflösung erzeugen.
• Vergrößere kleine Bildbereiche nicht stärker als nötig. Prüfe das Ergebnis in der tatsächlichen Darstellungsgröße.
• Lege den Fokus auf das Motiv. Bei Personen sollte vor dem Gesicht mehr Raum in Blickrichtung bleiben.
• Teste breite Ausschnitte auch auf dem Smartphone. Ein guter Desktop-Crop kann in einem schmalen Container trotzdem ungünstig wirken.
• Bewahre die neoDraw-SVG auf, wenn du den Bildausschnitt später ändern möchtest. Ein zusätzlich exportiertes flaches Bild ist nicht mehr auf dieselbe Weise editierbar.

Nein. neoDraw speichert den sichtbaren Ausschnitt in der bearbeitbaren SVG-Zeichnung. Die vollständigen eingebetteten Bilddaten bleiben erhalten. Wenn du ein vorhandenes JPG oder PNG aus WordPress öffnest, bleibt außerdem die ursprüngliche Mediendatei in der Mediathek bestehen.

Ja. Öffne die neoDraw-Zeichnung erneut, wähle das Bild aus und aktiviere wieder den Beschneiden-Modus. Du kannst den Ausschnitt verschieben, vergrößern, verkleinern oder ganz neu setzen.

Wähle das Bild innerhalb von neoDraw aus, öffne das Kontextmenü mit der rechten Maustaste und klicke auf "Original herunterladen". neoDraw lädt die eingebetteten Originaldaten herunter und ergänzt die ursprünglichen Pixelmaße im Dateinamen.

Ja. neoDraw ist in Gutenberg, Bricks, Elementor, den Classic Editor und die WordPress-Mediathek integriert. Du öffnest das ausgewählte Bild im neoDraw-Editor, beschneidest es und speicherst das Ergebnis wieder als bearbeitbare SVG-Datei.

Der Beschnitt verändert die eingebetteten Originaldaten nicht. Er legt fest, welcher Bereich sichtbar ist. Die ursprünglichen Pixelmaße bleiben für den späteren Download erhalten. Wie scharf das Bild auf der Website erscheint, hängt zusätzlich von Darstellungsgröße und WordPress-Bildoptimierung ab.

Ja. Erstelle für verschiedene Einsatzzwecke eigene neoDrawZeichnungen aus demselben Original, etwa einen breiten Header, ein quadratisches Vorschaubild und eine Detailansicht. Die ursprüngliche Bilddatei bleibt dabei unverändert.

Mit neoDraw bleibt ein Zuschnitt eine bearbeitbare Entscheidung. Du setzt den sichtbaren Bereich direkt in WordPress, speicherst ihn als SVG und kannst ihn später wieder verschieben. Brauchst du die vollständige Datei, holst du sie über Rechtsklick > Original herunterladen zurück.

Damit eignet sich neoDraw besonders für Bilder, die in mehreren Formaten verwendet oder nachträglich angepasst werden sollen. Lade das Plugin herunter, öffne ein vorhandenes Bild und probiere den ersten Crop direkt in deinem WordPress-Editor aus.