Welches Bildformat für den WordPress Blog?

JPG, GIF, PNG oder SVG?

Jeder WordPress Blog bekommt erst durch Bilder Leben eingehaucht. Denn auch in der Onlinewelt gilt: Das Auge isst mit. Wenn Sie also Ihren WordPress Blog aufwerten möchten, sollten Sie auf hochwertige Bilder und Grafiken setzen. Doch welches Bildformat sorgt für optischen Genuss UND schont Speicherplatz und Ladezeiten? Das Kölner eLancer-Team verrät Ihnen, wann Sie zu welchem Bildformat greifen sollten.

Es gibt unterschiedlichste Bildformate, doch für die Darstellung auf einem WordPress Blog kommen in der Regel vor allem drei zum Einsatz: JPG, GIF und PNG. Doch wann ist welches Bildformat für den WordPress Blog sinnvoll? Schauen wir uns die Kandidaten einmal genauer an.

JPG: DER SHOOTINGSTAR FÜR FOTOS

JPG oder auch JPEG steht für „Joint Photographic (Experts) Group“. Mit ihm lassen sich bis zu 16,8 Millionen Farben darstellen. Damit ist das Bildformat für die Darstellung von Inhalten mit vielen Farben und komplexen Schattierungen wie Fotos gemacht. Je größer und umfangreicher die Fotos, desto größer aber auch die Datei. Oft müssen Fotos speziell für Web exportiert werden, denn JPG-Dateien mit 20 MB oder mehr sind keine Seltenheit. Sie überschreiten dann nicht nur das Upload-Limit bei WordPress, sondern erhöhen die Ladezeit deutlich. Wenn Sie also Fotos hochladen möchten, sollten Sie JPG für den Einsatz auf Ihrer WordPress Seite verwenden, diese aber vorher ggf. komprimieren.

Fotos sind ein beliebtes Stilmittel für Blogbeiträge in WordPress, wie hier der Schnappschuss von unserem Besuch beim SEO Day 2015.

JPG: DIE WICHTIGSTEN INFOS AUF EINEN BLICK:

  • Darstellung von bis zu 16,8 Millionen Farben
  • Geeignet für detailreiche Bilder und komplexe Schattierungen
  • Standardformat bei Digitalkameras
  • Teilweise sehr große Dateien
  • Verlustbehaftete Kompression
  • Kompressionsgrad frei wählbar
  • Kann von fast allen Programmen und Browsern dargestellt werden
  • Keine Transparenz möglich
  • Für Darstellungen mit scharfen Kanten ungeeignet

GIF: BRINGT BEWEGUNG IN DIE SACHE

Wenn Sie Elemente auf Ihrer Webseite animieren möchten, dann ist GIF das passende Bildformat für den WordPress Blog. GIF steht für „Graphics Interchange Format“, übersetzt also Grafikaustauschformat. Es tut genau das: Mehrere in der Datei gespeicherte Bilder werden nacheinander „ausgetauscht“ und ergeben eine kurze Animation.

Zieht alle Blicke auf sich: Dieses GIF haben wir für einen unserer Kunden entwickelt.

GIF: DIE WICHTIGSTEN INFOS IM ÜBERBLICK

  • Erlaubt Animationen
  • Kleine Dateigröße
  • Verlustfreie Kompression
  • Transparente Flächen
  • Progressive Loading
  • Darstellung von bis zu 256 Farben

Ähnlich wie beim PNG ist auch GIF in der Lage, transparente Flächen darzustellen, allerdings ist diese bei PNG besser ausgereift und auch bei der Farbwiedergabe hat PNG die Nase leicht vorn. Setzen Sie GIF daher nur für Animationen ein und überlassen Sie den Rest dem PNG.

 

PNG? LOGO!

Die „Portable Network Graphics“ sind eine beliebte Wahl für Logos und Grafiken. PNG ermöglicht nicht nur transparente Hintergründe, sondern erlaubt zusätzlich die Skalierung der Transparenz. So können Sie auch mit transluzenten Elementen arbeiten.

Das Logo vom eLancer-Team als PNG

PNG IM ÜBERBLICK:

  • Skalierbare Transparenz
  • Verlustfreie Kompression
  • Dateigröße kleiner als JPG
  • Gute Darstellung einfarbiger Flächen
  • Unterstützt bis zu 256 Farben
  • Scharfe Kanten
  • Nicht für große Darstellungen geeignet

SVG: DER MATHEMATIKER DER BILDFORMATE

Das Kürzel SVG steht für „Scalable Vector Graphics“. Übersetzt bedeutet das „skalierbare Vektorgrafik“. Anders als bei den auf Pixelgittern basierenden Bildformaten JPG, PNG und GIF werden bei einer Vektorgrafik Formen und Farbwerte mathematisch in Pfaden beschrieben. So lassen sich die als SVG erstellten Grafiken verlustfrei auf jede beliebige Größe skalieren.

SVG IM ÜBERBLICK

  • Verlustfrei skalierbar, daher für scharfe Darstellungen in jeder Größe geeignet
  • Animierbar, da auf XML-Basis
  • Kleine Dateigröße auch bei großen Darstellungen oder Animationen
  • Verwendung mit JavaScript oder CSS
  • Geeignet für alle Grafiken und Logos
  • Upload in WordPress nur über Code-Ergänzung in der functions.php möglich

Um SVG-Dateien in WordPress hochzuladen, muss erst ein Code-Snippet hinzugefügt und das Dateiformat freigeschaltet werden. Wie das funktioniert, erfahren Sie in diesem Video:

 

Kurz gesagt: Alles mit viel Text, wenigen Farben und transparenten Hintergründen speichern Sie als PNG-Datei ab. Dazu zählen beispielsweise Grafiken, Logos, Zeichnungen, Diagramme oder Screenshots. Sobald viele Farben im Spiel sind, setzen Sie auf JPG. Dazu zählen Fotografien und fotorealistische Grafiken. Kleinere Animationen laden Sie als GIF-Datei auf Ihre WordPress Seite hoch. Wenn Sie mit JavaScript oder CSS arbeiten und Ihre Grafik verlustfrei skalieren möchten, ist das SVG die richtige Wahl.

IMMER FÜR SIE DA: DAS ELANCER-TEAM

Jetzt haben Sie einen Überblick, wann Sie welches Bildformat für den WordPress Blog einsetzen sollten. Auf diese Weise stellen Sie sicher, dass Ihre Bilder nicht die Ladezeiten Ihrer Webseite verschlechtern und sorgen gleichzeitig für eine runde Optik. Mit einem zeitgemäßen Webdesign und individuellen Logos, Wortmarken oder Icons heben Sie sich von der Masse ab. Gemeinsam mit Ihnen setzt das eLancer-Team Ihre Wünsche um. Kontaktieren Sie uns einfach und wir bereiten Ihnen ein individuelles Angebot.

IT erscheint Ihnen kompliziert?

Wir helfen gerne

Sie müssen nicht verstehen, was eine Programmiersprache ist, um erfolgreich im Web zu sein. Wir helfen gerne bei der Technik. Sie konzentrieren sich auf Ihr Business.

Wir haben die Profis

Das eLancer-Team vereinigt junge Profis aus allen Bereichen der IT und des Online-Marketing. Sie müssen nicht länger suchen, wir vermitteln Ihnen bezahlbare Freelancer, die für Ihr Projekt passen.

Wir geben gratis Tipps

Beschreiben Sie uns doch kurz Ihren Bedarf. Hinterlassen Sie bitte auch Ihre Telefonnummer. Wir rufen Sie zurück, wann immer Sie Zeit haben. Fragen zu Aufwand und Komplexität eines Projektes beantworten wir natürlich kostenlos.