Gewusst wie: So bearbeiten und optimieren Sie Bilder in HubSpot

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise
Add-ons: Website

Wenn Sie einer Seite, E-Mail, einem Blog oder Social-Media-Beitrag Bilder hinzufügen, wecken Ihre Inhalte unendlich viel mehr Lust auf Interaktion. Bilder können dazu beitragen, die Klickraten auf Social-Media-Beiträgen und in E-Mails zu steigern, und motivieren Benutzer dazu, länger auf Ihren Seiten und Blog-Beiträgen zu verweilen.

Die hochmoderne Infrastruktur von HubSpot für die Bereitstellung von Inhalten optimiert die Seitenladezeiten für Benutzer weltweit. Wenn Sie jedoch zu viele hochauflösende Bilddateien auf Ihre Website hochladen, kann das Laden der Seiten länger dauern. Das wiederum kann dazu führen, dass Ihre Benutzer Ihre Seiten verlassen. Analog gilt auch, dass E-Mails mit mehreren großen Bilddateien stärker in Gefahr sind, von einem Spam-Filter abgefangen zu werden. Sie können die Anzeigegröße für ein Bild zwar über die HTML-Codes oder mit dem WYSIWYG (What you see is what you get)-Editor von HubSpot anpassen, aber die Dateigröße verringert sich hierdurch nicht. Dies führt dazu, dass viele Marketer auf Programme wie Adobe Photoshop und Pixlr.com zurückgreifen, um die Größe ihrer Bilder anzupassen, ihre Bilder zuzuschneiden oder mit Text zu versehen und diese für das Internet zu speichern. Dies erfordert allerdings einen hohen Zeitaufwand für das Erlernen des Umgangs mit einer weiteren Software.

HubSpot macht das Bearbeiten von Bildern und die Anpassung der Größe von Bildern für Ihre Seiten, Blog-Beiträge und Social-Media-Beiträge jetzt einfach, weil Sie diese Anpassungen direkt im Inhaltseditor, im File Manager (Dateimanager) oder im Social Publisher (Social Media Publisher) vornehmen können. Der Fotoeditor umfasst unter anderem die folgenden nützlichen Anwendungen:

  • Reduzierung der Abmessungen und Dateigröße von Bildern, um die Seitenladezeiten zu verkürzen und die richtige maximale Breite von Bildern zu gewährleisten.
  • Zuschneiden von Bildern, um diese besser in Ihre Inhalte einpassen zu können.
  • Hinzufügen von Text, Aufklebern und Zeichnungen zu Bildern zur Erläuterung oder Hervorhebung von bestimmten Bildbereichen.
  • Anpassung von Helligkeit und Kontrast eines Fotos zur Gewährleistung der Klarheit von Bildern.

Optimieren Ihrer Bilder für das Web

Die Optimierung Ihrer Bilder für das Web bringt sowohl technische als auch SEO-Vorteile. Lesen Sie hier einige Tipps für die Optimierung Ihrer Bilder auf HubSpot-Seiten:

  • Bilder auf responsiven Seiten von HubSpot oder in E-Mails werden auf ihre natürliche Größe hochskaliert. Darum brauchen Ihrer Bilder in der Regel nicht breiter zu sein als der Hauptinhalt auf Ihrer Seite (im Allgemeinen 980 px-1280 px) oder in Ihrer E-Mail (im Allgemeinen 600 px). Eine Ausnahme sind große Hintergrundbilder; für diese benötigen Sie unter Umständen größere Bilder in hoher Auflösung.
  • Durch die Verkleinerung der Abmessungen und der Dateigröße eines Bildes können Sie verhindern, dass E-Mails von Spam-Filtern abgefangen werden (dasselbe gilt auch, wenn Sie mehr Text in Ihre E-Mails aufnehmen).
  • Das Hinzufügen von ALT-Text oder Beschreibungen zu Ihren Bildern kann Suchmaschinen und Bildschirmlesegeräten helfen, Ihre Bilder richtig zu interpretieren und ihren Inhalt zu verstehen. Verwenden Sie relevante, gezielte Keywords, um Ihre Inhalte für Suchmaschinen zu optimieren. Diese Keywords können Sie mit dem Keywords-Werkzeug identifizieren.
  • Sobald Ihr Bild die richtige natürliche Größe hat, können Sie die Größe mit dem WYSIWYG-Inhaltseditor von HubSpot weiter anpassen.

Anleitung

Sie können den Bildeditor aufrufen, wenn Sie ein Bild an einen Social-Media-Beitrag anfügen, wenn Sie ein Bild zum File Manager (Dateimanager) hochladen oder wenn Sie ein Bild über den Inhaltseditor hinzufügen. Die Bearbeitungsoptionen sind jeweils dieselben, unabhängig davon, wie Sie auf das Bild zugreifen. In dieser Anleitung wird das Hinzufügen eines Bildes über den Inhaltseditor behandelt. Gehen Sie wie folgt vor, um ein Bild zu bearbeiten, wenn Sie dieses zu einer Website-Seite, E-Mail-Landing-Page oder einem Blog-Beitrag hinzufügen.

Den Inhaltseditor aufrufen

In diesem Beispiel rufen wir den Inhaltseditor durch Bearbeitung einer Website-Seite (über Content > Website [Inhalte > Website]) auf, aber die nachfolgend beschriebene Vorgehensweise wäre für E-Mails, Landing-Pages oder Blog-Beiträge dieselbe.

Auf Add Image (Bild hinzufügen) klicken

Sie können Bilder zu vielen verschiedenen Arten von Modulen hinzufügen, aber in diesem Beispiel wird ein Bild zu einem Rich-Text-Modul hinzugefügt. Klicken Sie auf das Symbol für Bild einfügen/bearbeiten.

HubSpot Help article screenshot

Vorhandenes oder neues Bild hochladen

Sie können ein neues Bild hochladen oder ein vorhandenes Bild bearbeiten. HubSpot bietet Ihnen außerdem einen Ordner mit gebührenfreien Fotos an.

HubSpot Help article screenshot

Auf Clone & Edit (Klonen und bearbeiten) klicken

Klicken Sie auf das Zahnrad-Symbol und wählen Sie Clone & Edit (Klonen und bearbeiten).

HubSpot Help article screenshot
Das Bild muss als JPG- oder PNG-Datei gespeichert werden, damit Sie es mit dem Fotoeditor von HubSpot bearbeiten können. Wenn Sie die Option Clone & Edit (Klonen und bearbeiten) nicht sehen, sollten Sie überprüfen, ob das Bild im richtigen Dateiformat und mit der richtigen Dateierweiterung gespeichert wurde (.jpg oder .png). 

Das Bild bearbeiten

Der Fotoeditor enthält mehrere ausgeklügelte Fotobearbeitungsfunktionen, die Sie einzeln oder zusammen verwenden können. Der Fotoeditor verfügt über die folgenden Funktionen:

Crop (Zuschneiden)

Die Zuschneiden-Funktion entfernt die äußeren Teile einer Auswahl und ändert das Bildseitenverhältnis von Bildern. Zuschneiden ist nützlich, wenn Sie die Form eines Bildes ändern oder leere Flächen auf einem Bild entfernen möchten.

Klicken Sie auf Crop (Zuschneiden), um ein Bild zuzuschneiden. Ziehen Sie die Ecken der Auswahl, oder wählen Sie eine Voreinstellung aus. Klicken Sie auf Apply (Anwenden), um das Bild zuzuschneiden. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Resize (Größe ändern)

Mit Größe ändern können Sie die Abmessungen eines Bildes anpassen. Durch die Verkleinerung der Bildabmessungen verringert sich auch die Dateigröße des Bildes. Dadurch verbessert sich die Ladegeschwindigkeit.

Um die Größe eines Bildes zu ändern, klicken Sie auf Resize (Größe ändern), geben Sie die neuen Abmessungen ein (Sie können mit dem Schalter angeben, ob die Abmessungen eingefroren werden sollen oder nicht), und klicken Sie auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Orientation (Ausrichtung)

Mit der Ausrichtungsfunktion können Sie ein Bild drehen oder spiegeln. Dies kann nützlich sein, wenn Sie ein Bild in falscher Ausrichtung hochgeladen haben.

Um die Ausrichtung eines Bildes zu ändern, klicken Sie auf Orientation (Ausrichtung), klicken Sie dann auf die Schaltfläche Rotate (Drehen) oder Flip (Spiegeln), und klicken Sie anschließend auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Text (Text)

Mit der Textfunktion können Sie Anmerkungen oder Bildunterschriften zu einem Bild hinzufügen. Das Hinzufügen von Text zu einem Bild ist eine großartige Möglichkeit, um ein Bild zu erläutern oder seinen Zusammenhang mit dem Text der Seite oder des Beitrags herzustellen. Außerdem ist diese Funktion nützlich, wenn Sie Text über Bildern in E-Mails einfügen möchten, weil viele E-Mail-Clients keine Hintergrundbilder unterstützen.

Um Text hinzuzufügen, klicken Sie auf Text, geben Sie den Text ein, und klicken Sie auf Apply (Anwenden). Sie können nicht nur mehrere Textfelder hinzufügen, sondern auch Schriftart und Schriftfarbe ändern. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Effects (Effekte)

Mit Effekten können Sie einem Bild mehr Charakter verleihen.

Um Effekte hinzuzufügen, klicken Sie auf Effects (Effekte), wählen Sie den entsprechenden Effekt aus, und klicken Sie auf Apply (Anwenden).  Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Enhance (Optimieren)

Mit der Optimierungsfunktion können Sie drei voreingestellte Modi auf Ihre Fotos anwenden, um die Bildqualität zu verbessern. Die folgenden Modi sind verfügbar:

  • Hi-Def (Hohe Auflösung) schärft das Bild.
  • Illuminate (Beleuchtung) regelt Beleuchtungsprobleme.
  • Color Fix (Farbanpassung) führt automatische Farbanpassungen durch.

Um ein Bild zu optimieren, klicken Sie auf Enhance (Optimieren), wählen Sie einen Modus, und klicken Sie auf Apply (Anwenden). Wählen Sie Save(Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Draw (Zeichnen)

Um auf einem Bild zu zeichnen, klicken Sie auf Draw (Zeichnen), wählen Sie eine Farbe/einen Pinsel aus, ziehen Sie die Maus auf das Bild und klicken Sie auf Apply (Anwenden), um Ihre Zeichnung zu dem Foto hinzuzufügen. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Frames (Rahmen)

Um einen Rahmen zu zeichnen, klicken Sie auf Frames (Rahmen), wählen Sie einen Rahmen aus und klicken Sie auf Apply(Anwenden), um den gezeichneten Rahmen zu dem Foto hinzuzufügen. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Stickers (Aufkleber)

Aufkleber umfassen Pfeile, Denk-/Sprechblasen und andere lustige Comic-Objekte, die Sie zu Ihren Bildern hinzufügen können. Um einen Aufkleber hinzuzufügen, klicken Sie auf Stickers (Aufkleber), wählen Sie einen Aufkleber aus, ziehen Sie ihn mit der Maus auf das Bild und klicken Sie auf Apply (Anwenden), um Ihre Zeichnung zu dem Foto hinzuzufügen. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Brightness (Helligkeit)

Sie können die Helligkeit eines Bildes mit einem Klick auf Brightness (Helligkeit) anpassen. Ziehen Sie den Schieberegler an die gewünschte Position und klicken Sie dann auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Contrast (Kontrast)

Wenn Sie den Kontrast eines Bildes anpassen möchten, klicken Sie auf Contrast (Kontrast), ziehen Sie den Schieberegler an die gewünschte Position, und klicken Sie auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Saturation (Sättigung)

Sie können die Sättigung eines Bildes mit einem Klick auf Saturation (Sättigung) anpassen. Ziehen Sie den Schieberegler auf die gewünschte Position und klicken Sie auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Warmth (Temperatur)

Sie können die Farbtemperatur mit einem Klick auf Warmth (Temperatur) bearbeiten. Ziehen Sie den Schieberegler auf die gewünschte Position, und klicken Sie auf Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.
HubSpot Help article screenshot

Focus (Fokus)

Mit der Fokus-Funktion können Sie die Ränder eines Fotos unscharf machen. Klicken Sie zum Anpassen des Fokus für ein Bild auf Focus (Fokus), wählen Sie eine Form aus, und ziehen Sie diese Form auf das Bild. Klicken Sie dann auf  Apply (Anwenden). Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Redeye (Rote Augen)

Sie können die roten Augen auf einem Bild reduzieren, indem Sie auf Redeye (Rote Augen) klicken, eine Pinselgröße auswählen, auf die Augen im Bild klicken und Apply (Anwenden) wählen. Wählen Sie Save (Speichern), um Ihr geklontes Bild zu speichern.

HubSpot Help article screenshot

Das Bild zu Ihrem Inhalt hinzufügen

Nachdem Sie auf Save (Speichern) geklickt haben, wählen Sie Ihr geklontes Bild und wählen Sie dann Use Image (Bild verwenden), um das Bild in Ihren Inhalt einzufügen.

HubSpot Help article screenshot

Vorheriger Artikel:

Measuring Your Performance Project

Weiter zum nächsten Artikel: