{"id":169,"date":"2015-07-03T15:17:23","date_gmt":"2015-07-03T13:17:23","guid":{"rendered":"https:\/\/www.pixolum.com\/blog\/?p=169"},"modified":"2022-01-28T11:54:33","modified_gmt":"2022-01-28T10:54:33","slug":"webp-das-google-bildformat-fuer-schnellere-websites","status":"publish","type":"post","link":"https:\/\/www.pixolum.com\/blog\/fotografie\/webp-das-google-bildformat-fuer-schnellere-websites","title":{"rendered":"WebP \u2013 das Google Bildformat f\u00fcr schnellere Websites"},"content":{"rendered":"<p><strong>Klassischerweise werden f\u00fcr Bilder auf Websites die Formate jpeg, png, svg, oder gif verwendet. Neu gibt es ein von Google definiertes Bildformat mit der Dateiendung \u00a0*.webp, welches die Dateigr\u00f6sse ohne Verlust nahezu halbieren kann. Erfahren Sie in diesem Artikel die Vor- und Nachteile von webp und welche Rolle das schnelle Laden von Bildern auf das Google Ranking hat.<\/strong><\/p>\n<p>Ein durchschnittlicher Besucher einer Website wartet maximal 3 Sekunden, bevor er die Website wieder verl\u00e4sst. Gerade bei Websites von Fotografen mit Ihren Portfolios, welche viele Bilder beinhalten, kann die Ladezeit zu einem Problem werden.<\/p>\n<h3>Einfluss der Ladezeit Ihrer Website auf das Google Ranking<\/h3>\n<div class=\"pixol-adsense-mitte-beginn-artiel\" style=\"float: right;\" id=\"pixol-1508277355\"><script async type=\"text\/javascript\" src=\"\/\/cdn.carbonads.com\/carbon.js?serve=CE7IL2JM&placement=wwwpixolumcom\" id=\"_carbonads_js\"><\/script><\/div><p>Im Algorithmus von Google, welcher das Ranking und damit die Position Ihrer Website bei einer Suchanfrage bestimmt, h\u00e4ngt von rund 200 Faktoren ab. Was genau diese Faktoren beinhalten, ist nat\u00fcrlich ein gut beh\u00fctetes Geheimnis. Trotzdem gibt Google klare Hinweise darauf, dass die <strong>Ladezeit Ihrer Website eine immer wichtiger werdende Rolle<\/strong> spielt. \u201eMake the Web faster\u201c ist also angesagt. Je schneller eine Website geladen ist, desto schneller erh\u00e4lt der Nutzer die Informationen, die er sucht \u2013 was wiederum das Kerngesch\u00e4ft von Google ist. Dazu kommt der immer gr\u00f6ssere Anteil an mobilen Benutzern mit Smartphones und Tablets, welche auf meist ein beschr\u00e4nktes Datenvolumen und\/oder Geschwindigkeit zur Verf\u00fcgung haben.<\/p>\n<p>Auf pixolum.com beispielsweise greifen knapp 50 % der Besucher mit mobilen Ger\u00e4ten zu. Aus diesem Grund hat Google das <strong>Bildformat webp<\/strong> entwickelt, mit welchem gegen\u00fcber JPEG rund 25-34 % an Bildgr\u00f6sse eingespart werden k\u00f6nnen.<\/p>\n<h3>Die Vorteile und Nachteile von webp als Bildformat<\/h3>\n<p><strong>Sehen sie einen Unterschied?<\/strong><\/p><div class=\"pixol-inhalt_3\" style=\"margin-bottom: 30px;\" id=\"pixol-1247584477\"><h4>Kennst du schon meine 52 weltbesten Spickzettel?<\/h4>\r\n<div class=\"spickteaser\">\r\n<div class=\"row\">\r\n<div class=\"col-sm-7\">\r\n\t<a href=\"https:\/\/www.pixolum.com\/blog\/downloads\/fotografie-spickzettel?utm_source=pixolum&utm_medium=blog_inarticle&utm_campaign=spk_pix_sale_30&utm_term=p79\"><img class=\"alignnone size-full wp-image-8300\" src=\"https:\/\/www.pixolum.com\/blog\/wp-content\/uploads\/2020\/10\/Fotospickzettel-pixolum-500px.jpg\" alt=\"Fotografie Spickzettel\" loading=\u201dlazy\u201d \/><\/a>\r\n\t<\/div>\r\n<div class=\"col-sm-5\">\r\n<a href=\"https:\/\/www.pixolum.com\/blog\/downloads\/fotografie-spickzettel?utm_source=pixolum&utm_medium=blog_inarticle&utm_campaign=spk_pix_sale_30&utm_term=p79\">\r\n\t<ul class=\"check_icon_list check_icon_list--spickzettel\">\r\n\t\t<li>Mein ganzes Fotowissen<\/li>\r\n\t\t<li>Bessere Fotos in 5 Minuten<\/li>\r\n\t\t<li>Referenz zum Nachschlagen<\/li>\r\n\t\t<li>Kompakt, immer dabei!<\/li>\r\n\t\t<li>Rabatt nicht verpassen!<b><span>-50%<\/span><\/b><\/li>\r\n\t<\/ul>\r\n\t<div class=\"trenner_30\"><\/div>\r\n<\/a>\r\n<a href=\"https:\/\/www.pixolum.com\/blog\/downloads\/fotografie-spickzettel?utm_source=pixolum&utm_medium=blog_inarticle&utm_campaign=spk_pix_sale_30&utm_term=p79\" class=\"btn btn-primary btn-lg btn-block\">Ou ja, zeig mal!<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<hr><\/div>\n<p>Vielen Dank an <a href=\"https:\/\/www.pixolum.com\/de\/fotograf\/patrick-stoll\">Patrick Stoll<\/a>, dass wir dieses Bild verwenden d\u00fcrfen.<\/p>\n<p><strong><span style=\"color: #333333\">JPEG 244kB<\/span><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"img-responsive alignnone\" src=\"https:\/\/assets.pixolum.com\/profile\/uploads\/10134\/Fotograf-Schaffhausen-Schweiz-Patrick-Stoll-1042438220.jpg\" alt=\"webp und jpeg I\" width=\"1200\" height=\"921\" title=\"\"\/><\/p>\n<p><strong>WebP 170 kB <\/strong><\/p>\n<p>(dieses Bild wird Ihnen\u00a0nicht angezeigt, falls Ihr\u00a0Browser webp nicht unterst\u00fctzt)<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"img-responsive alignnone\" src=\"https:\/\/assets.pixolum.com\/profile\/uploads\/10134\/Fotograf-Schaffhausen-Schweiz-Patrick-Stoll-1042438220.webp\" alt=\"webp und jpeg II\" width=\"1200\" height=\"921\" title=\"\"\/> <strong>Die Vorteile von webp<\/strong><\/p>\n<ul class=\"iconlist\">\n<li>Einsparung der Bildgr\u00f6sse gegen\u00fcber JPEG ist 25-34 % (mit gleichem SSIM Index)<\/li>\n<li>Einsparung der Bildgr\u00f6sse gegen\u00fcber PNG ist 26 % (je nach Bild bis 80 %)<\/li>\n<li>Webp unterst\u00fctzt verlustfreie Transparenz und Animationen<\/li>\n<li>Auch bei hoher Kompression sieht webp besser aus als JPEG<\/li>\n<li>Webp verringert die Ladezeit Ihrer Website und spart Traffic<\/li>\n<li>Webp kann als Bildschutz dienen, da es aktuell ausschliesslich f\u00fcrs Web verwendet werden kann und eine Umwandlung bestimmte Tools erfordert. Eine webp Datei kopieren ist nat\u00fcrlich m\u00f6glich, da das Format aber noch nicht sehr bekannt ist, kann es eine abschreckende Wirkung f\u00fcr Bilderdiebe haben. Mehr \u00fcber den <a href=\"https:\/\/www.pixolum.com\/blog\/fotografie\/bilder-schuetzen-im-internet-mit-verschiedenen-methoden\">Schutz Ihrer Bilder im Internet mit einigen Methoden finden sie hier<\/a><\/li>\n<\/ul><p><strong>Die Nachteile von webp<\/strong><\/p>\n<ul class=\"iconlist\">\n<li>Es sind Tools oder Plugins notwendig, um ein Bild in das webp Format umzuwandeln<\/li>\n<li>Noch nicht alle Browser unterst\u00fctzen webp, daher muss gleichzeitig auch immer noch ein anderes, g\u00e4ngiges Bildformat angeboten werden. Welche sich dazu am besten eignen, findest Du in unserem Artikel zu den <a href=\"https:\/\/www.pixolum.com\/blog\/fotografie\/bildformate\">verschiedenen Bildformaten<\/a> mit ihren Vor- und Nachteilen.<\/li>\n<li>Weniger geeignet f\u00fcr Bilder mit sehr vielen Details<\/li>\n<\/ul>\n<h3>Wie funktioniert die Kompression mit Webp?<\/h3>\n<p>Die Kompression wird durch pr\u00e4diktive Codierung (Vorhersagecodierung) erzielt, die gleiche Methodik wie durch den VP8 Video Codec. Grunds\u00e4tzlich werden die Pixel in Bl\u00f6cke von jeweils 4&#215;4 Pixel aufgeteilt (die Bl\u00f6cke k\u00f6nnen aber auch variable Gr\u00f6ssen haben). Auf Basis benachbarter Pixelbl\u00f6cke werden die Werte f\u00fcr einen Nachbarblock \u201evorhergesagt\u201c. Eine webp Datei besteht also aus VP8 oder VP8L Bilddaten und einen Beh\u00e4lter auf der Grundlage RIFF.<\/p>\n<h3>Tools zur Umwandlung ins webp Format<\/h3>\n<p>Mittlerweile gibt es einige Tools oder webp Erweiterungen f\u00fcr Photoshop, die sich teilweise aber noch in Entwicklung befinden. Hier eine kleine Auswahl:<\/p>\n<ul class=\"iconlist\">\n<li>Photoshop mit <a href=\"http:\/\/blog.kulturbanause.de\/2011\/05\/webp-grafiken-mit-photoshop-plugin-erstellen\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebP-Addon<\/a><\/li>\n<li><a href=\"https:\/\/optimus.io\/support\/image-compression-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimus API<\/a><\/li>\n<li><a href=\"http:\/\/www.pixelmator.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pixelmator<\/a><\/li>\n<li><a href=\"http:\/\/www.irfanview.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">IrfanView<\/a><\/li>\n<li>GIMP <a href=\"https:\/\/groups.google.com\/a\/webmproject.org\/d\/msg\/webp-discuss\/-3E_t2nhFbk\/oCrV5ZHv0UEJ\" target=\"_blank\" rel=\"noopener noreferrer\">WebP-Plugin<\/a><\/li>\n<\/ul>\n<p><strong>F\u00fcr WordPress Nutzer<\/strong> gibt es ein Plugin names <a href=\"https:\/\/optimus.io\/\" target=\"_blank\" rel=\"noopener\">optimus<\/a>, welches automatisch webp Dateien erstellt und zudem auch automatisch JPEG Dateien verlustfrei komprimiert. Optimus bietet auch eine API an, welche man nutzen kann um JPEG oder PNG Dateien automatisch in WEBP umzuwandeln. Wir von pixolum haben die Optimus API genutzt, um rund 4000 Bilder automatisch in webp umzuwandeln und JPEG-Bilder verlustfrei zu komprimieren.<\/p>\n<h3>Das richtige Bild ausliefern<\/h3>\n<p><strong>Aktuell unterst\u00fctzen Chrome und Opera das webp-Format<\/strong>. Firefox ist ein m\u00f6glicher n\u00e4chster Kandidat, welcher in Zukunft ebenfalls webp unterst\u00fctzen k\u00f6nnte.<\/p>\n<p>Falls der Besucher mit einem Browser ohne webp-Unterst\u00fctzung wie z.B. Internet Explorer auf Ihre Website zugreift, soll das normale\u00a0Bild (jpeg,gif,png) angezeigt werden. Falls der Browser aber webp unterst\u00fctzt, soll das Bild automatisch durch eine webp-Datei mit dem gleichen Namen ersetzt werden, welche sich ebenfalls auf dem Webspace befindet. Das kann mit einem Eintrag in der .htaccess Datei auf dem Webserver erreicht werden.<\/p><pre>&lt;<span class=\"pl-ent\">IfModule<\/span> mod_rewrite.c&gt;\r\n    <span class=\"pl-c1\">RewriteEngine<\/span> On\r\n    <span class=\"pl-c1\">RewriteCond<\/span> <span class=\"pl-c1\">%{HTTP_ACCEPT}<\/span> <span class=\"pl-s\">image\/webp<\/span>\r\n    <span class=\"pl-c1\">RewriteCond<\/span> <span class=\"pl-c1\">%{DOCUMENT_ROOT}<\/span><span class=\"pl-sr\">\/$1.webp<\/span> <span class=\"pl-s\">-f<\/span>\r\n    <span class=\"pl-c1\">RewriteRule<\/span> <span class=\"pl-sr\">^(wp-content\/uploads.+)\\.(jpe?g|png)$<\/span> <span class=\"pl-s\">$1.webp<\/span> <span class=\"pl-sr\">[T=image\/webp,E=accept:1]<\/span>\r\n&lt;\/<span class=\"pl-ent\">IfModule<\/span>&gt;\r\n\r\n&lt;<span class=\"pl-ent\">IfModule<\/span> mod_headers.c&gt;\r\n    <span class=\"pl-c1\">Header<\/span> append Vary Accept env=REDIRECT_accept\r\n&lt;\/<span class=\"pl-ent\">IfModule<\/span>&gt;\r\n\r\n<span class=\"pl-c1\">AddType<\/span> image\/webp .webp<\/pre>\n<h3>Fazit<\/h3>\n<p>Ladezeiten einer Website sind ein wichtiger Ranking-Faktor bei Google. Daher lohnt es sich gerade f\u00fcr Fotografen mit vielen grossen Bildern auf der Website, diese zu optimieren. Webp bietet sich als neues <a href=\"https:\/\/developers.google.com\/speed\/webp\/\" target=\"_blank\" rel=\"noopener\">Bildformat von Google<\/a> an, um die Bildgr\u00f6ssen stark zu reduzieren. Ein klarer Nachteil ist, dass webp noch nicht von allen Browsern unterst\u00fctzt wird. Dennoch experimentiert auch Facebook zurzeit mit dem webp-Format. Es bleibt also spannend!<\/p>","protected":false},"excerpt":{"rendered":"<p>Klassischerweise werden f\u00fcr Bilder auf Websites die Formate jpeg, png, svg, oder gif verwendet. Neu gibt es ein von Google definiertes Bildformat mit der Dateiendung \u00a0*.webp, welches die Dateigr\u00f6sse ohne Verlust nahezu halbieren kann. Erfahren Sie in diesem Artikel die Vor- und Nachteile von webp und welche Rolle das schnelle Laden von Bildern auf das [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":176,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[2],"tags":[128,122,133],"class_list":["post-169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fotografie","tag-fotografie-wissen","tag-fotografie-tipps","tag-foto-software-tools-apps"],"_links":{"self":[{"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":22,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":14708,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions\/14708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/media\/176"}],"wp:attachment":[{"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixolum.com\/blog\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}