{"id":600,"date":"2019-10-26T15:31:47","date_gmt":"2019-10-26T13:31:47","guid":{"rendered":"https:\/\/ekiwi.de\/?p=600"},"modified":"2019-10-26T15:31:47","modified_gmt":"2019-10-26T13:31:47","slug":"bilder-mit-base64-kodierung-mit-css-in-html-verwenden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/600\/bilder-mit-base64-kodierung-mit-css-in-html-verwenden\/","title":{"rendered":"Bilder mit Base64-Kodierung mit CSS in HTML verwenden"},"content":{"rendered":"<p>Ich hatte bereits in einem Blogartikel gezeigt, wie wir Bilder als <a href=\"https:\/\/ekiwi.de\/index.php\/66\/bilder-mit-base64-kodierung-direkt-in-html-einbetten\/\" target=\"_blank\" rel=\"noopener noreferrer\">Base64 kodiert direkt in den HTML-Code einbetten<\/a> k\u00f6nnen. Doch wie kann man die Bilder an verschiedenen Stellen wiederverwenden?<\/p>\n<p><!--more--><\/p>\n<p>F\u00fcr die Konvertierung k\u00f6nnen wir unser <a href=\"http:\/\/ekiwi.de\/free_service\/base64\/index.php\" target=\"_blank\" rel=\"noopener noreferrer\">Konverter-Tool f\u00fcr Base64 Bilder<\/a> verwenden.<\/p>\n<p>Um die Bilder an verschiedenen Stellen zu verwenden, legen wir einen CSS-Stil an:<\/p>\n<pre>&lt;style type=&quot;text\/css&quot;&gt;\r\nspan.icon::before {\r\ncontent: url(data:image\/png;base64,iVBORw0KGgoA...);\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/10\/css_base64_1.png\" alt=\"\" width=\"533\" height=\"205\" class=\"aligncenter size-full wp-image-601\" srcset=\"\/wp-content\/uploads\/2019\/10\/css_base64_1.png 533w, \/wp-content\/uploads\/2019\/10\/css_base64_1-300x115.png 300w\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" \/><\/p>\n<p>Anschlie\u00dfend k\u00f6nnen wir das Bild im Code innerhalb eines Span-Tags ausgeben:<\/p>\n<pre>&lt;p&gt;&lt;span class=&quot;icon&quot;&gt;&lt;\/span&gt;Absatz mit Icon.&lt;\/p&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/10\/css_base64_2.png\" alt=\"\" width=\"416\" height=\"145\" class=\"aligncenter size-full wp-image-602\" srcset=\"\/wp-content\/uploads\/2019\/10\/css_base64_2.png 416w, \/wp-content\/uploads\/2019\/10\/css_base64_2-300x105.png 300w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/p>\n<p>Das Ergebnis:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/10\/css_base64_3.jpg\" alt=\"\" width=\"559\" height=\"274\" class=\"aligncenter size-full wp-image-603\" srcset=\"\/wp-content\/uploads\/2019\/10\/css_base64_3.jpg 559w, \/wp-content\/uploads\/2019\/10\/css_base64_3-300x147.jpg 300w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/p>\n<p>Die CSS-Klasse l\u00e4sst sich nun beliebig viele Stellen verwenden. Nat\u00fcrlich l\u00e4sst sich der CSS-Code auch in eine eigene CSS-Datei auslagern und so in alle HTML-Dateien einbinden.<\/p>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=92\" target=\"_blank\" rel=\"noopener noreferrer\">Hier geht es zum kompletten Beispiel<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ich hatte bereits in einem Blogartikel gezeigt, wie wir Bilder als Base64 kodiert direkt in den HTML-Code einbetten k\u00f6nnen. Doch<\/p>\n","protected":false},"author":1,"featured_media":80,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[16,22,4],"class_list":["post-600","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-base64","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}