{"id":66,"date":"2018-03-17T18:35:49","date_gmt":"2018-03-17T17:35:49","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=66"},"modified":"2018-03-17T18:35:49","modified_gmt":"2018-03-17T17:35:49","slug":"bilder-mit-base64-kodierung-direkt-in-html-einbetten","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/66\/bilder-mit-base64-kodierung-direkt-in-html-einbetten\/","title":{"rendered":"Bilder mit Base64-Kodierung direkt in HTML einbetten"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/66\/bilder-mit-base64-kodierung-direkt-in-html-einbetten\/#Umsetzung\" >Umsetzung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/66\/bilder-mit-base64-kodierung-direkt-in-html-einbetten\/#Ergebnis\" >Ergebnis<\/a><\/li><\/ul><\/nav><\/div>\n<p>Neben der normalen Verlinkung von Bildern in HTML als externe Datei, lassen sich Bilder auch komplett in die HTML-Datei einbinden.<\/p>\n<p>Der Vorteil: man muss nur die HTML-Datei weitergeben, externe Abh\u00e4ngigkeiten bestehen nicht. Ideal auch f\u00fcr Newsletter per E-Mail. Viele E-Mail-Programme blockieren standardm\u00e4\u00dfig das Nachladen von Bildern, eingebettete Bilder werden hingegen direkt angezeigt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Umsetzung\"><\/span>Umsetzung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein normales Bild wird so eingebunden:<\/p>\n<pre> &lt;img src=\"bild.png\"<\/pre>\n<p>Das &#8222;src&#8220;-Attribut enth\u00e4lt den Link zum Bild. Statt dem Link kann man auch direkt die Bilddaten in das Attribut packen. Da Bilder bin\u00e4re Daten sind, m\u00fcssen diese zuerst in das Base64-Format transferiert werden.<\/p>\n<p>Dies kann man sehr leicht mit unserem erledigen <a class=\"btn btn-primary\" role=\"button\" href=\"http:\/\/ekiwi.de\/free_service\/base64\/index.php\">Base64 Bild Konverter Tool.<\/a><\/p>\n<p>Der erzeugte Code sieht dann in etwa so aus:<\/p>\n<pre>&lt;img src=\"data:image\/jpg;base64,\/9j\/4AAQSkZ ... \"\/<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-67\" src=\"\/wp-content\/uploads\/2018\/03\/base64_image.png\" alt=\"\" width=\"462\" height=\"222\" srcset=\"\/wp-content\/uploads\/2018\/03\/base64_image.png 462w, \/wp-content\/uploads\/2018\/03\/base64_image-300x144.png 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<p>Es erfolgt zuerst die Information, dass wir Daten einbetten und um welches Bildformat es sich handelt (<code>data:image\/jpg;base64,<\/code>). Anschlie\u00dfend kommen die kodierten Bilddaten.<\/p>\n<p>Wer ein Bild konvertiert wird feststellen, dass die Menge an Daten recht hoch ist. Durch die Konvertierung steigt die Datenmenge, da Base64 alle bin\u00e4ren Daten in lesbare Zeichen konvertiert. Daher sollte man sich \u00fcberlegen, welche Bilder man auf diese Weise einbinden will.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ergebnis\"><\/span>Ergebnis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Und so sieht das Ganze dann aus:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAAABGdBTUEAAK\/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAABObSURBVHja7F0LVFVVGr5RQaOAsu4CBWOQJtFRmRjJxCwvRpgpQj4y0Fw+AZ0SESUfWYCaOvmipw98ZCYXH6ggUS1B79UaIJNloY0SicQECIuYgkix0fnu\/WFzOOe+uNwuF93fuot1OGe\/zt7f\/h\/7\/Puce27fvi3j4LA07HgXcHBicXBicXBicXBwYnFwYnFwYnFwcGJxcGJxcGJxcHBicXBicXBicXBwYnFwYnFwYnFwcGJxcGJx3GW4z4w8Z7\/65quzX5d8X1ZTXXul9AcHB4c+Hr08+vQKempEcPCTvE85gHtMj3kvL69MT88+npX7yy\/1+tJ4ePRK3pLg7e3Je5YT67YplNq5S5mdfcqUEj093Q8f2mZnx5UsV4X6cevWrd27D36w99CNG02mC7aLF4t9fQfY+J1nZeVWVF7Dgf8QX39\/3\/ZmP3eu6FxhkUZIu\/cKCQkynHhHSir+jg952t3drRNv1rw7tTyxGhuvL1u+Pi\/vXHsLra2ts0LTi4uvYMDq638VnY+KnGq0+yorq5NWJTf\/Eykzo7uRHYXgYMiQwUaJlZKiJAZ3FrGOZ+UUFl4w704tTKyqqppFcatKSq6228+0s\/PxecgqxCpVqwt0zk6j3YcBTng9trm7zQKyg9YmZo+MjCADtLPEM4Ql+gTM7mRVCMUXszChtLTcjBJHW8sxhJzw8fGGxAKTsj7ODRkXRJJDyiqoLToA452curPs0A7EDAg\/knymT2jNOBX6UnbkRQk4QOE6JxWEqFEJWlFxjchnhlQz2n6jMtXoLViGWGvXvWseq2C5P+jpjiZaZ3ZSF5Ct4+7hJu1WcG7T5pSGhlZ16ejY3d9\/8MYNK9kZpTKTVBVJso0bXm1Xz0JwhobNYVX06+edmBBLJWC0hJcgt4QMUyozNm\/ZSU0SthCy0CgPhJRaEv8GKeVmDo0LiouLZPMnet5yJlahtbdvWyfMO+3FhaxbWBtQQkJCbAeHRofv9vkXZ010AEVA4176x4x9+47I5S62YJ6r1PmwhKi\/MN5oHg7wr0iBUgJ0OkmOxKTkdtWC7FQCSZrvviuNnreC5AdG14D4cW8RTqIWkqVvIqtQF7EK2ak0CO8l8WtaF4Dc9c5wJydH1jy0AcesBCFTLUas9MOfmFEQyBSzYOaGjduhRm1kHWvz5hRiTGbGrtT9b586mRa3aC5jAAOGZP9Hb2EqIxkxo70VhYeHnsxNQ\/YNG16lqc\/IgXrPfnmcbCwRAhUBEE40IZGRWoi2YVCZ7jbqbKIuZEftyI4GUIEQURDVzfIvIRYN2LZ1rT5Dk47RM8iOH8SVZk6q8iyvCs9\/\/a0ZGnD2rBdI6UAL0MzrXEBm0LSD9mFMiogIg+aCZdZmgAMDSHOZ57LhZlEFqR5wRa0IwIwne8Vkhe6NjGywTZcWJHrR508FhYsu0UqK6UDPtMhRTSfUN\/xqeYnVXh8Q8\/WjfW\/n5n5BIn3ChGdsQVxVtvSsyNrDDGadaBGACsygaZf5\/4fCRJlnVa9w2DA\/sMSUzEMf\/Vts7Bya7tA4MM5693adOGGMLfQsCU5w\/XhWjtBkho5ApwvN2w4CqhPGHIkcCBtSggYsGwtCoRgGoQVVDj0uvB3cYKfzW8cjndraupcXvG5gBcvZ2Wl8SNDYsaOE3hNzMTZtXDly5DDrTEq2SimUH6AReVUYY3L30PXU79CPZELBqAIb4A+SjbI4LlKhCIADRVeRHndhWDMmJSVD5QnrRTnMPkP56Bw0gKoQO\/9atwsNgBVI7aczrEyUBuoz\/WigB+bNX8EsRdwju0FpFSKzElxEw3DLbJkXZ+Co7khRUp9ERIQaXSVpn8SCGa5Mfef8+W9P5Jy5efN38KymutbVTY7zUCsPONjX1f18SpV39qtv9n24hT0TLCkp69btgcbG6+v\/udXPbyDI98cru2ppl+HM5eIrIbIgsq7Q0WlpmSJ7HKY0jToNOf4iC4jFkuGgvr7BMLFojUNYLzO5ElqWGzDZGnQZK5S3suIay0VnLrdYZppbqzBuJEEsweoHHVGL8B7BG5paaIBOiw2JkQX3yK7C9NQuZZWyPqmsqLawxCKAIqtWJ0Mn\/nXAw46O3RoaGquu1YBSwjRLl86fPGlseXllauoxKND\/\/e\/WsuXrcT4sNHjlyhiZbYCW\/jByTo6apT\/hGqkFKQ5OoBZrPowTiS7U7u7RC\/do3hKrNVShECAWfL2amlp9OnHMGIWzs+O0qc+RJzh7TnxR0SUcvPvOalBNxnG3wnjYDLRh7skvsrJyoOykT5fnz58+e9aU1qWK899GRi0lX0yZ+i6UI+9iTizjuHGjadRTL4Bq7AzcwIxjO4XRV4uXrDl9WrO+MmVKSPySaN7Fdyfat47l4GA\/aJCP8ExVVQ3RiCF24Rzi2eHD2RBgvIs5sUyC3yMDRWeUaZnCfz093Wkp69atWzD\/heKNgxNLL+hhrRCFhRdEi15z54aTdQWHceu2fbyXObGMw9d3gDSe\/eChj4X\/yuUu01+cRMf79x\/796US3tGcWEbg6Ni9vyRcKTv7pGglcOrU51xd5c0KcdVbXCFyYpmjDeEtHj36mfAMVOHs2c3LEFCUe\/ce5n3NiWXMfvcbKD15OD0bwkl4BiY8C8zaveeAGeHzJmLoY+Pxs\/Lz\/KSkZKo3et7yDhZVWVltOMxG35MZE1Ff\/6v1gx0sI7GAioprn39+tk3RdnYxMbPoGKpwzRvviJjXpSF6VtgRgJosRFgnLXB18ZI1ZpeflZUzb\/4KFvpnu8RydnZ6+OG+0vMHD2WJzjwxYigTbxcvFsOQ\/yPuYdvWtfhZZ2sQQ2bGLp1xoeZJLMPiSmZWXGsrNbXmb3tD\/zqI+8zL5vfIQKlqKyg4X1paLopLjl04Z+asxXS8fcf+K6U\/dOv2p4f\/4uXi0mPQIB8y8A3OtlyVOg+zFrzxcHcTxeixTacE4QNgZFGmZeDASfsQU6XOl2kjPENCnhaFLiEZEuNkoGI4K41tLkUCqsXDvZePj7cou6iRtHlV1Ay1Op\/dAvwe4UYJUOp4Vg4dC0PdRbWLEuCOhM0w0ELtFqYc0oP4u0PWXILoYbmwk0UtZIVQB6Jk2kNmNFjyHvO+V\/jpZ+rXXtsoPT950tilS+eLTq549c0TJ87oLCcoaERSYpyDg71OFbAkfo1o4x66e\/u2ddTpGJXQsDnskmgPDAvGEkGhGMa26IhiqoQQBUgJnWKcp0gpfVWwbTYQNolJySJhA0MCDaCxF26hEYLdC2w4nc1jVRhuIRjTui+3Lc5+edyUFmoc\/GkxUnlJAWcGGHJvYmKiGcTq0cNpf6oOvXa1rPz5yePs7dsQBS04cvQTnQYWJFzVtZpRgcOll9avf1+tfVhEGwa9+j549ep\/fvrpv5eLr2BC0+yhOUok02z0E8xCD49emoCZlsC9mTMmo4QLFy6Xlf0YER4GKmMG0+4ruiqXuxS3dB\/GdWpEGKbp3g\/TqaMjwkMH+\/ZHLWhAXl7hpInPakooLGK0QCOH+PvW1tZpdwHlY1qjAQtiEjAkGOmJE58dHfwkNQCF3Ghqeny4P3JBPKBeKgSV0i3gN75F6qDrHOztqWEsAUgzevRINAC8SdmpNNBCd\/decnlPVIfztGObSoC86dv3QWQ02kJUceTop0gwY8ZkkqMYhaamm6ODRxre4WemKoQK8\/R0Ly+vFJ1vbLyOpoSHhwpPIuWECWMOHszSWVR29qnpL06UGm00ETW7mjzcYCVohLD\/YLW6AMPAQm+bI0VlOnYkowtwFYWQkKNxwgRFSk3glL8vqRiUn7r\/7eYsHm4kgUhaHNcm0O5D9CUzRaEISEvTRISCc0JdAAuP2rM4LhJCFANDWpgmOpqtie3U3gKqw0kUgpTEG\/yElYoADkHxUVdIE6QqMwy3EDXiLy7hrpFGVAL6wWgL2QY19Hm9D3S9W5TWsjRq0ZpJLOCRRwZKiUUm\/JQpIaLV+eioqSBQg569HypVvohYzD3GTUrlMDHDxHaKNju0urFac2q8wJ7AKApVG9WLNkv1XXFxm3BNYWMweNA+wjdKYDJIXwVgkbB0E1towN802kL8KLIe1GSzVyQ4LEwsSHudHizY9q+8c\/AHRY4kZOl77+3VWVTJ92I\/gE0ItotSCCcnx467LcQ22KRM9ogGg3ZiOWriTr1FeR0FTEUasv1FU0LIPCmzLRLFamILjcJACyksdnFcFO4LU1EbqqqRZ1Ib32LE0rma1Sy0Dn4sIpbGjwgPhTbUGYwqjR\/EXaF8TBGMWVSk5oUW6D6KMK6sqKa5zt53QNHZ+EuDSrG57GUEtMGQxoDmKAk8+IA0EWH\/RkSEapymtvNeM3M+zoU8gCRDenCdIoArKqtxRhuWXk0CI2nVFvhiUBMqjQOYT\/4p2yZEPhQ9B6MIZmQUqhJKplRmBAYOpwSoCFUQ45kpg5M4vqy9ijS4ariFUglUrLgiE7yAKeH1RUZbuGlzisb2KCyCYQo9ixpxBpKSbSywsFdIGDtupr6o5SPpO2BaSd1ynU7KoEE+H+zZJNV30fNW6NSecYvmoiP0uVTorFMn09ibEWhmZ2bsIutH6Hbp9HeYxwQWsn07IkAX4F70aXa2H8uAUyb0qnR6l8IXKMA7lqoqdALYbKCFZCRJ3WeGk7lpYEx8\/BsGWqivk9GfhiPrzfQKgbq6n5XKTH0vZLstuz3i8UclWX6BgwO3RUos6Ttq4C49M3okRhfzD24IyUjI\/Jkznp806VlSiBB1pCuFPzhEvr4D4BPhKgrBGbh42j0UjrT3BoUgDS5ROeh32vAET4f8LzJyUQKcL3uH+ykBMQbOFK4iu9brbC4NJ+FsEoMh\/JYve4n5dJji9Q0NdBVVDB7cH2cio9q8wQvJ0FSqGiXAlMY9RkW1GtooHwmoELTB17c\/qiDH0EAL2SIOuc+0ZYjaAC2WmLAIPYDEhluITmtqamI3SOs1qN2o8W6+xFq2fL2Bfa3duj3wSfY+Ycx7UdEl2F7RUdNUqjyI06qqGnYpZsGs6dMndvpTGrY1kiQWRyesvJ8+XWB4t7R23SEH7qFMGznzwd7DN2\/eBKs0zlfg8Mce+\/uePQf2px6jcJonnhjaaY\/8WgwOWBVkHmFGclp0HGZKLH2qVwgvrz4HD7wP\/oGFEyaMkRr7paXlMQsTXF3lu3dt6Kz7F5lZ0u3qHFaVWCUlZUbTQCsvXbZ+8qSxq1cv0ZmgvLwCClH6CMiaSNTuQ2duoI280uPuJZabm9zA294ZwsKC9W1bhcBb8eqbUIvShQlrgta+OQ8sDjNfYzT22VEdqRX68eUFr4GdCa8v5GPAidUKWOW9e7saTebYvbvUqF+77j14lD179nj3ndW28Io2DhsiloOD\/do3Xrn\/\/vZp0hMnzkRMffno0U\/9\/AbCYO\/E11Nz2KiNJdPuA9u0cWX8K2sNfLTi3ns1xK2trYPuy8g8UVx8xc7Obu7c8Mi5EfybKHy5wRBKS8uTViVfvFisT2OCTGyjPRRfWGhwbOycO7tP2UNMqY\/JnmA2+6HGnFD2SFuUkkJPbdmN7SixCCpV3uH07IKC8zqvDhrkM+wxP7nc5fSZgqqqmoMH3u+K4kqlzpfupdH5IR327E+6gi966md4iV\/4uFOUkp570lPRO00VChEYOBy\/urqfL10qAXXKyn5s\/O36Q96erq7yIUMGu7j0oGR5eYVeXg9CLXbFzxrqfOeiTPuZGuFb+Ylt+kI\/IsLDSG6Z8q0UFgulUyjKWl4QfydLLBOBGb9160eNv\/0mGokuATSeYkgoNlXW8hQIo8siSE0HBbPrk1jaUJ9rtMCmM+Wop8KJVTb7WPM+a1aGnurp4nzz95tFRZds\/7tz0saDPUQsFuPruDklLS1TmZZBxBK9TNYMwjH60r\/0On9djfFGGlterLG2rRMdNQ3doS\/+vUuANhZr9o0pMyiGlq3dN7R8tcBsoRg9b4VQS+rbRMTodQcuN5iH3r1dvf7c5+K3xTDFTFlitUF8910pewk2ubpkOcm0mzsUigCSOmZsMU3Uvv+4Xz\/vqRGacE21Ol\/0hSmhGVcou2DLvdQJ3tm0ac+59OyRnp59Zywu0NvS2b\/a3US+ZsRHQNQRF6OiNO+pRwn4G6VnszV9mMQ6nynoMsRydnaCgXWltLyx8XpXZBI8PpjM+GVm7KKvPoEQHX\/rRkXLi92F4er6TDRSvorAAE6sNggJeVoud8lq2V3eRaENRA6D5pK1vGGhg85Bs10l2PvEQnrE6zuKADDb6Kcr7pblBiE+\/+Ks6lSe7XxnwCgw3jtSUkXbrdinHGjrQVJSMm1XpPO0rQo\/eJG4qvnSzo5USkAWOi13QaNB\/YGmbL88MgYGBqhU+cxQUyiGUSFMbx7PyunEr5fbnPHO8MSIoej9goLzXeU7A8QqMqpEy5tQiBhyCC2RE8doQVFfmrd3tE1A5cAMh1Kj7+dc1u5Olm7TVasLhKFjqcqMtLRMFGizK4KdJrFk2hDTU6q8mTMmdwlisSeAUhXGTHX2bWZ9afSZYkJbSvjsCMqOFSiqSKV9Q8Qd\/qzQbJw4ccbPb6DRlxlxdDl08sPg4OAnr7ZsWOPgxLIk+nr14cNw56GTVSEHl1gcHJxYHJxYHJxYHBycWBycWBycWBwcnFgcnFgcnFgcHJxYHJxYHJxYHBycWBycWBycWBwcnFgcnFgcdwb+L8AAoYSCifmCjcUAAAAASUVORK5CYII=\"\/><\/p>","protected":false},"excerpt":{"rendered":"<p>Neben der normalen Verlinkung von Bildern in HTML als externe Datei, lassen sich Bilder auch komplett in die HTML-Datei einbinden.<\/p>\n","protected":false},"author":1,"featured_media":58,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[16,4],"class_list":["post-66","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-base64","tag-html"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/66","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=66"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/58"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}