{"id":16838,"date":"2019-12-23T04:22:23","date_gmt":"2019-12-23T04:22:23","guid":{"rendered":"https:\/\/kiencang.net\/?p=14128"},"modified":"2022-08-16T22:49:06","modified_gmt":"2022-08-16T15:49:06","slug":"base64-svg-trong-wordpress","status":"publish","type":"post","link":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/","title":{"rendered":"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress"},"content":{"rendered":"\n<p>M\u1ed9t trong c\u00e1c m\u1ee5c ti\u00eau ch\u00ednh c\u1ee7a t\u00f4i trong vi\u1ec7c <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website<\/a> l\u00e0 c\u1ea3i thi\u1ec7n <a href=\"https:\/\/kiencang.net\/first-contentful-paint-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>First Contentful Paint<\/strong><\/a> v\u00e0 <strong>First Meaningful Paint<\/strong>, l\u00e0m cho <a href=\"https:\/\/kiencang.net\/uu-tien-noi-dung-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> hi\u1ec3n th\u1ecb nhanh nh\u1ea5t c\u00f3 th\u1ec3.<\/p>\n\n\n\n<p>L\u00fd t\u01b0\u1edfng nh\u1ea5t, tr\u00ecnh duy\u1ec7t n\u00ean c\u00f3 kh\u1ea3 n\u0103ng render v\u00e0 style n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (above fold content) v\u1edbi s\u1ed1 l\u01b0\u1ee3ng \u00edt nh\u1ea5t c\u00e1c y\u00eau c\u1ea7u HTTP. T\u1ea1o <a href=\"https:\/\/kiencang.net\/critical-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">critical CSS<\/a>, c\u1ed9ng v\u1edbi <a href=\"https:\/\/kiencang.net\/plugin-async-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ec ho\u00e3n t\u1ea3i JavaScript<\/a> v\u00e0 CSS r\u1ea5t c\u00f3 \u00edch trong chuy\u1ec7n n\u00e0y.<\/p>\n\n\n\n<p>M\u1ed9t trong c\u00e1c k\u1ef9 thu\u1eadt t\u01b0\u01a1ng t\u1ef1 m\u00e0 t\u00f4i d\u00f9ng \u0111\u1ec3 c\u1ea3i thi\u1ec7n First Meaningful Paint l\u00e0 inline (n\u1ed9i tuy\u1ebfn) \u1ea3nh base64 v\u00e0 SVG.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/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\" role=\"button\"><label for=\"item-6577d72a91438\" ><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><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d72a91438\"  type=\"checkbox\" id=\"item-6577d72a91438\"><\/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:\/\/kiencang.net\/base64-svg-trong-wordpress\/#1_Anh_Base64_la_gi\" title=\"#1. \u1ea2nh Base64 l\u00e0 g\u00ec?\">#1. \u1ea2nh Base64 l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#2_Vay_anh_SVG_la_gi\" title=\"#2. V\u1eady \u1ea3nh SVG l\u00e0 g\u00ec?\">#2. V\u1eady \u1ea3nh SVG l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#3_Inline_anh_co_kha_nang_gay_ra_van_de_gi\" title=\"#3. Inline \u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng g\u00e2y ra v\u1ea5n \u0111\u1ec1 g\u00ec?\">#3. Inline \u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng g\u00e2y ra v\u1ea5n \u0111\u1ec1 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#4_Khi_nao_ban_nen_noi_tuyen_anh\" title=\"#4. Khi n\u00e0o b\u1ea1n n\u00ean n\u1ed9i tuy\u1ebfn \u1ea3nh?\">#4. Khi n\u00e0o b\u1ea1n n\u00ean n\u1ed9i tuy\u1ebfn \u1ea3nh?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#5_Noi_tuyen_anh_trong_WordPress\" title=\"#5. N\u1ed9i tuy\u1ebfn \u1ea3nh trong WordPress\">#5. N\u1ed9i tuy\u1ebfn \u1ea3nh trong WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#6_Ket_luan\" title=\"#6. K\u1ebft lu\u1eadn\">#6. K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Anh_Base64_la_gi\"><\/span>#1. \u1ea2nh Base64 l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Base64 l\u00e0 ki\u1ec3u m\u00e3 h\u00f3a nh\u1ecb-ph\u00e2n-th\u00e0nh-v\u0103n-b\u1ea3n (binary-to-text). N\u00f3i c\u00e1ch kh\u00e1c, b\u1ea5t c\u1ee9 d\u1eef li\u1ec7u n\u00e0o c\u0169ng bi\u1ec3u di\u1ec5n \u0111\u01b0\u1ee3c d\u01b0\u1edbi d\u1ea1ng v\u0103n b\u1ea3n. Trong tr\u01b0\u1eddng h\u1ee3p c\u1ee7a ch\u00fang ta, \u1ea3nh \u0111\u01b0\u1ee3c bi\u1ec3u hi\u1ec7n d\u01b0\u1edbi d\u1ea1ng v\u0103n b\u1ea3n. B\u1ea5t k\u1ef3 \u1ea3nh n\u00e0o c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh d\u1ea1ng base64.<\/p>\n\n\n\n<p>M\u1ed9t \u1ea3nh th\u00f4ng th\u01b0\u1eddng trong HTML c\u00f3 d\u1ea1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"https:\/\/ten-mien-cua-ban.com\/logo.png\"\/&gt;<\/code><\/pre>\n\n\n\n<p>M\u1ed9t <a href=\"https:\/\/kiencang.net\/hinh-anh-ma-hoa-base64\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea3nh base64<\/a> trong HTML (\u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"data:image\/png;base64,...&#91;n\u1ed9i dung]...\"\/&gt;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/www.base64-image.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">base64-image.de<\/a> l\u00e0 c\u00f4ng c\u1ee5 r\u1ea5t hay \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i \u1ea3nh sang \u0111\u1ecbnh d\u1ea1ng base64.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 th\u1ef1c t\u1ebf, chuy\u1ec3n logo trang Ki\u1ebfn c\u00e0ng sang d\u1ea1ng base64:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAToAAABmCAIAAADUG8ozAAAb4UlEQVR42u2dB1wT2fbHfe\/t2923\/117L6uuCqgISJUuCCpIR0EUFKzYUFHUXRtixV5ARLCADUURK4oiIoINUWkiUqQqSA0dEud\/ksFhTCAJoBjw\/D7z8RMzd+4kw\/3m3Hvuued2IFAoVBtRB3wEKBTiikKhEFcUCnFFtaY+0YRPA4W4irRYLGbkhePZacm1NbUsjpjMWmZtDesTCx8OCnEVLTFZtSX5H8KvXzrvvotRVMhksaoqK+76ehTl5+HDQSGuotgfBnsa8\/yph+um5IQYeF1VVbnb0b68vAyMLT4fFOIqWriy+8AsZlZ6mvc+16fh96urKqurqg5uXF1eVorDWhTiKqLclhQX+rjviQy5VViQX1SYf8nHi1FchDYWhbiKJrGs2tqa4Mt+YTevJcXF5GSmP48IqywvRxuLQlxFVEwmMyPp9Z1A\/6iwOymvYzKSk2qqqxBXFOIqor1iUFVl+cvIsNSXT55ev5CXlV5bU81CG4tCXEUWWhi1FuXmxITdfvHgTsGHHPBHIa4oxFV0ia2sLE+Ni0548iD1dWw5owRxRSGuoosrxE6kJMQ8unXldVQkxDshrijEVXRxhVHrk+Br4TcC4p49qqmtra6uBtcxdJKRW8QVJVqsgrKSEy8e2BIb+SAlLuZ5eNidwIDwkDvJbxJLGQyc3UFcUaKiWhazqrIyNuSm9yLrAzPMtxqNXWcyfu1UUydz48U20wL8\/MpLSxFXxBX1nQU9XTiy374JP+3tNc9yv5Gqu5nmSg1JI3lJHYXRC1QUt1lP3rvS4dXjCMQVcUV9Z0H88IvQkIsbnbbpqx+ZonNs6gQXY20tWcmh\/fpoDezpKC\/moa90bLZZkO9xcD7h40JcUd9tvApr6CDE39Nx4RZLw23TzM4tnOE703S3ifYSVck50oM2yvY+oNjzoHKPo4ayId5uVexoJ\/A7sVcIcNxPaGwRV1SrdYNZrPysjLCDOzwNpVcba2+3mXzITNNzouQhjQG7FHu4ynffr9jpoEr3f2S7H5og9viCN3iJyxnFaY\/D30eD3xgWtdfiM0RcUa2k2pqaEPe9e0201qtL2GkqzJuos1BdZqv2yO3qg7eoDHBW7LtKuvMs8c4OY2XuHdvDKM6Pux1w2s7k7DzrOyvnRbvY5yYlsDi2ltfMcrzIcI7J\/MQsKyrIeZdcU1MFwclokBFXVDMF3WDfzeu2WBq7zre1NzNaYjR+8dTJ9lOnzDE3mTFp4j9TJm4219g9c+JxC7EbU3sF2wy8YPSrl04nD93hxw2VI9Y7XJxjFbHDqba2tjFcwRpHXDm730pttYVOXPRTnApCXFEtGruCgSWNHlBXxmCkxL98EnQpzN\/ngb\/PAWsdF12xBcoD1ltoe+oN8VL57YTqH\/5GPT1M\/tpiOdZ9knzwgsnB6xYn+R\/nStcGoEKdedlZvgd2LNRT3mymtGaK5lJbi5Q3CZAX6hMGXSCuqJZAS4qc0YH+LWSEeXY\/aKu19mpz9RVWpsajB64w1\/KfoXher1+gWY\/1+hJ\/GyrYakkFzhgXaDnw0e41lWWlJPN19bCYJUUFXjs22oyVWWioFhLot3uD06JpxstsJifHv2SxsEuMuKK+FrQsVl5O1t7VC1aZqTuYaUVFPLTRG6s3asB6c9X7S7VC7Ucv1RFfbKRppa200VTp4dxBV+bpvrp0Ii3qcUVpCYvNO3ibmTdOe1oqi1lpSJ3zOlRaUuLjtn\/2ROUZk8buX+eAi2kRV9RXIxZ8QiGB5x0MlByNlF0W2wK+1wPOT9NVNZIbssFY8YStyhxN8cWGahY6yhZy\/S8a9vbU6HfBZHiAo11WQgyLY2PjoiLnaUsbSPdfam1yI+DC7RvX9rpssDfTXWxh4Gill5eTibmOEVfUV8AVplOTEl5tmmcxR\/Wvhbqy929cBntZUVF+L+jqqtlTLcaILZ0kP11t2E79YVYT1CcO63R4TCcPlc5ndLoeMxydEBIEawIqKyqcbXTMRw8ykBk0w2j88oXz59pMXzDT2trMEHrUqwwVr55wy0hPxxEs4opqKa6MkkK\/wztnKQ9eNkHawUAtJyMNcGWxQymqUt8kHN3pMne8kqXSYM9x3WYajTOW+M1bDXDteErrd3fN\/lH+PpC1+PhGB0vZ\/voj+xgpjTDU1ZpibDDN3MTW0tzaYrKLkYy7qZT34ikb1jgFB90sx6RQiCuq2YKu7KvIe44TZJaPG7FKX27fyvklhQVUxxXy\/efn5R5c52ClNMh\/9zqnmZOnS3Y6rd31iFrns+O7eah3u7RiZtBJ97lqw8YP72miMMJ4rMoUI4PxamPGjZHTU1eaoKnmpDvKd4rCSVvDNcuXOC5ZeNbXpyA\/H3FFXFFNZ5XFzM3KWDBBzkF9qOtss402+jGPH1BJTEkXVE1N9amdTnaa4jHPIpNePlmrJ3nTWum01u\/+hn29NLvtVuxsJ9Vdf0QfA2UZbYn+mjIjFcT\/kurfXXJgL3mxP2Ul\/hqvILlNX3mbzui9m523b3ZZvsje75RPKQMX+iCuqCYK5l0Top\/aqg3z3b0pOiI0PCgQcg7TplLZqihlnHJZskx3ZGbya2ZNzakFNn6Gksd1hx5SHeSpPWT1mL6ztKSt9bXUBvWU7PjTkE4\/i3X\/dUS\/riMG9BLv03VYz9+lBvWcPmbkBgMF5zlW2zZt3O7ivGjOrJDg4JrqauwVI66oJggsZ\/TDUJ99W6qrqxJfRkVHhJWXldFxBeualRTvtsjca\/Wswtz3MKQFx1JW4uvspMQzKxdvHCu1wljryA7nAyuXKvfrLN71t6Hd\/0+id0ex3l0k+nQZ0qPT8D6dh\/fpItG3i8LgXraaUvZTTZfMnT3Pdqa97Yyop08wPhFxRTUF1+qqxyFBp912ApYf3+fc8j\/9PvMdHVcg6tHtwM22Ri8fhjI5gYd1+3cwmdkpyTe8jwTudC7IzqisrNRTH6OpIDdafIhEvx5Dencb+WePYX26AatDe3Qa2rPjkJ6dNSX6W6lLT5k4bvpk02UL5zssnJeX+x5xRVxRwgqmYMKuB5z12AMAljGKg84ez0x9S8e16GPuOTfXC+6uZcWFn3j0eftJmAlimhpMNDUA75K8zPBhUuJ\/qYwSlxUbNHxgn2H9eg3t021gjy4S\/bsbKYhPGzdGV1nBwsRwlrXV+bOnEVfEFSWsYA7m5kl3MLDAG8QnRV6\/mPvZun5ir6ypgRz\/nlvXpiQm8OGKhPaoh7up\/gSDcWPBLaynomCoqqA+WlJmhJi0xLARQwdLDBogNrCvgsRgS1VJcxUpTcXRU81NXDasw715EFeUsKosLw3Ytqy44CPgChmGn94NysvJJskEkN5nph3dtOqyj1dNTQ0fXElLW1CQv2\/njqmTxs\/SVbbQUDAbqzxORUFFfrSSrLSCzCi5USPkpUaMHimuNHzwDFUJSw05fR2tNSscq6qq8K+AuKKEEqPw47E5hpw0EazcrPTM5DeQaY0djs9OuVYRGnju6CanwrxcYVy44IXKz\/94+9qVWZONtZXkNJXk9FTkdZRlNZUV1ZQVVRXlVRRkZUeNHCUxTENafL6GuJ3xhPmz7UpKirE\/jLiihFLBh\/cH7IxYnPXmUXeuJj6LIGMS4cjPyXJ3tIt7Es6HVd5BLFjLF9HPHRbM15CXVpEeqTp6lJnKaHPlUcbKcrqqiuCKkpORkpcZZa6lskp7pJP9nLJSButLcQ2P8W+EuLZtfWqieBngrJtjs\/H6xdO4yPu1zJqy0uJnd26mxsewV9LVVqefd\/VzMDvv+g+TIxJFUO1nQfeYekFXNUclJSUR4WFL5s+ZP0nDeIy0gqT4GKmRarJS2grSukqjgVt1JQWHCSpnNyytrKhk1wLp2z7fiFdIL+LatkFlCRLzs2q\/FJ2sqqrKE1vWFBcWMwrzUsOD3kZFFhUVMRiMEkZx1rt0F0u9nIz0wsLC4uJiwA\/eL+WIwRG8KOOI\/iYUgxrgkgIYyObn5+bmpaWlXr7kP8PSXH+c5nhN1UlaasZaKhM0VIz0dJfNn31n6+IHZ73LGCVVHJGokx+OjTANYP6\/R9gwEFdRFC+T5L9cNEKjJwGo5KicIxItEqqS4uLCwvzXj8OPOq\/48D4nPS0tMT4uNjYmLi4uISEhLjbmlOtmjzWL49n\/S4iPj4\/hKDY29tWrV+SLeI7g9YsXL549e\/bo0aMHDx7cvXv35s2bV65cCQgI8Pf39zvnd\/LkSR+fk76+vofd3XZs27Jjs\/OqpYvmzpi2eeO6yMiHaW\/f+q6xjwq+WlxQAGYWRH5sXlzp0KLJRVzbKq68fVQ6sSSuFbAWrrycZBVMZUFhwYe0pJSHt+4d2ZWc\/DY5ORmYjI6OBuQi2YrwO7x\/51yrkJtXH3B0\/\/79e\/fu3eHo9u3b8Do0NBT+DQ4OvnHjBpB59uzZY8eOubtDvra9W7dudXZ2Xr9+\/dq1a\/\/+++9Vq1Y5OTmtXLlyxYoVjo6O8OKff\/7Ztm2bp+cRuPZFdHTMw5CAPc6Rl8\/lZmaQuJIGlsKVEkUp4oq4tm1cGySWGkmS3JLQcmws4+O7tykhF3PSknPz8j58+JCTk5OVmZmRkZGc8Orl1dO+TrNiw25ncgRvpnMEL7I4ys7OhvLZNMGbVMl3796lQQ84NTX5s1I5gvehABSG2338+BE6zGDjy8rLKsrLMhNjgw9ve3DUNTv2GSSUgdyotV9Sirgirm147MrbH6Z3jHnF1U8mAS4rLQF0AeAKUuXl+TmZUdfPP9jn9OC8Nww+yfEqJWqwCmVJo13VkCq\/FFWYvAn14vM92T8fRcXFiVGRob5uj8955qa8rqmtbsTlxOINqEJcEdc24xPmbc3Cu6B4ka4qL8vPSv\/4LrGkMJ\/qkdJtNYk9swVqwO9F\/naUlUGoRkFORgWjGEoJ9C1xebyxYSCubQDXxoJ4G\/PKCEKZAzOLSUZNfEfxcf+iZxhxbT\/c8m\/x31TC3JRPLASyh7j+uGa2bYn6RviXRVx\/CHR5Saa\/I\/xVjfU8uapqKo1N\/RYoxLW9KymcuLW77ijKaQn\/QiLEh0nED3FFNa7qCuLodOKAIfu4tQefBwpxFWE9PFnH6sW\/CWab34IVAqTMPwuioPDPi7iKgGoqiIxXBONjEy65e5DwW1F3JIbWvZnzmjhozGY1YC3bzLZ9PX\/+\/JdffunA0X\/+85\/ExERsLIhr05UQQjwPYB8wUBRSKY\/rLoEjJ+GL7uuJOWzG3EyJzBjhWnFAnQklD\/fJRH4a+\/2Tc9n\/DdrVDuwqJYhD7vBZ+vr6yA\/i2nSdWVKHCtgxYfQmrJ4uP0e2OaVjTJ26vVdwVWlRdSYUjmN2dS8A+IoSoryIKC8E\/047azGwSIAiNjAwEBFCXL8lrunRxCGTuvKnFhKVDG6rS+EavE9AVXkpxGELdkmoMD6YqK0irm2pu\/bCKoJZ014bzYIFC0hc+\/btC4tpkSLE9dvg+uENu7NKFj4+iyjN5xm4VhIn53E6w2ZEdhy\/qko+EF427JJHrYms2Lo3P7GICJ+6+m\/sYP+3PQpmg+bOnUsSO336dKQIcf0GuBZmEp7T6koCY0XZDRcDIwn48ZL8ZYslfBfU3ZHd4+Ux4Ec5JEeeaq\/tBohdvXo1SSysrUWQENevimvpR+L457GlhwW7H9tCAfyFWY3az+oydgEBzLd5wdLZ169fw1pZBAlx\/Xq4wgAVhqlkGTfz+r4rCoW4ihau0Lk9v7KuAHhxU59+\/Q9QVUoUpLMnWouyvvAzN08wfoZ6YHrpYxpRUfTtHht7T53s7JcvXz58+BASPjXJaQSL2iFPBVwF1jU3N7eFnwSW8kJqC8h0A1O78KJ5kZKQQwdSVUVERERFRUGWDMS1DeLKYhKBzvXO3tf3BIFXRpxaVHeAl1hAKysnnpyrvzv1i+C\/moi9JcDPlP6i7i5RFz\/TU0O8uk5ccPqiNrZLbDYR5k0wcr\/iA7t06RJEJnXq1KnDlxowYIC1tfXly5eB5AahCgoKmj9\/vqSkJIRJ0C\/s2bOnpaVlWFgYn5vCz8FIjiZPnky9CVNBJiYmVPQFqa5du0JtQK8w3yUvL2\/Tpk0jRoz417\/+Ra+ke\/fuIxuSoaEh4iqauH5iR+pS7f7FVcFVwXwpVT7+Lt9xW2SdP6mx4\/QifjH9bx\/WFbu8nv3fD0l1vqvGDnBoJ4a1\/FFBXkUFBYUOfNWjRw9IK8F14a5du\/r06dNBkGCOp7EtdmCIS5b53\/\/+x9495P37SZMm8a8Nkr\/xt7SQ4RHY7tAUiYuLI64iiSsYJaq5PzojVFVC4hp\/hzhgVF8SHM4B64jrW9nTrRAORb0P\/mfoJPPHFWaD8t+xvV+UcT7jQASsJy5vYNteLrud8bIlzyk8PLxz5870tvvrr78OHDhw+PDhXbp0od5cvHgx77XGxsZcdnjcuHFmZmY6Ojpgx+inIOUif1xBkFdVSkqK+q+YmNjYsWMhTEpRUZHL0m7cuLGxrwOm\/qeffqJ+AmbPng05Wa9duwaeasj2CHPCVCV\/\/PGHuro6dBwg5+O5c+cQV9HD9dmF+oYe6iFsVcLgmh1fz6r3TOJtxBf9Xhi7wvwNVQkgx6zmhyubapu6quJucw99waENYYxUSV\/7ZodJwTCVboi0tbUh6SkkZqIKwKDxyJEjYPGAJd7LIVkxXAU4HTp0CNIsco2Bjx8\/DsBQ5DQ4mqXj2qtXL\/LHAnKpgpmlF4McUVu2bKE62wBkgwNRyAJHWfthw4alpKTwFoBfE7IA\/EhBtkccu4oqrnHB9U381q4mNHGBuAJ7ZDAwe1Rpx8apQb28Vl\/PM38BuMLhM48oK2j0U13fVl9SyEhmHunp6Qk0gHwE3dcnT57wKeDl5UXVD6\/540qyCgmTG6vt4MGD\/A0s\/XbgoGqwEsjqSCG9Zs0axFUkcQUXERXHCyvXWE2JsBeIK\/2HgP+EEEQjUxaY9zNw4UpfZsCrgoz6kk\/8mvGEwP1LNW5w7XyLPwIYasp6Q79UIK78l+DB4JnqzUKvm7fAlClTyLNKSkp86oHRL1lsyJAhiKvo4QoIQfwgvZ8JofZfEddzy+t\/CPgLnMN8aKTjCmALFDBf11nY3YwnZG9vT3Hy9u3bb\/R3GD9+PHkLAwMD\/rjCAFXgvBGEN5KF+\/Xrx3tWRkaGcm7xqQT2FqFuCt1sxFWUcIWlMB6W3D5VcNt8rc4w\/eyrGwKqyk+n9Ycv8sNVGIMJTiyy8BXnZjyhoUOHkk1WWVn52\/0dbGxsyLuAX4c\/rg0aTC7BsJYs\/Ntvv\/GeHTRoEHkWYiH5VAKTUtRNYaMDxFWUcKWOu4cIH3saLRe+Dq6pT+rP5gqyUTArSxUOceeHq8AJXna72yCsVef93cjPp5os7I7z7f4O0Acm76Kqqsof1+XLlwusbfv27VR53rMw90uegsUG\/Dol3t5UJe1gV\/j2iOsTjqce1ohDvCE1BcJ\/cCgkrhDSQF8NCxDyO9zqC8PqHD645iZ\/U1wfP35MNVkfH5+WP2\/wIV+\/fv3w4cObN28G8KCnPXPmTAhsoCyeQFz37NnTQlynTZtGTQLxmZu1s7Mji0EcBY5dRQxXwBLWnda7hW7TYoPs2KGCLcQ14iS\/SAY+xxUXfrgWZX1TXGF+kmr3sMdcsx8zxCrOmTMHApgEhiIIxNXT07OFuNJ7uSdOnGiwhqSkJGp6ycXFBXEVPVcTl+hRTbB2vIW43jvcXFw38cO15MM3xdXPz49q2bDTZDMeMEyNTpw4sUEyIQIBJktgbAxhD1QMhkBcGwNMeFzBolLhWT\/\/\/PPOnTth2oZeAPbO\/PPPP8kC8KId+Jl+AFwhXN7XvglxiPxxDTtafzY7gXifKOxRmPUdcaUbItgMtqmXw8aTEMNE1QB+WtgSFqImoEvMFatIRT61Aq4EZ\/le7969qTLgkYL7wmfQ1dWlhzRBdwBC\/4l2oR9gRQ6E+Ll\/HsQeMhUwUOSP6+Nz9WebND\/Eq1bEFSwq1XbPnz\/f1MshzJC6HNywEOjfWMlWxpUcRdM\/HpcgNApG1O0jnumHwZUgQ3w\/swG5Xfik\nEeWPKz1GIju+reAKGUapFtzUIRwsCaCutbCw4F9YS0urlXEF8w7zPeRaHAirNDU1hdhjiKOcNWuWh4dH+1tG98NkkwBH7hdhic3ClR5d9PR8W8EVhnnUqBKacpOudXNzE37cS83utg6u8L2mTp0KZwFXcFMTP4B+GFxhkTqVUIKNYnBzcAV5zai30i3JnNaKuIJgsQvllSksLBT+QipWAcQV2c8lWK0uvGf4q+BKjcnBqBI\/hn6k1Gqwlo0axMKLBpe2CcSVPnyNudlWcIUha\/MiJWBmlbqQf9r+JUuWtDKusFCePAslEdd2hyso4e4Xy8drq5uMK6R9ouIcIQwDkh4KVINZ\/FsXVxjjUbMa\/\/3vfyHIQcgLYe0oxQzskdNYMVgm\/u9\/\/7uVcYVJYOp2kIwGcW13uILu7KfFBro1GVcu0iAwAxbBN7j2Dd6EXDMw2XvV5bvjyv7ed+5Q6VEgwh4SpjAYDK4ykEjl1KlTjo6O9Heg\/0xe1bFjR5jM5LqktLQUqiKXp3br1u27dIbJDBgwLIeg5ZmfZWtrC9H\/sB799OnTMBeFuLZNXNmDWFqWBq5tdYTMJgF+Ju5UL0vY2SSC9xM3XYlLa+sX0LDTu2wQBVxBsGaNPs8BHGpoaFhZWUErh8EtOIpInqWlpelXLVu2jH4VXAKBhxCWAMNamLmhEj7BWnCqy91qnmF6D5yPwPIbGRnxLmFHXEUeV4Lj4KVy+UPWleL3TcaV4Gy0c2SqUCFNgc4igivBWdUN4QT8GzcXrjDRSq2Ma0yQVwXWu1LeptbBNTU1FRad09PW8BeUfPHiBeLa1nAFQTeVouWcY\/3wUnhcCU7u78dnCJ\/5DVMKSZvAzII7qrpMdHAFwToyMEoN5kmDPi2Q5u\/Pnf4CUkns27evf\/\/+XOXBGkM6GAhypEqSYUatgCskiIFBOHlWTk4O8ks5OztvpgkyZixduhSMKj3lDWRCbDDJI+L6I4mRR7x7zv4JADgBckiSCLsE1FaL+KeOjY29evUqpFmCgPszZ85ABD+k6uVTHqCNiYmBHi+UhwEhxDNypVlqNQGKVIBhaGgo\/8LghaKcUqCQkBDEFYVqJcF8EuWF5p\/ZmE7s77\/\/3g5mfRBXVBvThg0bSPBGjRol\/FVUshjIaYq4olCtJDLwEETfDUCgIJ0yedXu3bsRVxSqlQRzqiR44K8W8hLYNaclSwgRVxSqmYIpXyrYAxbQCSwPOcoh8wt5CfjD0TOMQrWeYFkctTEHbHjz9GmjWwqCh+nYsWP0peoBAQFt+rsjrqi2J9j4gz79Kysr6+DgACHNMMMEK\/5cXV0XLVoEuVGpRE1kYBNMHbf1L464otqkYLqYa3suPoJM\/81LUoW4olBfRwUFBbCNpYqKCt2KUoKJVnl5eZi2gQ2a281XRlxRbV4QbgXxw7CxFeyRBftuQcIa2G6vXX5TxBWFQlxRKBTiikIhrigUStT1\/9XcvLHoSUIsAAAAAElFTkSuQmCC\" alt=\"logo trang Ki\u1ebfn c\u00e0ng\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Vay_anh_SVG_la_gi\"><\/span>#2. V\u1eady \u1ea3nh SVG l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>SVG (vi\u1ebft t\u1eaft t\u1eeb c\u1ee5m ti\u1ebfng Anh: Scalable Vector Graphics \/ \u0110\u1ed3 h\u1ecda Vector c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng) l\u00e0 \u1ea3nh v\u1edbi ki\u1ec3u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a d\u01b0\u1edbi d\u1ea1ng XML. \u0110\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh l\u00fd t\u01b0\u1edfng v\u1edbi \u1ea3nh vector. Th\u01b0\u1eddng th\u00ec \u1ea3nh logo, icon hay c\u00f3 d\u1ea1ng vector.<\/p>\n\n\n\n<p>C\u00e1c \u0111o\u1ea1n m\u00e3 trong SVG \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 v\u1ebd c\u00e1c \u0111\u01b0\u1eddng th\u1eb3ng, \u0111\u01b0\u1eddng vi\u1ec1n, \u0111\u01b0\u1eddng cong, v\u00e2n v\u00e2n. Do v\u1eady, <a href=\"https:\/\/kiencang.net\/gif-png-jpg-hoac-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">k\u00edch c\u1ee1 c\u1ee7a SVG th\u01b0\u1eddng nh\u1ecf h\u01a1n nhi\u1ec1u so v\u1edbi JPG\/PNG\/GIF<\/a>.<\/p>\n\n\n\n<p>M\u1ed9t \u1ea3nh SVG trong HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"logo.svg\"\/&gt;<\/code><\/pre>\n\n\n\n<p>M\u1ed9t \u1ea3nh SVG \u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn trong HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;...&#91;n\u1ed9i dung]...&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Inline_anh_co_kha_nang_gay_ra_van_de_gi\"><\/span>#3. Inline \u1ea3nh c\u00f3 kh\u1ea3 n\u0103ng g\u00e2y ra v\u1ea5n \u0111\u1ec1 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1ea1n c\u1ea7n c\u1ea9n tr\u1ecdng khi l\u1ef1a ch\u1ecdn \u1ea3nh \u0111\u01b0a v\u00e0o trang d\u01b0\u1edbi d\u1ea1ng n\u1ed9i tuy\u1ebfn (inlined).<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 v\u1ea5n \u0111\u1ec1 v\u1edbi \u1ea3nh n\u1ed9i tuy\u1ebfn:<\/p>\n\n\n\n<ul><li>Chuy\u1ec3n \u1ea3nh sang d\u1ea1ng base64 l\u00e0m \u1ea3nh gia t\u0103ng k\u00edch c\u1ee1 l\u00ean kho\u1ea3ng 30%;<\/li><li>L\u00e0m t\u0103ng k\u00edch c\u1ee1 trang HTML (k\u00edch c\u1ee1 qu\u00e1 l\u1edbn s\u1ebd \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn <a href=\"https:\/\/kiencang.net\/giam-ttfb-trong-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">TTFB<\/a>);<\/li><li>\u1ea2nh kh\u00f4ng th\u1ec3 ph\u00e2n ph\u1ed1i qua <a href=\"https:\/\/kiencang.net\/cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">CDN<\/a>.<\/li><\/ul>\n\n\n\n<p>M\u1eb7c d\u00f9 c\u00f3 nh\u1eefng nh\u01b0\u1ee3c \u0111i\u1ec3m nh\u01b0 v\u1eady, trong m\u1ed9t s\u1ed1 t\u00ecnh hu\u1ed1ng, n\u1ed9i tuy\u1ebfn \u1ea3nh l\u00e0 \u0111i\u1ec1u b\u1ea1n n\u00ean c\u00e2n nh\u1eafc ti\u1ebfn h\u00e0nh.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Khi_nao_ban_nen_noi_tuyen_anh\"><\/span>#4. Khi n\u00e0o b\u1ea1n n\u00ean n\u1ed9i tuy\u1ebfn \u1ea3nh?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u00ecnh b\u00ean d\u01b0\u1edbi cho th\u1ea5y c\u00e1c v\u1ecb tr\u00ed m\u00e0 t\u00f4i th\u1ef1c hi\u1ec7n n\u1ed9i tuy\u1ebfn \u1ea3nh:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/inlined-images-screenshot.png\" alt=\"c\u00e1c v\u1ecb tr\u00ed \u0111\u01b0\u1ee3c n\u1ed9i tuy\u1ebfn \u1ea3nh tr\u00ean trang c\u1ee7a t\u00e1c gi\u1ea3\" class=\"wp-image-14129\"\/><\/figure><\/div>\n\n\n<p>C\u00f3 ba \u1ea3nh \u0111\u01b0\u1ee3c t\u00f4i n\u1ed9i tuy\u1ebfn \u1edf \u0111\u00e2y:<\/p>\n\n\n\n<ul><li>Logo &#8211; SVG, k\u00edch c\u1ee1 2,5 KB;<\/li><li>Icon t\u00ecm ki\u1ebfm &#8211; SVG, k\u00edch c\u1ee1 0,2 KB;<\/li><li>\u1ea2nh nh\u00f3m FB &#8211; PNG, k\u00edch c\u1ee1 4,5 KB. Sau khi chuy\u1ec3n sang d\u1ea1ng base64 l\u00e0 6 KB.<\/li><\/ul>\n\n\n\n<p>Trang HTML sau khi n\u1ed9i tuy\u1ebfn t\u0103ng t\u1eeb <strong>19KB l\u00ean 25KB<\/strong> (t\u00f4i ph\u1ea3i c\u1ea3m \u01a1n <a href=\"https:\/\/kiencang.net\/nen-brotli-la-gi\/\">ki\u1ec3u n\u00e9n brotli<\/a>).<\/p>\n\n\n\n<p>B\u1ea1n n\u00ean gi\u1eef k\u00edch c\u1ee1 trang HTML d\u01b0\u1edbi 100 KB. V\u01b0\u1ee3t con s\u1ed1 \u0111\u00f3 s\u1ebd \u1ea3nh h\u01b0\u1edfng m\u1ed9t ch\u00fat \u0111\u1ebfn <a href=\"https:\/\/kiencang.net\/giam-ttfb-trong-wordpress\/\">TTFB<\/a>.<\/p>\n\n\n\n<p>Logo, icon v\u00e0 c\u00e1c \u1ea3nh kh\u00e1c n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean l\u00e0 v\u1ecb tr\u00ed l\u00fd t\u01b0\u1edfng \u0111\u1ec3 n\u1ed9i tuy\u1ebfn \u1ea3nh.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Noi_tuyen_anh_trong_WordPress\"><\/span>#5. N\u1ed9i tuy\u1ebfn \u1ea3nh trong WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c c\u00f4ng c\u1ee5 h\u1ed7 tr\u1ee3 cho c\u00f4ng vi\u1ec7c n\u1ed9i tuy\u1ebfn:<\/p>\n\n\n\n<ul><li>Chuy\u1ec3n \u1ea3nh sang d\u1ea1ng base64 &#8211; <a href=\"https:\/\/www.base64-image.de\/\" target=\"_blank\" rel=\"noreferrer noopener\">base64-image.de<\/a><\/li><li>Thay \u0111\u1ed5i k\u00edch c\u1ee1 \u1ea3nh &#8211; <a href=\"https:\/\/resizeimage.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">resizeimage.net<\/a><\/li><li>N\u00e9n \u1ea3nh &#8211; <a href=\"https:\/\/compressor.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">compressor.io<\/a><\/li><li>Gi\u1ea3m thi\u1ec3u \u1ea3nh SVG &#8211; <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\">jakearchibald.github.io\/svgomg<\/a><\/li><\/ul>\n\n\n\n<p>\u1ea2nh SVG kh\u00f4ng c\u1ea7n chuy\u1ec3n sang d\u1ea1ng base64 v\u00ec b\u1ea3n th\u00e2n n\u00f3 c\u0169ng l\u00e0 d\u1ea1ng v\u0103n b\u1ea3n r\u1ed3i.<\/p>\n\n\n\n<p>Khi b\u1ea1n ch\u1ec9nh s\u1eeda URL c\u1ee7a \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 paste tr\u1ef1c ti\u1ebfp v\u0103n b\u1ea3n base64 v\u00e0o:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/base64-gutenberg.png\" alt=\"paste tr\u1ef1c ti\u1ebfp v\u0103n b\u1ea3n base64 v\u00e0o\" class=\"wp-image-14130\"\/><\/figure><\/div>\n\n\n<p>Tuy nhi\u00ean, m\u1ed9t s\u1ed1 \u1ea3nh\/icon \u0111\u01b0\u1ee3c nh\u00fang v\u00e0o theme \/ plugin t\u01b0\u01a1ng \u0111\u1ed1i ph\u1ee9c t\u1ea1p, trong tr\u01b0\u1eddng h\u1ee3p nh\u01b0 v\u1eady, b\u1ea1n c\u1ea7n t\u00ecm \u0111\u00fang file, \u0111\u00fang v\u1ecb tr\u00ed \u0111\u1ec3 \u0111\u01b0a m\u00e3 v\u00e0o.<\/p>\n\n\n\n<p>M\u1eb9o t\u00f4i th\u01b0\u1eddng l\u00e0m l\u00e0: t\u00ecm t\u00ean class c\u1ee7a \u1ea3nh t\u01b0\u01a1ng \u1ee9ng (ho\u1eb7c ph\u1ea7n t\u1eed cha) v\u00e0 t\u00ecm ki\u1ebfm file trong theme\/plugin.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/string-locator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Plugin String locator<\/a> r\u1ea5t c\u00f3 \u00edch trong vi\u1ec7c n\u00e0y. N\u00f3 s\u1ebd t\u00ecm ki\u1ebfm chu\u1ed7i v\u0103n b\u1ea3n b\u00ean trong file v\u00e0 t\u1eeb \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda n\u00f3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/string-locator.png\" alt=\"t\u00ecm ki\u1ebfm chu\u1ed7i v\u0103n b\u1ea3n b\u1eb1ng String Locator\" class=\"wp-image-14131\"\/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/chinh-sua-ma.png\" alt=\"ch\u1ec9nh s\u1eeda m\u00e3\" class=\"wp-image-14132\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Ket_luan\"><\/span>#6. K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ed9i tuy\u1ebfn \u1ea3nh l\u00e0 vi\u1ec7c c\u00f3 th\u1ec3 c\u00f3 ch\u00fat kh\u00f3 kh\u0103n, khi m\u00e3 kh\u00f4ng d\u1ec5 ch\u00e8n trong theme \/ plugin v\u00e0 m\u1ed9t s\u1ed1 nh\u01b0\u1ee3c \u0111i\u1ec3m t\u00f4i \u0111\u00e3 th\u1ea3o lu\u1eadn b\u00ean tr\u00ean. Nh\u01b0ng n\u1ebfu b\u1ea1n ch\u1ecdn \u0111\u00fang \u1ea3nh &amp; l\u00e0m ch\u00ednh x\u00e1c, n\u00f3 s\u1ebd \u0111em l\u1ea1i k\u1ebft qu\u1ea3 t\u1ed1t.<\/p>\n\n\n\n<p>B\u1ea1n h\u00e3y th\u1eed xem th\u1ebf n\u00e0o nh\u00e9.<\/p>\n\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to &amp; When to Inline Images using Base64\/SVG in WordPress, t\u00e1c gi\u1ea3: Gijo Varghese, website: WP Speed Matters)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u1ed9t trong c\u00e1c m\u1ee5c ti\u00eau ch\u00ednh c\u1ee7a t\u00f4i trong vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website l\u00e0 c\u1ea3i thi\u1ec7n First Contentful Paint v\u00e0 First Meaningful Paint, l\u00e0m cho n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean hi\u1ec3n th\u1ecb nhanh nh\u1ea5t c\u00f3 th\u1ec3. L\u00fd t\u01b0\u1edfng nh\u1ea5t, tr\u00ecnh duy\u1ec7t n\u00ean c\u00f3 kh\u1ea3 n\u0103ng render v\u00e0 style n\u1ed9i dung &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[260],"tags":[329],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"M\u1ed9t trong c\u00e1c m\u1ee5c ti\u00eau ch\u00ednh c\u1ee7a t\u00f4i trong vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website l\u00e0 c\u1ea3i thi\u1ec7n First Contentful Paint v\u00e0 First Meaningful Paint, l\u00e0m cho n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean hi\u1ec3n th\u1ecb nhanh nh\u1ea5t c\u00f3 th\u1ec3. L\u00fd t\u01b0\u1edfng nh\u1ea5t, tr\u00ecnh duy\u1ec7t n\u00ean c\u00f3 kh\u1ea3 n\u0103ng render v\u00e0 style n\u1ed9i dung &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-23T04:22:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-16T15:49:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/inlined-images-screenshot.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","og_description":"M\u1ed9t trong c\u00e1c m\u1ee5c ti\u00eau ch\u00ednh c\u1ee7a t\u00f4i trong vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website l\u00e0 c\u1ea3i thi\u1ec7n First Contentful Paint v\u00e0 First Meaningful Paint, l\u00e0m cho n\u1ed9i dung thu\u1ed9c m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean hi\u1ec3n th\u1ecb nhanh nh\u1ea5t c\u00f3 th\u1ec3. L\u00fd t\u01b0\u1edfng nh\u1ea5t, tr\u00ecnh duy\u1ec7t n\u00ean c\u00f3 kh\u1ea3 n\u0103ng render v\u00e0 style n\u1ed9i dung &hellip;","og_url":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-23T04:22:23+00:00","article_modified_time":"2022-08-16T15:49:06+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/12\/inlined-images-screenshot.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/","url":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/","name":"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-23T04:22:23+00:00","dateModified":"2022-08-16T15:49:06+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/base64-svg-trong-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/base64-svg-trong-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch inline \u1ea3nh s\u1eed d\u1ee5ng Base64\/SVG trong WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16838"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=16838"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16838\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}