Warum sind Bilder und Videos ein zweischneidiges Schwert? Kurz gesagt, eine Webseite ohne multimediale Elemente wird es heute kaum noch auf die erste Seite der Google Suchergebnisse schaffen. Lädt die Seite aufgrund eben dieser Elemente zu langsam, stehen die Chancen für das Erreichen vorderer Suchergebnisplätze ebenfalls schlecht. Unsere Aufgabe besteht also darin, die Elemente richtig zu dimensionieren und damit eine gute Balance zwischen optischer Qualität und niedriger Dateigröße zu erreichen. In diesem Etappenstopp zeige ich Ihnen, wie wir diese Balance erreichen und welche Werkzeuge Ihnen dabei helfen.
Unser Ziel: Bilder, Videos und andere Objekte problemlos selbst optimieren.
- In diesem Spickzettel betrachten wir drei Typen von multimedialen Elementen. Wir sehen uns nacheinander an, wie die Optimierungen von Bilder, Videos und andere Objekte erfolgen kann.
- Wenn ein Element nicht den Anforderungen entspricht, dann können wir es entweder in Größe bzw. Format anpassen, oder es für die mobile Ansicht – beispielsweise – sogar vollständig auszublenden.
- Beginnen wir mit den Bildern und deren Anpassung auf eine optimale Größe
- Es gibt eine Vielzahl von Anwendungen zur Bildbearbeitung. Wenn Sie eine davon bereits in Ihr Herz geschlossen haben, dann nutzen Sie diese unbedingt weiterhin.
- Wenn nicht, dann kann ich Ihnen eine Anwendung namens Gimp empfehlen.
- Über den Link in Zeile 12 können Sie diese sowohl für Windows, als auch für Mac Betriebssysteme sicher herunterladen und anschließend installieren.
- Die Anwendung ist kostenlos und mit einer deutschsprachigen Benutzeroberfläche verfügbar. Wenn Sie sich über die Software unabhängig informieren wollen, dann nutzen Sie gern diesen Link in Spalte G.
- Wie lässt sich nun die Größe eines Bildes mit dieser Anwendung anpassen? Wie im Bild links dargestellt, öffnen Sie dafür das betroffene Bild mit der Gimp-Anwendung und klicken anschließend im Menü am oberen Bildschirmrand auf „Bild“ und dann auf „Bild skalieren“. Danach öffnet sich ein zusätzliches Fenster mit gleichnamiger Überschrift, indem Sie die gewünschte Größe eingeben können.
- Bei der Dimensionierung von Bildern orientieren Sie sich bitte an den Tipps im Spickzettel 12. Als grobe Hausnummer empfehle ich Bilder nicht kleiner als 740px und nicht größer als 1280px zu skalieren. Bestätigen Sie Ihre Eingabe anschließend mit einem Klick auf die Schaltfläche „Skalieren“.
- Im Bild rechts sehen Sie, wie Sie die Größe des skalierten Bildes überprüfen können. Grundsätzlich stellen – für viele Anwendungsfälle – Bilder mit einer Dateigröße zwischen 100 und 150kb eine gute Balance dar.
- Sehen wir uns nun die Formatänderung von Bildern genauer an. Auch hierfür können Sie das Bildbearbeitungsprogramm Gimp verwenden.
- Liegen die von Ihnen verwendeten Bilder bspw. als BMP (Windows) oder PNG (Mac) Datei vor, dann ist eine Format-Umwandlung zu empfehlen.
- Für die Umwandlung eines Bildes in das gewünschte Format nutzen wir die Export-Funktion. Öffnen Sie dafür das Bild zunächst im bestehenden Format und wählen anschließend im Menü „Datei“ den Eintrag „Exportieren als…“.
- Danach öffnet sich ein gleichnamiges Fenster, in dem Sie den Dateityp der Zieldatei bestimmen können. Wählen Sie hier JPEG als Dateityp aus und bestätigen die Eingabe mit „Exportieren“.
- Hinweis: In den meisten Anwendungsfällen ist JPEG das geeignete Dateiformat für Bilder. Verwenden Sie jedoch beispielsweise in Ihrem Logo einen transparenten Hintergrund, dann wählen Sie ein alternatives Format wie PNG aus, um den Transparenzeffekt nicht zu verlieren.
- Was für Bilder funktioniert, das lässt sich analog auch für Videos anwenden. Auch hierfür erhalten Sie im Spickzettel 12 hilfreiche Tipps. Sehen wir uns nun an, wie Sie diese Tipps umsetzen können.
- Für die Umwandlung und Bearbeitung eines „web-optimierten“ Videos können Sie Anwendungen wie HandBrake verwenden. Analog der Anwendung zur Bildbearbeitung habe ich Ihnen auch hierfür relevante Details zur Software in den Zeilen 66 und 67 zusammengestellt. Nehmen wir an, Sie möchten ein Video aus dem WMF (Windows) oder MOV (Mac) in ein web-optimiertes MPEG4 Format konvertieren. Öffnen Sie dafür zunächst die Anwendung und wählen – wie im Bild links beschrieben – über die Schaltfläche „Quelle öffnen“ die vorliegende Videodatei aus. Anschließend wählen Sie unter „Voreinstellung / Web“ den Eintrag „Gmail Large“ aus. Dahinter verbergen sich alle für uns relevanten Einstellungen wie Videogröße, Auflösung oder Audiokomprimierung. Wie im Bild rechts dargestellt, achten Sie bitte noch zusätzlich darauf, dass im Bereich „Format“ das Häkchen für „Web-optimiert“ gesetzt ist.
- Abschließend geben Sie der Zieldatei im Bereich „Speichern unter“ noch einen geeigneten Namen und wählen ggf. einen anderen Zielort für die Speicherung der Datei aus.
- Mit einem Klick auf die grüne Schaltfläche „Start“ starten Sie die Konvertierung Ihrer Videodatei.
- Hinweis: HandBrake bietet weitere nützliche Funktionen, beispielsweise zum Verkürzen der Dauer eines Videos oder zum Beschreiben der Bildschirmgröße. Wenn Sie mehr zu diesen Funktionen erfahren wollen, dann stellen Sie gern einen entsprechenden Gedanken beim Videoassistenten ein.
- Neben Bildern und Videos gibt es möglicherweise noch weitere Objekte, die wir im Rahmen einer Optimierung anpassen müssen.
- Angenommen Sie wollen den Zeitpunkt verändern, an dem Texte geladen werden, um Ihren Nutzer möglichst schnell Überschriften oder Textabschnitte anzuzeigen und damit die Wartezeit zu verkürzen.
- Wenn Sie Ihre Webseite auf Basis von WordPress betreiben, dann können Sie beispielsweise eine Erweiterung (auch Plugin genannt) wie SOGO dafür nutzen. Mit dieser Erweiterung können Sie die bei der Vitalitätsanalyse monierten Formatvorlagen (Stylesheets) für ein früheres Laden im Kopf oder für eine spätere Anzeige im Fußbereich der Webseite hinterlegen.
- Hinweis: Bei dieser Anpassungen werden Sie notwendigerweise mit Bausteinen des HTML-Quellcodes operieren. Dafür sind nicht unbedingt Programmierkenntnisse, sehr wohl aber Konzentration und etwas technische Affinität nötig. Wenn Sie sich für diese „Operation“ entscheiden, dann stelle ich Ihnen über den Videoassistenten gern ein praktisches Beispiel zu Verfügung, mit dem Sie Ihre Formatvorlagen (sogenannte CSS Dateien) im Ladeprozess priorisieren können.
- Wollen Sie bestimmte Objekte hingegen komplette vom Ladeprozess ausschließen, dann habe ich auch hierfür eine Erweiterung für Ihr WordPress System herausgesucht, mit der ich bereits gute Erfahrungen sammeln konnte.
- Im Bild rechts sehen Sie die grafische Oberfläche der Plugins, welche Sie nach der Installation unterhalb jeder Seite oder jedes Beitrags in Ihrer Bearbeitungsoberfläche finden.
- Darin können Sie die im Vitalitätstest monierten Objekte für die analysierte Seite einfach ausschalten.
- Im Beispiel hier deaktivieren wir Teile von „BetterDocs“ – einer WordPress Anwendung für die Erstellung von FAQs bzw. Hilfeseiten – die unnötigerweise auf allen Unterweiten geladen werden und damit die Ladezeit verlangsamen.
- Hinweis: Bei der Nutzung dieser Erweiterung sind ebenfalls keine Programmierkenntnisse nötig. Empfehlen möchte ich Ihnen jedoch hinreichend Zeit für den Test der Webseite nach der Deaktivierung von Objekten einzuplanen.
Damit kennen Sie vier neue Werkzeuge und relevante Funktionen für deren effiziente Handhabung. Mit diesem Wissen können Sie nun problemlos entscheiden, wie Sie die Umsetzung des Optimierungspotenzials für Ihre multimedialen Objekte vorgehen wollen. Ich wünsche Ihnen gutes Gelingen und viel Erfolg bei der Umsetzung.
Geschätzte Bearbeitungszeit: Je nach Objekt unterschiedlich. Gedanken zu Erfahrungswerte finden Sie beim Videoassistenten.
