{"id":12272,"date":"2020-02-12T08:01:13","date_gmt":"2020-02-12T07:01:13","guid":{"rendered":"https:\/\/waltersblog.ch\/2020\/02\/12\/bilder-in-wordpress\/"},"modified":"2020-02-12T08:01:13","modified_gmt":"2020-02-12T07:01:13","slug":"bilder-in-wordpress","status":"publish","type":"post","link":"https:\/\/walterlernt.ch\/blog\/bilder-in-wordpress\/","title":{"rendered":"Bilder in WordPress \u2013 Ratgeber"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Wann JPG, GIF oder PNG? SVG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dieser Artikel soll WordPress-Administratoren und -Redakteure bei der Optimierung von Bildern auf der Website unterst\u00fctzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Update: Wir haben bei Walter Live ein aktuelleres Webinar zu diesem Thema: <a href=\"https:\/\/walterlive.ch\/bildoptimierung-fuers-web\/\" target=\"_blank\" rel=\"noopener\">Bildoptimierung f\u00fcrs Web(P)<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Formatwahl f\u00fcr Eilige<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Nimm JPG f\u00fcr Fotos und nur f\u00fcr Fotos.<\/li><li>Den Rest kannst du vermutlich mit PNG l\u00f6sen.<\/li><li><a href=\"https:\/\/www.walterlernt.ch\/2017\/10\/17\/svg-logo-wordpress-sicher\/\">Logo als SVG<\/a>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-background has-fixed-layout\" style=\"background-color:#f3f4f5\"><thead><tr><th><\/th><th>JPG<\/th><th>GIF<\/th><th>PNG-8<\/th><th>PNG-24<\/th><\/tr><\/thead><tbody><tr><td>Wof\u00fcr<\/td><td>Fotos<\/td><td>Animationen<\/td><td>Flache Grafiken mit wenigen Farben<\/td><td>Alpha-Transparenz, kleine Grafiken, die in hoher Qualit\u00e4t genutzt werden<\/td><\/tr><tr><td>Farben<\/td><td>16 Mio<\/td><td>Max. 256<\/td><td>Max. 256<\/td><td>16 Mio (oder mehr, dann wird es zum PNG-32)<\/td><\/tr><tr><td>Komprimierung<\/td><td>Qualit\u00e4t 0-100<\/td><td>Anzahl Farben, div.<\/td><td>Anzahl Farben, div.<\/td><td>Anzahl Farben, div.<\/td><\/tr><tr><td>Verlustlose Komprimierung<\/td><td>&#x1f44e;&#x1f3fd;<\/td><td>&#x1f44d;&#x1f3fd;<\/td><td>&#x1f44d;&#x1f3fd;<\/td><td>&#x1f44d;&#x1f3fd;<\/td><\/tr><tr><td>Animation<\/td><td>&#x1f44e;&#x1f3fd;<\/td><td>&#x1f44d;&#x1f3fd;<\/td><td>APNG<\/td><td>APNG<\/td><\/tr><tr><td>Transparenz<\/td><td>&#x1f44e;&#x1f3fd;<\/td><td>Ja, aber jeder Pixel ist entweder ganz deckend oder ganz transparenz<\/td><td>&#x1f44d;&#x1f3fd;<\/td><td>&#x1f44d;&#x1f3fd;, Alpha-Transparenz (Teil-Transparenz)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bilder schneller laden<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Websites k\u00f6nnen nicht zu schnell laden. Bilder sind h\u00e4ufig der Grund, warum eine Website nicht schnell l\u00e4dt. Wir wollen, dass die Bilder gut aussehen und doch schnell laden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verschiedene Massnahmen und Kriterien k\u00f6nnen Bilder optimieren. Darunter geh\u00f6ren unter anderem:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Format (JPG, PNG; GIF, SVG)<\/li><li>Komprimierung der Datei<\/li><li>Dimensionen (z. B. 1024px x 768px)<\/li><li>Anzahl Bilder auf einer Seite<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Format<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Im Web werden folgende Bildformate am meisten genutzt: JPG, GIF, PNG und SVG. Andere Formate wie BMP, TIF und PSD haben im Web nichts verloren. Sie m\u00fcssen in ein webfreundliches Format konvertiert werden bevor sie ins Web kommen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nachfolgend besprechen wir die einzelnen Formate etwas detaillierter.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Komprimierung<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Verschiedene Formate haben verschiedene Komprimierungs-M\u00f6glichkeiten. Beim JPG haben wir einen Regler, mit dem wir die Dateigr\u00f6sse nahezu stufenlos verkleinern k\u00f6nnen, indem auch die Qualit\u00e4t verschlechtert wird. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei anderen Formaten haben wir andere M\u00f6glichkeiten, z. B. die Anzahl der verf\u00fcgbaren Farben reduzieren.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Dimensionen<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Wie breit und hoch ist das Bild? Je kleiner das Bild ist &#8211; also, je weniger Pixel das Bild hat, umso kleiner ist die Datei.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Anzahl Bilder auf einer Seite<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Vielleicht der banalste Punkt. Wie viele Bilder werden auf einer Website geladen? Wenn ich 100 Bilder lade, dann dauert das ca. 100 Mal l\u00e4nger, als wenn ich ein Bild lade. Manchmal ist die beste &#8220;Komprimierung&#8221;, die Reduktion der Anzahl Bilder auf einer Seite.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bildformate mi Vergleich<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">JPG<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Das JPG-Format ist f\u00fcr Fotos geeignet. Das ist es eigentlich schon. Bilder, die Millionen von Farben enthalten und ein wenig Qualit\u00e4tsverlust zugunsten von kleinerer Dateigr\u00f6sse verkraften. Das sind meistens Fotos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">GIF<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Das Format GIF wurde mehrheitlich durch PNG-8 abgel\u00f6st.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">GIF-Dateien k\u00f6nnen aber auch Animationen enthalten, was bei PNG zwar geht, aber nicht so breite Unterst\u00fctzung unter den Browsern geniesst (Beispielsweise der Internet Explorer versteht animierte APNG mindestens bis und mit Version 11 nicht). Schon der Begriff \u201eAnimiertes GIF\u201c l\u00f6st oft Augenrollen aus. Das bewegende Briefkasten-F\u00e4hnchen ist total ausser Mode geraten. Das heisst aber nicht, dass Animationen nicht sinnvoll eingesetzt werden k\u00f6nnen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">PNG<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">PNG-Dateien k\u00f6nnte man fast als Allesk\u00f6nner bezeichnen. Sie zeigen Bilder wundersch\u00f6n mit einer verlustlosen Komprimierung \u2013 also ohne Qualit\u00e4tsverlust. Sie unterst\u00fctzen Alpha-Transparenz, was bedeutet, dass jeder Pixel eine beliebige Farbe haben kann und zus\u00e4tzlich die Transparenz bzw. Deckkraft definiert werden kann.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Man k\u00f6nnte also in die Versuchung kommen, jedes Bild im Web im PNG-Format zu speichern. Es gibt aber einen Haken: PNG-Dateien k\u00f6nnen schnell mal ziemlich schwer (Dateigr\u00f6sse) werden. Somit ist das PNG-Format oft nicht zu empfehlen, wenn es sich um Bilder mit grossen Dimensionen handelt.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">SVG<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">SVG-Dateien sind Vektorgrafiken. Da dieses Format Skripte erhalten kann, und somit eine potentielle Gefahr mit sich bringen kann, ist es standardm\u00e4ssig deaktiviert in WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mit Hilfe eines Plugins kann das Format SVG trotzdem wieder aktiviert und genutzt werden. Danach k\u00f6nnen Sie zum Beispiel ein Logo im SVG-Format hoch laden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>SVG Support<\/strong><br><a href=\"https:\/\/wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wordpress.org\/plugins\/svg-support\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Safe SVG<\/strong><br><a href=\"https:\/\/wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wordpress.org\/plugins\/safe-svg\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die 72-DPI-L\u00fcge<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cBilder sollen mit 72 DPI gespeichert werden, wenn sie f\u00fcr das Web genutzt werden!\u201d&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das h\u00f6rt man nicht selten. Auch in B\u00fcchern ist dieser Quatsch zu finden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dass es schwachsinnig ist, solche Aussagen zu machen, ist schnell erkl\u00e4rt: DPI steht f\u00fcr Dots Per Inch, also Punkte pro Zoll. Der Bildschirm alleine gibt vor, wie dicht die Pixel zueinander stehen. Mit einem Bild kann man das nicht \u00e4ndern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Im Print-Bereich ist das anders. Bildpunkte k\u00f6nnen kleiner und n\u00e4her zusammen gedruckt werden und das ergibt eine h\u00f6here DPI-Zahl. Da macht das Sinn. Auf Bildschirmen nicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das heisst, wenn ein Bild f\u00fcr das Web gespeichert wird, dann z\u00e4hlen bez\u00fcglich Aufl\u00f6sung nur die Dimensionen in Pixeln. Wie viele Pixel breit mal wie viele Pixel hoch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wie gross d\u00fcrfen Bilder maximal sein?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">So klein wie m\u00f6glich, so gross wie n\u00f6tig. Das h\u00e4ngt von vielen Faktoren ab:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Zielgruppe<\/li><li>Art der Website<\/li><li>Anzahl der Bilder auf einer Seite<\/li><li>Bildgr\u00f6ssen und -formate<\/li><\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>JPG? PNG? GIF? SVG? Dieser Artikel soll WordPress-Administratoren und -Redakteure bei der Optimierung von Bildern auf der Website unterst\u00fctzen.<\/p>\n","protected":false},"author":1,"featured_media":83225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264,267,263],"tags":[219,234,235,211,236],"class_list":["post-12272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-kreativitaet","category-texte-kommunikation","category-wordpress-webdesign","tag-bilder","tag-gif","tag-jpg","tag-performance","tag-png"],"_links":{"self":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/12272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/comments?post=12272"}],"version-history":[{"count":0,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/12272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media\/83225"}],"wp:attachment":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media?parent=12272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/categories?post=12272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/tags?post=12272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}