{"id":22037,"date":"2021-06-19T08:55:05","date_gmt":"2021-06-19T01:55:05","guid":{"rendered":"https:\/\/speed.family\/?p=18993"},"modified":"2023-08-23T12:01:31","modified_gmt":"2023-08-23T05:01:31","slug":"base64-y-tuong-toi","status":"publish","type":"post","link":"https:\/\/kiencang.net\/base64-y-tuong-toi\/","title":{"rendered":"T\u1ea1i sao vi\u1ec7c &#8220;t\u1ed1i \u01b0u h\u00f3a&#8221; h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i"},"content":{"rendered":"\n<p>Th\u1eadt kh\u00f4ng may, ngay c\u1ea3 cho \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m n\u00e0y, m\u1ed9t s\u1ed1 plugin v\u00e0 blog chuy\u00ean v\u1ec1 m\u1ea3ng t\u1ed1i \u01b0u h\u00f3a v\u1eabn \u0111\u1ec1 xu\u1ea5t &#8220;t\u1ed1i \u01b0u&#8221; h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch m\u00e3 h\u00f3a ch\u00fang th\u00e0nh d\u1ea1ng Base64 v\u00e0 \u0111\u01b0a th\u1eb3ng \u0111o\u1ea1n m\u00e3 \u0111\u00f3 v\u00e0o HTML.<\/p>\n\n\n\n<p>Trong b\u00e0i \u0111\u0103ng n\u00e0y, t\u00f4i mu\u1ed1n gi\u1ea3i \u0111\u00e1p th\u1eafc m\u1eafc: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>T\u1ea1i sao trong th\u1eddi \u0111\u1ea1i ng\u00e0y nay, \u0111\u00e2y g\u1ea7n nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c mang v\u00e1c t\u1eeb nhi\u1ec1u n\u0103m tr\u01b0\u1edbc r\u1ed3i.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p>Ng\u00e0y x\u01b0a, c\u00e1c tr\u00ecnh duy\u1ec7t web b\u1ecb gi\u1edbi h\u1ea1n nghi\u00eam tr\u1ecdng v\u1ec1 s\u1ed1 l\u01b0\u1ee3ng k\u1ebft n\u1ed1i \u0111\u1ed3ng th\u1eddi m\u00e0 ch\u00fang c\u00f3 th\u1ec3 g\u1eedi \u0111\u1ebfn m\u00e1y ch\u1ee7:&nbsp;\u0111i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 m\u1ed9t trang web n\u1eb7ng v\u1ec1 h\u00ecnh \u1ea3nh s\u1ebd c\u1ea7n ph\u1ea3i x\u1ebfp h\u00e0ng c\u00e1c y\u00eau c\u1ea7u v\u00e0 \u0111\u1ee3i c\u00e1c y\u00eau c\u1ea7u tr\u01b0\u1edbc khi t\u1edbi l\u01b0\u1ee3t n\u00f3.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/kiencang.net\/hinh-anh-ma-hoa-base64\/\" target=\"_blank\" rel=\"noreferrer noopener\">Base64 \u0111\u01b0a ra c\u00e1ch gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 \u0111\u00f3 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng k\u1ebft n\u1ed1i HTTP \u0111\u00e3 m\u1edf<\/a> \u0111\u1ec3 ph\u00e2n ph\u1ed1i h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c nh\u00fang tr\u1ef1c ti\u1ebfp v\u00e0o HTML ho\u1eb7c CSS.&nbsp;\u0110i\u1ec1u n\u00e0y \u0111\u00e3 lo\u1ea1i b\u1ecf m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3 nhu c\u1ea7u v\u1ec1 m\u1ed9t v\u00f2ng l\u1eb7p b\u1ed5 sung m\u00e0 tr\u00ecnh duy\u1ec7t s\u1ebd c\u1ea7n cho m\u1ed7i t\u1ec7p.<\/p>\n\n\n\n<p>V\u1edbi s\u1ef1 ra \u0111\u1eddi c\u1ee7a t\u00ednh n\u0103ng gh\u00e9p k\u00eanh \u0111i k\u00e8m v\u1edbi HTTP\/2, c\u00e1c tr\u00ecnh duy\u1ec7t web tr\u1edf n\u00ean c\u1ef1c k\u1ef3 hi\u1ec7u qu\u1ea3 trong vi\u1ec7c ph\u00e2n ph\u1ed1i h\u00e0ng tr\u0103m t\u1ec7p th\u00f4ng qua k\u1ebft n\u1ed1i duy nh\u1ea5t.&nbsp;\u0110i\u1ec1u n\u00e0y ho\u1ea1t \u0111\u1ed9ng xung quanh h\u1ea7u h\u1ebft c\u00e1c gi\u1edbi h\u1ea1n m\u00e0 m\u00e3 h\u00f3a Base64 \u0111\u00e3 gi\u1ea3i quy\u1ebft v\u00e0 th\u1ef1c t\u1ebf \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 gi\u1edd \u0111\u00e2y Base64 c\u00f3 h\u1ea1i nhi\u1ec1u h\u01a1n l\u00e0 l\u1ee3i!<\/p>\n\n\n\n<p>\u0110\u1ec3 bi\u1ebft c\u00e2u tr\u1ea3 l\u1eddi t\u1ea1i sao, tr\u01b0\u1edbc ti\u00ean, ch\u00fang ta c\u1ea7n ph\u1ea3i x\u00e1c \u0111\u1ecbnh Base64 th\u1ef1c s\u1ef1 l\u00e0 g\u00ec \u0111\u00e3.&nbsp;N\u00f3i m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, Base64 l\u00e0 m\u1ed9t l\u01b0\u1ee3c \u0111\u1ed3 m\u00e3 h\u00f3a \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 bi\u1ec3u di\u1ec5n d\u1eef li\u1ec7u nh\u1ecb ph\u00e2n \u1edf \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n.&nbsp;<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y h\u1eefu \u00edch khi ph\u01b0\u01a1ng ti\u1ec7n l\u01b0u tr\u1eef ho\u1eb7c ph\u00e2n ph\u1ed1i kh\u00f4ng h\u1ed7 tr\u1ee3 d\u1eef li\u1ec7u nh\u1ecb ph\u00e2n, ch\u1eb3ng h\u1ea1n nh\u01b0 khi nh\u00fang h\u00ecnh \u1ea3nh v\u00e0o c\u01a1 s\u1edf d\u1eef li\u1ec7u, t\u1ec7p CSS ho\u1eb7c HTML.&nbsp;Ng\u01b0\u1eddi ta ph\u1ea3i c\u1ea9n th\u1eadn \u0111\u1ec3 kh\u00f4ng nh\u1ea7m l\u1eabn n\u00e9n v\u1edbi m\u00e3 h\u00f3a.&nbsp;Trong khi n\u00e9n th\u1ef1c s\u1ef1 n\u00e9n d\u1eef li\u1ec7u, m\u00e3 h\u00f3a ch\u1ec9 x\u00e1c \u0111\u1ecbnh c\u00e1ch d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a, \u0111i\u1ec1u n\u00e0y \u0111\u01b0a ch\u00fang ta \u0111\u1ebfn v\u1ea5n \u0111\u1ec1 \u0111\u1ea7u ti\u00ean.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-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-6577d62c99911\" ><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-6577d62c99911\"  type=\"checkbox\" id=\"item-6577d62c99911\"><\/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-y-tuong-toi\/#Tang_kich_thuoc_tai_xuong\" title=\"T\u0103ng k\u00edch th\u01b0\u1edbc t\u1ea3i xu\u1ed1ng\">T\u0103ng k\u00edch th\u01b0\u1edbc t\u1ea3i xu\u1ed1ng<\/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-y-tuong-toi\/#Chi_phi_CPU\" title=\"Chi ph\u00ed CPU\">Chi ph\u00ed CPU<\/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-y-tuong-toi\/#Van_de_ve_bo_nho_dem_cache\" title=\"V\u1ea5n \u0111\u1ec1 v\u1ec1 b\u1ed9 nh\u1edb \u0111\u1ec7m cache\">V\u1ea5n \u0111\u1ec1 v\u1ec1 b\u1ed9 nh\u1edb \u0111\u1ec7m cache<\/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-y-tuong-toi\/#SEO_va_trai_nghiem_nguoi_dung\" title=\"SEO v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng\">SEO v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<\/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-y-tuong-toi\/#Khi_nao_chung_ta_nen_su_dung_Base64\" title=\"Khi n\u00e0o ch\u00fang ta n\u00ean s\u1eed d\u1ee5ng Base64?\">Khi n\u00e0o ch\u00fang ta n\u00ean s\u1eed d\u1ee5ng Base64?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"download-size-increase\"><span class=\"ez-toc-section\" id=\"Tang_kich_thuoc_tai_xuong\"><\/span>T\u0103ng k\u00edch th\u01b0\u1edbc t\u1ea3i xu\u1ed1ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c d\u00f9 Base64 l\u00e0 m\u1ed9t c\u00e1ch t\u01b0\u01a1ng \u0111\u1ed1i hi\u1ec7u qu\u1ea3 \u0111\u1ec3 m\u00e3 h\u00f3a d\u1eef li\u1ec7u nh\u1ecb ph\u00e2n, nh\u01b0ng trung b\u00ecnh n\u00f3 v\u1eabn l\u00e0m t\u0103ng k\u00edch th\u01b0\u1edbc t\u1ec7p l\u00ean h\u01a1n 25%.&nbsp;\u0110i\u1ec1u n\u00e0y kh\u00f4ng ch\u1ec9 l\u00e0m t\u0103ng h\u00f3a \u0111\u01a1n b\u0103ng th\u00f4ng (bandwith) c\u1ee7a b\u1ea1n m\u00e0 c\u00f2n l\u00e0m t\u0103ng c\u1ea3 th\u1eddi gian t\u1ea3i xu\u1ed1ng n\u1eefa.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/06\/base64-image-size-comparison-1.jpg\" alt=\"\u1ea3nh base64 t\u0103ng k\u00edch th\u01b0\u1edbc\" class=\"wp-image-20469\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cpu-overhead\"><span class=\"ez-toc-section\" id=\"Chi_phi_CPU\"><\/span>Chi ph\u00ed CPU<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi ph\u00e2n ph\u1ed1i h\u00ecnh \u1ea3nh \u1edf d\u1ea1ng Base64, tr\u01b0\u1edbc ti\u00ean tr\u00ecnh duy\u1ec7t c\u1ea7n gi\u1ea3i m\u00e3 c\u00e1c chu\u1ed7i \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a Base64 v\u00e0 sau \u0111\u00f3 c\u0169ng gi\u1ea3i m\u00e3 h\u00ecnh \u1ea3nh, \u0111i\u1ec1u n\u00e0y \u0111\u01b0a t\u1edbi th\u00eam m\u1ed9t l\u1edbp c\u00f4ng vi\u1ec7c kh\u00f4ng c\u1ea7n thi\u1ebft.&nbsp;<\/p>\n\n\n\n<p>Base64 r\u1ea5t hi\u1ec7u qu\u1ea3, nh\u01b0ng n\u1ebfu t\u00ednh c\u1ea3 th\u1eddi gian x\u1eed l\u00fd <a href=\"https:\/\/kiencang.net\/bat-nen-gzip\/\" target=\"_blank\" rel=\"noreferrer noopener\">GZip<\/a> ho\u1eb7c <a href=\"https:\/\/kiencang.net\/nen-brotli-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Brotli<\/a> x\u1ea3y ra tr\u00ean m\u00e1y ch\u1ee7 \u0111\u1ec3 n\u00e9n ph\u1ea3n h\u1ed3i th\u00ec c\u00e1c mili gi\u00e2y b\u1eaft \u0111\u1ea7u nhanh ch\u00f3ng c\u1ed9ng d\u1ed3n l\u1ea1i.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"caching-issues\"><span class=\"ez-toc-section\" id=\"Van_de_ve_bo_nho_dem_cache\"><\/span>V\u1ea5n \u0111\u1ec1 v\u1ec1 b\u1ed9 nh\u1edb \u0111\u1ec7m cache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ea5n \u0111\u1ec1 th\u1ee9 ba c\u00f3 l\u1ebd l\u00e0 y\u1ebfu t\u1ed1 g\u00e2y \u1ea3nh h\u01b0\u1edfng x\u1ea5u nh\u1ea5t \u0111\u1ebfn hi\u1ec7u su\u1ea5t, nh\u01b0ng c\u00f3 l\u1ebd n\u00f3 kh\u00f4ng r\u00f5 r\u00e0ng ngay khi ch\u1ec9 nh\u00ecn s\u01a1 qua.&nbsp;<\/p>\n\n\n\n<p>Khi ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp v\u00e0o trang web c\u1ee7a b\u1ea1n, <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t s\u1ebd t\u1ef1 \u0111\u1ed9ng l\u01b0u \u1ea3nh v\u00e0o b\u1ed9 nh\u1edb cache c\u1ee5c b\u1ed9 tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a h\u1ecd<\/a> r\u1ed3i t\u1ea3i ch\u00fang tr\u1ef1c ti\u1ebfp t\u1eeb \u0111\u00f3 khi h\u1ecd truy c\u1eadp l\u1ea1i c\u00f9ng m\u1ed9t trang (ho\u1eb7c trang kh\u00e1c c\u00f3 c\u00f9ng \u1ea3nh \u0111\u00f3- v\u00ed d\u1ee5 hay g\u1eb7p l\u00e0 logo, icon).&nbsp;<\/p>\n\n\n\n<p>Do c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Base64, tr\u00ecnh duy\u1ec7t kh\u00f4ng th\u1ec3 l\u01b0u tr\u1eef h\u00ecnh \u1ea3nh c\u1ee5c b\u1ed9, do \u0111\u00f3 n\u00f3 s\u1ebd lu\u00f4n c\u1ea7n t\u00ecm n\u1ea1p l\u1ea1i ch\u00fang t\u1eeb <a href=\"https:\/\/kiencang.net\/may-chu-goc\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e1y ch\u1ee7 g\u1ed1c<\/a> ho\u1eb7c <a href=\"https:\/\/kiencang.net\/cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">CDN c\u1ee7a b\u1ea1n<\/a>, \u0111i\u1ec1u n\u00e0y t\u1ea1o th\u00eam t\u1ea3i tr\u00ean m\u00e1y ch\u1ee7 c\u0169ng nh\u01b0 t\u0103ng h\u00f3a \u0111\u01a1n b\u0103ng th\u00f4ng c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p>M\u1ed9t v\u1ea5n \u0111\u1ec1 kh\u00e1c \u1edf \u0111\u00e2y l\u00e0 n\u1ebfu h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c nh\u00fang trong m\u00e3 HTML, c\u00e1c m\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung nh\u01b0 BunnyCDN kh\u00f4ng th\u1ec3 l\u01b0u v\u00e0o b\u1ed9 \u0111\u1ec7m c\u00e1c t\u1ec7p v\u00e0 ch\u00fang s\u1ebd lu\u00f4n \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7 g\u1ed1c c\u1ee7a b\u1ea1n, c\u00e1i c\u00f3 th\u1ec3 c\u00e1ch xa h\u00e0ng ngh\u00ecn km so v\u1edbi ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"seo-and-user-experience\"><span class=\"ez-toc-section\" id=\"SEO_va_trai_nghiem_nguoi_dung\"><\/span>SEO v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c v\u1ea5n \u0111\u1ec1 th\u1ef1c s\u1ef1 kh\u00f4ng ch\u1ec9 gi\u1edbi h\u1ea1n \u1edf hi\u1ec7u su\u1ea5t m\u00e0 th\u00f4i.&nbsp;B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a Base64 tr\u00ean trang web c\u1ee7a m\u00ecnh, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 l\u00e0m t\u1ed5n h\u1ea1i \u0111\u1ebfn c\u1ea3 SEO v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>L\u00fd do cho \u0111i\u1ec1u n\u00e0y l\u00e0 vi\u1ec7c chia s\u1ebb h\u00ecnh \u1ea3nh Base64 kh\u00f3 kh\u0103n h\u01a1n nhi\u1ec1u, do th\u1ef1c t\u1ebf l\u00e0 ch\u00fang kh\u00f4ng th\u1ef1c s\u1ef1 c\u00f3 kh\u1ea3 n\u0103ng truy c\u1eadp \u0111\u01b0\u1ee3c th\u00f4ng qua URL c\u00f4ng khai.&nbsp;<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 tr\u00ecnh thu th\u1eadp d\u1eef li\u1ec7u web v\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u1ee7a b\u1ea1n kh\u00f4ng th\u1ec3 nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c li\u00ean k\u1ebft tr\u1ecf tr\u1edf l\u1ea1i trang web c\u1ee7a b\u1ea1n, l\u00e0m cho vi\u1ec7c chia s\u1ebb n\u1ed9i dung kh\u00f3 h\u01a1n nhi\u1ec1u v\u00e0 c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn &#8220;th\u1ee9 h\u1ea1ng trang&#8221;.<\/p>\n\n\n\n<p>Xem th\u00eam: <a href=\"https:\/\/kiencang.net\/seo-anh\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1ch SEO \u1ea3nh<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"when-to-actually-use-base64\"><span class=\"ez-toc-section\" id=\"Khi_nao_chung_ta_nen_su_dung_Base64\"><\/span>Khi n\u00e0o ch\u00fang ta n\u00ean s\u1eed d\u1ee5ng Base64?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Base64 c\u00f3 r\u1ea5t nhi\u1ec1u c\u00f4ng d\u1ee5ng trong c\u00f4ng ngh\u1ec7, nh\u01b0ng tr\u1eeb khi b\u1ea1n c\u00f3 l\u00fd do ch\u00ednh \u0111\u00e1ng, b\u1ea1n n\u00ean c\u1ed1 g\u1eafng tr\u00e1nh s\u1eed d\u1ee5ng n\u00f3 nh\u01b0 l\u00e0 m\u1ed9t ph\u1ea7n trong t\u1ec7p HTML ho\u1eb7c CSS c\u1ee7a m\u00ecnh.&nbsp;Ch\u1ec9 c\u00f3 v\u00e0i tr\u01b0\u1eddng h\u1ee3p \u0111\u1eb7c th\u00f9 m\u00e0 Base64 c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 h\u1eefu \u00edch.<\/p>\n\n\n\n<p>M\u1ed9t v\u00ed d\u1ee5 nh\u01b0 v\u1eady s\u1ebd l\u00e0 c\u00e1c h\u00ecnh \u1ea3nh c\u00f3 dung l\u01b0\u1ee3ng r\u1ea5t nh\u1ecf, trong \u0111\u00f3 chu\u1ed7i Base64 th\u1ef1c s\u1ef1 nh\u1ecf h\u01a1n \u0111\u1ed9 d\u00e0i c\u1ee7a chu\u1ed7i URL v\u00e0 chi ph\u00ed y\u00eau c\u1ea7u HTTP khi li\u00ean k\u1ebft \u0111\u1ebfn t\u1ec7p h\u00ecnh \u1ea3nh.&nbsp;L\u1ea5y v\u00ed d\u1ee5, m\u1ed9t \u1ea3nh PNG trong su\u1ed1t c\u00f3 k\u00edch c\u1ee1 1&#215;1 pixel.&nbsp;M\u1eb7c d\u00f9 h\u00ecnh \u1ea3nh ban \u0111\u1ea7u ch\u1ec9 c\u00f3 k\u00edch th\u01b0\u1edbc 68 byte, bao g\u1ed3m c\u00e1c y\u1ebfu t\u1ed1 trong ti\u00eau \u0111\u1ec1 HTTP, v.v., n\u00f3 th\u1ef1c s\u1ef1 l\u1edbn h\u01a1n chu\u1ed7i \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a b\u1eb1ng Base64, \u0111\u00e2y l\u00e0 pixel trong su\u1ed1t:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=<\/code><\/pre>\n\n\n\n<p>N\u1ebfu b\u1ea1n t\u1eebng g\u1eb7p m\u1ed9t blog n\u00e0o \u0111\u1ea5y g\u1ee3i \u00fd s\u1eed d\u1ee5ng \u1ea3nh Base64 \u0111\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t, h\u00e3y ho\u00e0i nghi \u0111i\u1ec1u n\u00e0y! V\u00e0 \u0111\u00e1nh gi\u00e1 c\u1ea9n th\u1eadn xem c\u00f3 b\u1ea5t k\u1ef3 l\u1ee3i \u00edch th\u1ef1c s\u1ef1 n\u00e0o \u00e1p d\u1ee5ng cho tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng c\u1ee5 th\u1ec3 c\u1ee7a b\u1ea1n kh\u00f4ng.<\/p>\n\n\n\n<p><em>(Bi\u00ean t\u1eadp t\u1eeb b\u00e0i vi\u1ebft &#8220;<a href=\"https:\/\/bunny.net\/blog\/why-optimizing-your-images-with-base64-is-almost-always-a-bad-idea\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Why optimizing your images with Base64 is almost always a bad idea<\/a>&#8221; c\u1ee7a t\u00e1c gi\u1ea3 Dejan Grofelnik Pelzel tr\u00ean BunnyCDN)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Th\u1eadt kh\u00f4ng may, ngay c\u1ea3 cho \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m n\u00e0y, m\u1ed9t s\u1ed1 plugin v\u00e0 blog chuy\u00ean v\u1ec1 m\u1ea3ng t\u1ed1i \u01b0u h\u00f3a v\u1eabn \u0111\u1ec1 xu\u1ea5t &#8220;t\u1ed1i \u01b0u&#8221; h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch m\u00e3 h\u00f3a ch\u00fang th\u00e0nh d\u1ea1ng Base64 v\u00e0 \u0111\u01b0a th\u1eb3ng \u0111o\u1ea1n m\u00e3 \u0111\u00f3 v\u00e0o HTML. Trong b\u00e0i \u0111\u0103ng n\u00e0y, t\u00f4i mu\u1ed1n gi\u1ea3i \u0111\u00e1p th\u1eafc &hellip;<\/p>\n","protected":false},"author":1,"featured_media":24581,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[280],"tags":[329],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u1ea1i sao vi\u1ec7c &quot;t\u1ed1i \u01b0u h\u00f3a&quot; h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i &#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-y-tuong-toi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ea1i sao vi\u1ec7c &quot;t\u1ed1i \u01b0u h\u00f3a&quot; h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Th\u1eadt kh\u00f4ng may, ngay c\u1ea3 cho \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m n\u00e0y, m\u1ed9t s\u1ed1 plugin v\u00e0 blog chuy\u00ean v\u1ec1 m\u1ea3ng t\u1ed1i \u01b0u h\u00f3a v\u1eabn \u0111\u1ec1 xu\u1ea5t &#8220;t\u1ed1i \u01b0u&#8221; h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch m\u00e3 h\u00f3a ch\u00fang th\u00e0nh d\u1ea1ng Base64 v\u00e0 \u0111\u01b0a th\u1eb3ng \u0111o\u1ea1n m\u00e3 \u0111\u00f3 v\u00e0o HTML. Trong b\u00e0i \u0111\u0103ng n\u00e0y, t\u00f4i mu\u1ed1n gi\u1ea3i \u0111\u00e1p th\u1eafc &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/base64-y-tuong-toi\/\" \/>\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=\"2021-06-19T01:55:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T05:01:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/06\/base64-khong-con-la-y-tuong-tot2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ea1i sao vi\u1ec7c \"t\u1ed1i \u01b0u h\u00f3a\" h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i &#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-y-tuong-toi\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ea1i sao vi\u1ec7c \"t\u1ed1i \u01b0u h\u00f3a\" h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Th\u1eadt kh\u00f4ng may, ngay c\u1ea3 cho \u0111\u1ebfn th\u1eddi \u0111i\u1ec3m n\u00e0y, m\u1ed9t s\u1ed1 plugin v\u00e0 blog chuy\u00ean v\u1ec1 m\u1ea3ng t\u1ed1i \u01b0u h\u00f3a v\u1eabn \u0111\u1ec1 xu\u1ea5t &#8220;t\u1ed1i \u01b0u&#8221; h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch m\u00e3 h\u00f3a ch\u00fang th\u00e0nh d\u1ea1ng Base64 v\u00e0 \u0111\u01b0a th\u1eb3ng \u0111o\u1ea1n m\u00e3 \u0111\u00f3 v\u00e0o HTML. Trong b\u00e0i \u0111\u0103ng n\u00e0y, t\u00f4i mu\u1ed1n gi\u1ea3i \u0111\u00e1p th\u1eafc &hellip;","og_url":"https:\/\/kiencang.net\/base64-y-tuong-toi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-06-19T01:55:05+00:00","article_modified_time":"2023-08-23T05:01:31+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/06\/base64-khong-con-la-y-tuong-tot2.png","type":"image\/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":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/base64-y-tuong-toi\/","url":"https:\/\/kiencang.net\/base64-y-tuong-toi\/","name":"T\u1ea1i sao vi\u1ec7c \"t\u1ed1i \u01b0u h\u00f3a\" h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-06-19T01:55:05+00:00","dateModified":"2023-08-23T05:01:31+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/base64-y-tuong-toi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/base64-y-tuong-toi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/base64-y-tuong-toi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ea1i sao vi\u1ec7c &#8220;t\u1ed1i \u01b0u h\u00f3a&#8221; h\u00ecnh \u1ea3nh tr\u00ean website c\u1ee7a b\u1ea1n v\u1edbi \u0111\u1ecbnh d\u1ea1ng Base64 h\u1ea7u nh\u01b0 lu\u00f4n l\u00e0 m\u1ed9t \u00fd t\u01b0\u1edfng t\u1ed3i"}]},{"@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\/22037"}],"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=22037"}],"version-history":[{"count":5,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/22037\/revisions"}],"predecessor-version":[{"id":24583,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/22037\/revisions\/24583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/24581"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=22037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=22037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=22037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}