Startseite Praktische Tipps Blog erstellen - unser Tutorial Blog erstellen – Schritt 9 – Medien & Bilder optimieren fürs Web

Blog erstellen – Schritt 9 – Medien & Bilder optimieren fürs Web

In diesem Beitrag geht es um Medien auf deiner Website und das Thema Bilder optimieren fürs Web. Dieses Thema ist sehr komplex, aber essenziell wichtig.

Dieser Beitrag ist als „Werbung“ zu betrachten, weil wir hier Marken, Produkte und Firmen erwähnen/empfehlen, auch wenn wir dies unentgeltlich tun.

Die Mediathek in deinem Blog

WordPress bietet dir über das Dashboard den Zugang zur Mediathek (Dashboard > Medien > ). In dieser Mediathek werden sämtliche Medien gespeichert, die du im Laufe der Zeit hochlädst, um sie dann in einem zweiten Schritt in Beiträge oder Seiten oder sonst wo einzufügen. Zu diesen Medien zählen Fotos, Videos, Audio-Dateien, PDFs, usw.

Bevor du mit dem Hochladen der ersten Medien-Dateien in diese Mediathek beginnst, ist es sehr, sehr wichtig, dass du dich mit dem Dateiformat, der Dateigröße und dem Thema Bilder optimieren auseinandergesetzt hast.

In diesem Zusammenhang sind aber auch einige Anmerkungen zur Lizenz der verwendeten Software, dem Urheberrecht, der DSGVO und der Medienverwaltung in deiner Mediathek nötig.

Ein umfassender Artikel über die Themen „Bilder optimieren fürs Web“ und „Medien verwalten im Blog“.

Inhaltsverzeichnis:

 

 

Das Dateiformat der Bilder

  • JPG: (Joint Photographic Experts Group), sehr gute Komprimierung, sehr hohes Farbspektrum, aktuell noch das ideale Format für Digitalfotos und Dateien mit hoher Farbauflösung.
  • PNG: (Portable Network Graphic), beim Komprimieren wird das Farbspektrum reduziert, geeignet für Bilder mit transparentem Hintergrund, Verwendung für  Icons und Grafiken mit wenig Farben und Transparentbilder.
  • GIF: (Graphics Interchange Format), geringes Farbspektrum von 256 Farben, kann transparent, Animation möglich, Verwendung für animierte Grafiken.

 

Zukünftige Dateiformate für Bilder

Aktuell werden alternativ neben JPG die Formate WebP und BPG beworben. Beide Formate verletzen aber wohl Patente und werden nicht von allen Browsern unterstützt. Sie werden auch lediglich als Übergangslösungen betrachtet.

Doch FLIF scheint eine große Zukunft zu haben. Es könnte JPG und PNG ersetzen und lässt sich hervorragend verlustfrei komprimieren (70% kleiner als JPG). Ideal fürs Web. Mal sehen, wie lange es dauert, bis sich dieses Format bei allen Browsern und Bildbearbeitungsprogrammen durchsetzt. Als Betreiber einer bilderintensiven Website sollte man die Entwicklung auf jeden Fall im Auge behalten.

 

Die Dateigröße der Bilder

Fotos, aufgenommen per Digitalkamera, haben heutzutage eine Dateigröße von mehreren MB. Und mit der stetigen Weiterentwicklung der Kamerasensoren wächst diese Dateigröße in Zukunft weiter kontinuierlich.

Für die Anzeige deiner Fotos in deinem Blog sind diese Dateien aber viel zu groß und erhöhen die Ladezeit deiner Seite ganz enorm. Das solltest du auf jeden Fall vermeiden.

 

Bilder optimieren fürs Web

Deshalb steht vor dem Hochladen der Fotos (oder auch anderer Medien) unter anderem eine Bearbeitung der Dateigröße an: Du musst die Bilder optimieren.

 

Welche Einstellung ist optimal?

Ich persönlich wähle als Einstellung in der Regel 1024 x 768 Pixel (selten auch 640 x 480 Pixel) und erhalte so eine Dateigröße zwischen 50 und 200 KB.

Um die für deine Zwecke passende Einstellung zu finden, musst du jedoch die Auswirkung der Bildschirm-Auflösung aktueller und zukünftiger Displays berücksichtigen. Warum ist das so?

 

Dateigröße und Display-Auflösung

Je höher die Auflösung eines Displays (Handy-Screen, PC-Monitor, TV-Monitor), desto kleiner wird ein komprimiertes Digitalfoto (=Rastergrafik) angezeigt. Folglich führt die unaufhaltsame Weiterentwicklung der Displays in Zukunft dazu, dass die komprimierten Digitalfotos  auf deiner Website immer kleiner dargestellt werden auf dem Monitor eines Users.

Für die unkomprimierten Original-Fotodateien gilt dies nicht, weil die Auflösung der Kamerasensoren durch technische Weiterentwicklung ja ebenfalls immer weiter steigt.

Im Folgenden ist die Bildschirmauflösung für historische, aktuelle und zukünftige Formate einmal aufgelistet (Breite x Höhe in Pixel):

1280 x 720 = HD
1280 x 1024 = SXGA (5:4-Format)
1920 x 1080 = Full HD (27″-Monitor, 16:9)
2048 x 1152 = 2K
2560 x 1440 = WQHD
3840 x 2160 = QFHD (= 4K2K, 16:9)
4096 x 2160 = Ultra HD (4K)
5120 x 2880 = 5K
5760 x 3240 = 6K

Konkret bedeutet das also, dass ein auf 1024 x 768 komprimiertes Foto auf einem HD-Monitor fast den ganzen Bildschirm ausfüllt, wogegen dasselbe Foto in Zukunft auf einem 4K-Monitor lediglich ein Viertel des Bildschirms füllt.

Wenn du also auf eine große Bilder-Darstellung auch auf zukünftigen Displays sehr großen Wert legst, solltest du beim Bilder optimieren das Format 1920 x 1280 für die Komprimierung wählen.

Allerdings steigt damit auch die Dateigröße in KB und die Ladezeit deiner Seite. Du solltest das Format 1920 x 1280 auf jeden Fall als oberste Grenze sehen.

 

Löschung der Metadaten

Des Weiteren kannst du sämtliche Metadaten (EXIF, IPTC, Kamera-Daten, usw.) aus den Fotodateien entfernen, wenn du sie nicht aus urheberrechtlichen Gründen behalten willst oder musst. Das reduziert die Fotodatei auch noch einmal um ca. 10 kB.

 

Der Dateiname

Dateiname und AlttextVor dem Hochladen solltest du den Dateinamen abändern. Der üblicherweise von der Digitalkamera vergebene Name ist eher kryptisch und nichtssagend. Es wäre ideal, wenn du einen sprechenden Namen vergibst und wenn das für den betreffenden Beitrag geplante Keyword im Namen des Bildes vorkommt.

Beim Hochladen erstellt WordPress aus dem Dateinamen nämlich automatisch einen Permalink. Und ein Foto mit Keyword im Permalink ist für Google leichter zu finden. Das kann auf keinen Fall nachteilig für dein Ranking sein.

 

Titel und Alt-Text

Ist das Bild hochgeladen in die Mediathek deiner WordPress-Installation, solltest du Titel und Alternativtext (Alt-Text) ebenfalls bearbeiten und Keywords integrieren. Insbesondere der Alt-Text ist für Google ein wichtiges Kriterium.

Denn sollte ein Bild, aus welchen Gründen auch immer, nicht geladen werden können, zeigt ein Alt-Text auf jeden Fall an, um was es auf dem Bild geht. Ebenso ist damit die Barrierefreiheit gewährleistet, wenn z.B. Blinde per Sprachausgabe „lesen“.

 

Verwendung von Video-Dateien

Von der Verwendung von Video-Dateien auf deinem Blog solltest du absehen. Besser ist hier z. B. die Nutzung eines eigenen Youtube-Kanals und eine Verlinkung aus den Beiträgen deines Blogs auf die entsprechenden Videos auf Youtube per Textlink. Große Video-Dateien belasten deinen begrenzten Webspace beim Hoster und sind der Tod für die Ladezeit einer Seite.

Demgegenüber ist der Speicherplatz auf deinem Youtube-Kanal unbegrenzt. Und mit einem Youtube-Kanal bist du neben Facebook, Twitter & Co. auf einem weiteren wichtigen Social Media Kanal vertreten. Das ist gut für deine Publicity.

Das Einbetten von Videos ist seit dem Inkrafttreten der DSGVO keine gute Variante mehr, weil schon personenbezogene Daten deiner Website-Besucher vom Video-Plattform-Betreiber (z.B. Youtube) erfasst würden, noch bevor sie den Link zu einem eingebetteten Video betätigen.

 

Der Diebstahlschutz für Medien

Es ist leicht, Bilder aus dem Internet herunterzuladen oder sie per Hotlinking (eine direkte Verlinkung auf ein Bild in einer anderen Website) quasi zu klauen.

Wenn du dich dagegen schützen willst, kannst du entweder das Hotlinking per „RewriteCond“-Befehl in der Datei .htaccess unterbinden oder ein Wasserzeichen bzw. einen Text in dem Bild unterbringen, mit dem du deinen Namen / deine Marke beim Hotlinking weitergibst. Letzteres erhöht vielleicht sogar deine Bekanntheit, ist aber kein wirksamer Schutz gegen einen Diebstahl. Den gibt es nämlich nicht.

Vermerkst du nach dem Löschen der Metadaten in den IPTC-Daten noch deine Urheberrechte und deinen Namen, ist zumindest für Dritte erkennbar, dass das Bild dir gehört. Solange es nicht gelöscht wird.

 

Urheberrechte auf Medien

Im Gegenzug solltest du auf deinem Blog selber nur Medien einsetzen, mit deren Nutzung du keine Urheberrechte anderer verletzt. Das kann auffallen und richtig teuer werden. Du kannst deine Fotos oder Medien selber herstellen oder sie aus Online-Agenturen käuflich erwerben.

 

Digitale Bilder und die DSGVO

DSGVO AuswirkungenMit dem Inkrafttreten der DSGVO hat sich die Freiheit in Bezug auf Veröffentlichung und Verbreitung von digitalen Fotos mit abgelichteten Personen drastisch verändert. Man benötigt praktisch die Einwilligung sämtlicher Personen, die auf der Aufnahme abgelichtet werden sollen.

Und das im Vorfeld vor der Aufnahme, denn die Anfertigung einer Aufnahme ohne Einwilligung ist schon nicht mehr erlaubt. Folglich ist auch das nachträgliche Einschwärzen von Gesichtern (Verpixelung lässt sich heute mit künstlicher Intelligenz schon rückgängig machen) keine Lösung mehr.

Lediglich im privaten Bereich und mit der Einschränkung bzgl. der Verbreitung sind digitale Fotoaufnahmen von Menschen hier zulässig.

Welche Auswirkungen diese Regelung auf ein Blog mit viel Fotomaterial hat, kannst du dir jetzt vorstellen.

 

Software zum Bilder optimieren

Für diese Verkleinerung der Dateien kannst du entweder gängige Programme für die Bildbearbeitung, spezielle Datei-Verkleinerungs-Software oder Online-Dienste nutzen.

Bei der Auswahl der für dich passenden Lösung solltest du auf jeden Fall die Lizenz-Bestimmungen für eine Anwendung im gewerblichen Rahmen abklären, wenn du dein Blog später einmal monetarisieren willst. Denn es kann Ärger geben, wenn jemand auf deiner Website Bilder entdeckt, die nachweislich mit einer Software bearbeitet wurden, die im privaten Bereich frei nutzbar, aber im gewerblichen Bereich nicht zugelassen ist.

Ohne den Anspruch auf Vollständigkeit sind im Folgenden eine ganze Reihe Programme aufgelistet, die für Bildbearbeitung und fürs Bilder optimieren zur Verfügung stehen. Diese Liste ist gegliedert in kostenfreie und kostenpflichtige Programme, Webbasierte Lösungen, Online-Dienste und reine Komprimierungs-Software.

 

Kostenlose Programme für die Bildbearbeitung

  • Gimp: Open Source, kostenlos, sehr umfangreiche Bildbearbeitung, Bedienung schwierig
  • Paint.net: Variante Classic ist kostenlos, Variante Shop kostenpflichtig, benötigt NET-Framework (wird automatisch mitinstalliert), sehr umfangreich, aber kleiner als Gimp, die Paint.Net-App für Win 10 ist kostenpflichtig
  • DigiFoto: kostenlos, schlank, aber für die wichtigsten Anwendungen ausreichend, gibt oft Probleme bei der Installation
  • Photo Pos Pro: kostenlose und kostenpflichtige Version, bietet 2 verschiedene Layouts (Anfänger/Fortgeschrittene), speichert in der kostenlosen Variante bis max. 2014 x 1024, intuitiver zu bedienen als Gimp
  • Riot: kostenlos, sehr klein,
  • Fotografix: sehr spartanisch ausgestattet, sehr klein
  • Pinta 1.6: kostenlos, Open Source, ist die Paint.Net-Variante für Linux und Mac, setzt das Gimp-Toolkit voraus
  • Image Resizer: kostenlos, schlank, neue Software, einige Funktionen fehlen noch
  • Picasa: kostenlos, Entwicklung wurde eingestellt, die Online-Werkzeuge abgeschaltet
  • FastStone Photo Resizer: kostenlos, schlank,
  • Photoscape: kostenlos, schlank, einfach zu bedienen, liefert gefährliche Adware beim Installationsprozess (Aufpassen!)
  • LightZone: kostenlos, englisch, Alternative zu Lightroom, sehr umfangreich
  • Krita: kostenlos, Malprogramm

 

Kostenpflichtige Programme für die Bildbearbeitung

  • IrvanView: kostenpflichtig, 10 €, sehr umfangreich, aber kleiner als Paint.Net
  • StudioLine Photo Basic 4
  • Zoner Photo Studio: kostenpflichtig nach 30 Tagen
  • Mylio: kostenpflichtig, Abo
  • ArcSoft PhotoStudio: kostenpflichtig
  • Fireworks CS4: (Adobe), kostenpflichtig
  • FotoWorks XL2: kostenpflichtig
  • Fotosizer: kostenlos, schlank, Bildbearbeitungs-Werkzeuge nur in der kostenpflichtigen Pro-Version
  • PhotoFiltre: kostenfrei bei privater Nutzung
  • Kraken.io: kostenpflichtig
  • FastStone: kostenpflichtig
  • Affinity Photo: kostenpflichtig
  • JPEGmini: kostenpflichtig ab 20 Bilder/Tag
  • PhotoDirector: kostenpflichtig:
  • Corel PaintShop Pro: kostenpflichtig
  • Black Bird Image Optimizer: kostenpflichtig
  • Pixillon: kostenfrei nur bei privater Nutzung
  • Magix: kostenpflichtig
  • PixelMator: kostenpflichtig
  • Darktable: Profitool, Rohdatenbearbeitung, kostenpflichtig
  • RawTherapee: Profitool, Rohdatenbearbeitung, kostenpflichtig

 

Webbasierte Programme für die Bildbearbeitung

  • PhotoFancy
  • Polarr
  • Fotor
  • Pixlr: Version Today ist kostenlos
  • SumoPaint
  • Canva
  • PicMonkey

 

Programme zum Bilder optimieren ohne Bildbearbeitung

  • Caesium Image Compressor
  • Light Image Resizer
  • TinyPic
  • File Optimizer
  • PNGGauntlet

 

Online-Dienstleister fürs Bilder optimieren

(kritisch bzgl. DSGVO, Stapelbearbeitung, Begrenzung der Tagesmenge)

  • Compressjpeg: 20er Stapel,
  • Optimizilla: 20er Stapel, besser als Compressjpeg
  • Fotosverkleinern.de (Stapelbearbeitung setzt Registrierung voraus)
  • TinyPNG: für JPG und PNG,
  • Shortpixel: 50er Stapel, max. 100 Fotos/Monat
  • IloveIMG (15er Stapel ohne, 30er Stapel mit Registrierung)
  • Compressor.io

 

WordPress-Plugins fürs Bilder optimieren

Du kannst auch per WordPress-Plugin deine Bilder optimieren. Dabei werden die Dateien auf einem externen Server bearbeitet vor dem Hochladen in die WordPress-Mediathek.

Die kostenfreie Version der Plugins bietet in der Regel eine stark begrenzte Anzahl Fotos pro Tag oder Monat, zusätzlich manchmal auch eine Begrenzung in der Dateigröße.

Hierbei musst du zudem berücksichtigen, dass WordPress in der Mediathek neben dem Original automatisch 3 weitere Kopien in anderen Formaten anlegt (150 x 150, 300 x 300, 1024 x 1024). So ist bei einem Limit von 100 Bildern tatsächlich nur eine Bearbeitung von 25 Fotos möglich.

Einige Plugins erlauben zusätzlich das nachträgliche Komprimieren der Medien-Bestände in der Mediathek, benötigen aber unter Umständen Zugriffsrechte auf den Server, die der Hoster möglicherweise gesperrt hat (z. B. die exec()-Funktion). Solltest du vorab mit dem Hoster abklären, bevor du ein Plugin installierst.

Die wichtigsten Plugins fürs Bilder optimieren:

  • WP Smush: kostenlose Version max. 50 Fotos im Stapel, max 1 MB Bildgröße als Input
  • Imagify: max Bildgröße 2 MB, 25 MB/Monat frei
  • ShortPixel: 100 Bilder/Monat frei
  • Compress JPEG & PNG Images: 100 Fotos/Monat frei
  • EWWW Image Optimizer

 

WordPress-Plugins für die Medien-Verwaltung

Medien VerwaltungWordPress speichert die hochgeladenen Medien (Fotos, PDFs usw.) in der Mediathek nach Hochlade-Monat ab. Ist als Verwaltungs-Hilfe ganz brauchbar. Hat man allerdings mehrere hundert oder sogar tausend Bilder in der Mediathek, dann kommt man mit dieser Gliederung schnell an Grenzen und verliert enorm viel Zeit für die Suche nach ganz bestimmten Fotos. An dieser Stelle sind Plugins zur Medien-Verwaltung sehr nützlich. Sie erlauben die Gliederung aller Medien in unbegrenzt viele, selbst definierte Kategorie-Ordner.

Unser Favorit hierfür: Enhanced Media Library.

 

WordPress-Plugins für die Bereinigung der Mediathek

Es kommt vor, dass man später Medien aus der Mediathek wieder löschen möchte, weil man sie doch nicht in Beiträgen oder Seiten verwendet hat. Hierzu bietet WordPress in der Mediathek einen Filter an, der aber nach meiner Erfahrung nicht treffsicher funktioniert. An dieser Stelle vertraue ich lieber auf das Plugin, welches sich genau auf diese Aufgabe spezialisiert hat: Media Cleaner.
Es arbeitet sehr sauber und treffsicher.

 

Fazit zum Bilder optimieren und zur Medienverwaltung

Noch vor dem Hochladen in die Mediathek solltest du deine Medien und Bilder optimieren: Dateigröße reduzieren, Metadaten löschen, Dateinamen anpassen und Alt-Text ergänzen.

Daneben könnten Diebstahlschutz, Urheberrecht, die Vorgaben der DSGVO und die Medien-Verwaltung in deiner WordPress-Mediathek für dich relevante Themen sein.

Ob und wann du dich hier eines Plugins bedienst, solltest du gut abwägen.

 

Lesetipp:

Reiseblogger werden – und was dein Blog erfolgreich macht

 

 

Gliederung der Beitragsreihe:   Blog erstellen

 

 

Dieser Beitrag enthält sehr viel wertvolle Information, mühsam zusammengetragen und sorgfältig aufbereitet. Du erhältst diese Infos kostenlos. Wenn dir der Beitrag gefallen hat, freuen wir uns. Als kleines Dankeschön könntest du

  • den Beitrag in unseren Social Media Kanälen teilen
  • weiterhin auf unserem Blog stöbern oder
  • unseren Newsletter abonnieren.

 

Nichts mehr verpassen:  Newsletter abonnieren

Kommentare sind geschlossen.