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.

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

Du brauchst Hilfe?

  • Wir sind erfahrene Web-Entwickler und Web-Designer aus Köln. Seit Gründung im Jahr 2011 arbeiten wir für unsere Kunden regelmäßig mit PHP, Ruby on Rails in der Softwareentwicklung und WordPress.

  • Du musst nicht länger suchen, wir vermitteln dir bezahlbare Agentur-Leistungen. Gerne arbeiten unsere Webentwickler auch als Teil deines Teams.

  • Beschreibe uns doch kurz deinen Bedarf. Wir rufen dich zurück, wann immer du Zeit hast. Fragen zu Aufwand und Komplexität eines Projektes beantworten wir natürlich kostenlos.

Neugierig geworden?

Nimm jetzt Kontakt mit uns auf. Wir freuen uns auf dich.

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.

mediafix 2 fuer 1 ostern

GIF: BRINGT BEWEGUNG IN DIE SACHE

  • 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.

elancer-team Logo alt

Ein Logo vom elancer-team als PNG

  • 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:

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

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 die Webagentur elancer-team Ihre Wünsche um. Kontaktieren Sie uns einfach und wir bereiten Ihnen ein individuelles Angebot.