{"id":5027,"date":"2017-06-15T04:18:35","date_gmt":"2017-06-15T04:18:35","guid":{"rendered":"http:\/\/www.ducanhplus.com\/?p=5027"},"modified":"2022-08-17T21:47:57","modified_gmt":"2022-08-17T14:47:57","slug":"cac-ky-thuat-nen-anh-webp","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/","title":{"rendered":"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP"},"content":{"rendered":"\n<p>B\u00e0i vi\u1ebft n\u00e0y n\u1eb1m trong chu\u1ed7i n\u1ed9i dung nh\u1eb1m n\u1ed7 l\u1ef1c x\u00e2y d\u1ef1ng c\u00e1c c\u01a1 s\u1edf l\u00fd thuy\u1ebft cho vi\u1ec7c <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\">c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website s\u1eed <\/a><a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">d<\/a><a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\">\u1ee5ng WordPress<\/a>.<\/p>\n\n\n\n<p>Ti\u1ebfp t\u1ee5c b\u00e0n v\u1ec1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh m\u1edbi r\u1ea5t h\u1ea5p d\u1eabn l\u00e0 WebP, b\u00e0i d\u01b0\u1edbi \u0111\u00e2y t\u1eadp trung t\u00ecm hi\u1ec3u c\u00e1c ki\u1ec3u n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u c\u1ee7a n\u00f3.<\/p>\n\n\n\n<p>&#8212;-<\/p>\n\n\n\n<p>T\u1ea1i Google, ch\u00fang t\u00f4i li\u00ean t\u1ee5c t\u00ecm ki\u1ebfm c\u00e1ch l\u00e0m cho trang web t\u1ea3i nhanh h\u01a1n. M\u1ed9t trong c\u00e1c c\u00e1ch \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 l\u00e0 l\u00e0m gi\u1ea3m dung l\u01b0\u1ee3ng \u1ea3nh tr\u00ean web. H\u00ecnh \u1ea3nh ch\u1ee9a \u0111\u1ebfn&nbsp;<a href=\"http:\/\/httparchive.org\/interesting.php\" target=\"_blank\" rel=\"noreferrer noopener\">60% &#8211; 65% d\u1eef li\u1ec7u<\/a>&nbsp;tr\u00ean h\u1ea7u h\u1ebft c\u00e1c trang web v\u00e0 k\u00edch c\u1ee1 trang l\u00e0 v\u1ea5n \u0111\u1ec1 l\u1edbn trong t\u1ed5ng th\u1eddi gian rendering (xu\u1ea5t trang). K\u00edch c\u1ee1 trang \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng v\u1edbi thi\u1ebft b\u1ecb di \u0111\u1ed9ng, khi m\u00e0 \u1ea3nh nh\u1ecf h\u01a1n s\u1ebd ti\u1ebft ki\u1ec7m c\u1ea3 b\u0103ng th\u00f4ng v\u00e0 th\u1eddi gian l\u00e0m vi\u1ec7c c\u1ee7a pin.<\/p>\n\n\n\n<p><a href=\"https:\/\/kiencang.net\/dinh-dang-anh-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebP l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh m\u1edbi<\/a>, ph\u00e1t tri\u1ec3n b\u1edfi Google v\u00e0 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong c\u00e1c tr\u00ecnh duy\u1ec7t Chrome, Opera v\u00e0 Android, \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a cho t\u1ed1c \u0111\u1ed9 cao h\u01a1n v\u00e0 dung l\u01b0\u1ee3ng \u1ea3nh nh\u1ecf tr\u00ean Web (n\u0103m 2019, th\u00eam hai tr\u00ecnh duy\u1ec7t l\u00e0 Firefox v\u00e0 Edge Microsoft h\u1ed7 tr\u1ee3 WebP). \u1ea2nh \u1edf \u0111\u1ecbnh d\u1ea1ng WebP th\u01b0\u1eddng <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\" target=\"_blank\" rel=\"noreferrer noopener\">nh\u1ecf h\u01a1n 30%<\/a> so v\u1edbi \u1ea3nh PNG v\u00e0 JPEG v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng \u0111\u1ed3 h\u1ecda t\u01b0\u01a1ng \u0111\u01b0\u01a1ng. Th\u00eam v\u00e0o \u0111\u00f3, \u1ea3nh \u0111\u1ecbnh d\u1ea1ng WebP c\u00f3 m\u1ed9t s\u1ed1 t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1 v\u1edbi c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c. N\u00f3 h\u1ed7 tr\u1ee3:<\/p>\n\n\n\n<ul><li><strong>N\u00e9n m\u1ea5t d\u1eef li\u1ec7u<\/strong>: N\u00e9n m\u1ea5t d\u1eef li\u1ec7u d\u1ef1a tr\u00ean m\u00e3 h\u00f3a khung kh\u00f3a (<em>key frame encoding<\/em>)&nbsp;<a href=\"http:\/\/en.wikipedia.org\/wiki\/VP8\" target=\"_blank\" rel=\"noreferrer noopener\">VP8<\/a>. VP8 l\u00e0 m\u1ed9t \u0111\u1ecbnh d\u1ea1ng n\u00e9n video \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi On2 Technologies l\u00e0 ng\u01b0\u1eddi k\u1ebf nhi\u1ec7m \u0111\u1ecbnh d\u1ea1ng VP6 v\u00e0 VP7.<\/li><li><strong>N\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u<\/strong>: \u0110\u1ecbnh d\u1ea1ng n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi nh\u00f3m WebP.<\/li><li><strong>Thu\u1ed9c t\u00ednh trong su\u1ed1t<\/strong>: K\u00eanh 8-bit alpha c\u00f3 \u00edch cho h\u00ecnh \u1ea3nh \u0111\u1ed3 h\u1ecda. K\u00eanh Alpha c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng c\u00f9ng v\u1edbi RGB m\u1ea5t d\u1eef li\u1ec7u, m\u1ed9t ch\u1ee9c n\u0103ng hi\u1ec7n kh\u00f4ng c\u00f3 trong b\u1ea5t k\u1ef3 \u0111\u1ecbnh d\u1ea1ng n\u00e0o kh\u00e1c.<\/li><li><strong>Ho\u1ea1t h\u00ecnh<\/strong>: N\u00f3 h\u1ed7 tr\u1ee3 m\u00e0u trung th\u1ef1c (true-color) cho \u1ea3nh \u0111\u1ed9ng.<\/li><li><strong>Metadata<\/strong>: N\u00f3 c\u00f3 th\u1ec3 c\u00f3 EXIF v\u00e0 XMP metadata (h\u1eefu \u00edch cho m\u00e1y \u1ea3nh).<\/li><li><strong>H\u1ed3 s\u01a1 m\u00e0u<\/strong>: N\u00f3 c\u00f3 th\u1ec3 c\u00f3 m\u1ed9t h\u1ed3 s\u01a1 nh\u00fang ICC.<\/li><\/ul>\n\n\n\n<p>V\u1edbi kh\u1ea3 n\u0103ng n\u00e9n \u1ea3nh t\u1ed1t h\u01a1n v\u00e0 h\u1ed7 tr\u1ee3 cho t\u1ea5t c\u1ea3 c\u00e1c ch\u1ee9c n\u0103ng tr\u00ean, WebP c\u00f3 th\u1ec3 thay th\u1ebf ho\u00e0n h\u1ea3o cho h\u1ea7u h\u1ebft c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh: <a href=\"https:\/\/kiencang.net\/gif-png-jpg-hoac-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">PNG, JPEG ho\u1eb7c GIF<\/a>. Th\u1eadm ch\u00ed n\u00f3 c\u00f2n t\u1ed1t h\u01a1n n\u1eefa, b\u1ea1n c\u00f3 bi\u1ebft l\u00e0 WebP cho ph\u00e9p kh\u1ea3 n\u0103ng <a href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1i \u01b0u h\u00f3a \u1ea3nh<\/a> ki\u1ec3u m\u1edbi, nh\u01b0 vi\u1ec7c h\u1ed7 tr\u1ee3 n\u00e9n \u1ea3nh m\u1ea5t d\u1eef li\u1ec7u v\u1edbi thu\u1ed9c t\u00ednh trong su\u1ed1t? V\u00e2ng! WebP l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh v\u00f4 c\u00f9ng \u0111a n\u0103ng (trong b\u00e0i ti\u1ebfng Anh g\u1ed1c n\u00f3 \u0111\u01b0\u1ee3c v\u00ed nh\u01b0 con dao c\u1ee7a qu\u00e2n \u0111\u1ed9i Th\u1ee5y S\u0129 \/ <em>Swiss Army knife<\/em>).<\/p>\n\n\n\n<p>V\u1eady ph\u00e9p thu\u1eadt n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n nh\u01b0 th\u1ebf n\u00e0o? N\u00e0o c\u00f9ng b\u1eaft \u0111\u1ea7u t\u00ecm hi\u1ec3u nh\u00e9.<\/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-6577d72bda1fa\" ><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-6577d72bda1fa\"  type=\"checkbox\" id=\"item-6577d72bda1fa\"><\/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\/cac-ky-thuat-nen-anh-webp\/#Nen_mat_du_lieu_WebP\" title=\"N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP\">N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP<\/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\/cac-ky-thuat-nen-anh-webp\/#Cac_mo_hinh_du_doan_noi_cua_VP8\" title=\"C\u00e1c m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n n\u1ed9i c\u1ee7a VP8\">C\u00e1c m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n n\u1ed9i c\u1ee7a VP8<\/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\/cac-ky-thuat-nen-anh-webp\/#Nen_anh_khong_mat_du_lieu_WebP\" title=\"N\u00e9n \u1ea3nh kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u WebP\">N\u00e9n \u1ea3nh kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u WebP<\/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\/cac-ky-thuat-nen-anh-webp\/#LZ77_tham_chieu_nguoc\" title=\"LZ77 tham chi\u1ebfu ng\u01b0\u1ee3c\">LZ77 tham chi\u1ebfu ng\u01b0\u1ee3c<\/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\/cac-ky-thuat-nen-anh-webp\/#Nen_mat_du_lieu_WebP_voi_Alpha\" title=\"N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP v\u1edbi Alpha\">N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP v\u1edbi Alpha<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nen_mat_du_lieu_WebP\"><\/span>N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP s\u1eed d\u1ee5ng c\u00f9ng m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c nh\u01b0 VP8 cho vi\u1ec7c d\u1ef1 b\u00e1o khung h\u00ecnh video. VP8 d\u1ef1a tr\u00ean <a href=\"http:\/\/static.googleusercontent.com\/external_content\/untrusted_dlcp\/research.google.com\/en\/us\/pubs\/archive\/37073.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">d\u1ef1 \u0111o\u00e1n kh\u1ed1i<\/a> v\u00e0 gi\u1ed1ng nh\u01b0 b\u1ea5t k\u1ef3 m\u00e3-d\u1ef1a-tr\u00ean-kh\u1ed1i n\u00e0o, VP8 chia khung h\u00ecnh th\u00e0nh c\u00e1c kh\u00fac nh\u1ecf h\u01a1n g\u1ecdi l\u00e0 macroblocks.<\/p>\n\n\n\n<p>V\u1edbi m\u1ed7i macroblock, b\u1ed9 m\u00e3 h\u00f3a c\u00f3 th\u1ec3 d\u1ef1 \u0111o\u00e1n chuy\u1ec3n \u0111\u1ed9ng d\u01b0 th\u1eeba v\u00e0 th\u00f4ng tin m\u00e0u s\u1eafc d\u1ef1a tr\u00ean c\u00e1c kh\u1ed1i \u0111\u00e3 \u0111\u01b0\u1ee3c x\u1eed l\u00fd tr\u01b0\u1edbc \u0111\u00e2y. Khung h\u00ecnh l\u00e0 &#8220;ch\u00eca kh\u00f3a&#8221; theo ngh\u0129a l\u00e0 (<em>in the sense<\/em>) n\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng c\u00e1c pixel \u0111\u00e3 \u0111\u01b0\u1ee3c gi\u1ea3i m\u00e3 trong v\u00f9ng kh\u00f4ng gian t\u1ee9c th\u1eddi xung quanh c\u1ee7a m\u1ed7i macroblocks, v\u00e0 c\u1ed1 g\u1eafng kh\u00f4i ph\u1ee5c l\u1ea1i (<em>inpaint<\/em>) th\u00f4ng tin c\u1ee7a c\u00e1c ph\u1ea7n kh\u00f4ng r\u00f5. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 m\u00e3 h\u00f3a d\u1ef1 \u0111o\u00e1n (xem th\u00eam <a href=\"http:\/\/blog.webmproject.org\/2010\/07\/inside-webm-technology-vp8-intra-and.html\" target=\"_blank\" rel=\"noreferrer noopener\">intra-frame coding c\u1ee7a video VP8<\/a>).<\/p>\n\n\n\n<p>D\u1eef li\u1ec7u d\u01b0 th\u1eeba (<em>redundant<\/em>) c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c b\u1ecf \u0111i (<em>subtracted<\/em>) kh\u1ecfi kh\u1ed1i, v\u00e0 s\u1ebd cho hi\u1ec7u qu\u1ea3 n\u00e9n t\u1ed1t h\u01a1n. Ch\u00fang ta ch\u1ec9 c\u00f2n l\u1ea1i v\u1edbi m\u1ed9t kh\u00e1c bi\u1ec7t nh\u1ecf, \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 th\u1eb7ng d\u01b0 (<em>residual<\/em>), \u0111\u1ec3 truy\u1ec1n t\u1ea3i d\u01b0\u1edbi d\u1ea1ng n\u00e9n.<\/p>\n\n\n\n<p>Sau khi b\u1ecb chuy\u1ec3n sang d\u1ea1ng to\u00e1n h\u1ecdc c\u00f3 th\u1ec3 \u0111\u1ea3o ng\u01b0\u1ee3c (DCT, l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a t\u1eeb <em>Discrete Cosine Transform \/ Bi\u1ebfn \u0111\u1ed5i C\u00f4-sin R\u1eddi r\u1ea1c<\/em>), ph\u1ea7n th\u1eb7ng d\u01b0 th\u01b0\u1eddng ch\u1ee9a nhi\u1ec1u gi\u00e1 tr\u1ecb zero, c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c n\u00e9n theo c\u00e1ch hi\u1ec7u qu\u1ea3 h\u01a1n nhi\u1ec1u. K\u1ebft qu\u1ea3 sau \u0111\u00f3 \u0111\u01b0\u1ee3c l\u01b0\u1ee3ng t\u1eed h\u00f3a (<em>quantized<\/em>) v\u00e0 m\u00e3 h\u00f3a entropy (<em>entropy-coded<\/em>). Th\u1eadt h\u00e0i h\u01b0\u1edbc (<em>amusingly<\/em>), l\u01b0\u1ee3ng t\u1eed h\u00f3a l\u00e0 b\u01b0\u1edbc duy nh\u1ea5t n\u01a1i c\u00e1c bits m\u1ea5t d\u1eef li\u1ec7u b\u1ecb b\u1ecf \u0111i (t\u00ecm ki\u1ebfm th\u00eam th\u00f4ng tin v\u1ec1 vi\u1ec7c chia b\u1edfi QPj trong s\u01a1 \u0111\u1ed3 b\u00ean d\u01b0\u1edbi). T\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc kh\u00e1c \u0111\u1ec1u c\u00f3 th\u1ec3 \u0111\u1ea3o ng\u01b0\u1ee3c (<em>invertible<\/em>) v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u (<em>lossless<\/em>)!<\/p>\n\n\n\n<p>Bi\u1ec3u \u0111\u1ed3 ti\u1ebfp theo cho th\u1ea5y c\u00e1c b\u01b0\u1edbc tham gia v\u00e0o qu\u00e1 tr\u00ecnh n\u00e9n m\u1ea5t d\u1eef li\u1ec7u c\u1ee7a WebP. C\u00e1c \u0111\u1eb7c \u0111i\u1ec3m kh\u00e1c khi so s\u00e1nh v\u1edbi JPEG \u0111\u01b0\u1ee3c khoanh tr\u00f2n v\u1edbi m\u00e0u \u0111\u1ecf.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_lossy.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_lossy.png\" alt=\"C\u00e1c b\u01b0\u1edbc tham gia v\u00e0o qu\u00e1 tr\u00ecnh n\u00e9n m\u1ea5t d\u1eef li\u1ec7u c\u1ee7a WebP\" class=\"wp-image-5028\"\/><\/a><\/figure><\/div>\n\n\n<p>WebP s\u1eed d\u1ee5ng kh\u1ed1i l\u01b0\u1ee3ng t\u1eed h\u00f3a v\u00e0 ph\u00e2n ph\u1ed1i c\u00e1c bits th\u00edch nghi qua c\u00e1c ph\u00e2n \u0111o\u1ea1n \u1ea3nh kh\u00e1c nhau: l\u01b0\u1ee3ng bits th\u1ea5p cho ph\u00e2n \u0111o\u1ea1n entropy th\u1ea5p v\u00e0 l\u01b0\u1ee3ng bits cao cho ph\u00e2n \u0111o\u1ea1n entropy cao. WebP s\u1eed d\u1ee5ng <a href=\"http:\/\/en.wikipedia.org\/wiki\/Arithmetic_coding\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e3 h\u00f3a entropy s\u1ed1 h\u1ecdc<\/a>, c\u00f3 \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng n\u00e9n t\u1ed1t h\u01a1n so v\u1edbi <a href=\"http:\/\/en.wikipedia.org\/wiki\/Huffman_coding\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e3 h\u00f3a Huffman<\/a> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong \u1ea3nh JPEG.<\/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=\"Cac_mo_hinh_du_doan_noi_cua_VP8\"><\/span>C\u00e1c m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n n\u1ed9i c\u1ee7a VP8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n n\u1ed9i c\u1ee7a VP8 \u0111\u01b0\u1ee3c d\u00f9ng v\u1edbi ba ki\u1ec3u c\u1ee7a macroblocks:<\/p>\n\n\n\n<ul><li>4&#215;4 luma<\/li><li>16&#215;16 luma<\/li><li>8&#215;8 chroma<\/li><\/ul>\n\n\n\n<p>B\u1ed1n m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n n\u1ed9i ph\u1ed5 bi\u1ebfn \u0111\u01b0\u1ee3c chia s\u1ebb b\u1edfi c\u00e1c macroblocks:<\/p>\n\n\n\n<ul><li><strong>H_PRED<\/strong> (<em>horizontal prediction \/ d\u1ef1 \u0111o\u00e1n theo chi\u1ec1u ngang<\/em>). \u0110\u1ed5 \u0111\u1ea7y m\u1ed7i kh\u1ed1i c\u1ed9t b\u1eb1ng c\u00e1ch copy c\u1ed9t tr\u00e1i, L.<\/li><li><strong>V_PRED<\/strong> (<em>vertical prediction \/ d\u1ef1 \u0111o\u00e1n theo chi\u1ec1u d\u1ecdc<\/em>). \u0110\u1ed5 \u0111\u1ea7y m\u1ed7i kh\u1ed1i h\u00e0ng b\u1eb1ng c\u00e1ch copy h\u00e0ng tr\u00ean, A<\/li><li><strong>DC_PRED<\/strong> (<em>DC prediction \/ d\u1ef1 \u0111o\u00e1n DC<\/em>). \u0110\u1ed5 \u0111\u1ea7y kh\u1ed1i v\u1edbi gi\u00e1 tr\u1ecb duy nh\u1ea5t s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb trung b\u00ecnh c\u1ee7a c\u00e1c pixel trong h\u00e0ng tr\u00ean A v\u00e0 c\u1ed9t tr\u00e1i L.<\/li><li><strong>TM_PRED<\/strong> (<em>TrueMotion prediction \/ d\u1ef1 \u0111o\u00e1n TrueMotion<\/em>). M\u00f4 h\u00ecnh \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean t\u1eeb k\u1ef9 thu\u1eadt n\u00e9n <a href=\"http:\/\/googlecode.blogspot.com\/2011\/11\/lossless-and-transparency-encoding-in.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi On2 Technologies<\/a>. Ngo\u00e0i h\u00e0ng A v\u00e0 c\u1ed9t L, TM_PRED s\u1eed d\u1ee5ng pixel P ph\u00eda tr\u00ean v\u00e0 b\u00ean tr\u00e1i c\u1ee7a kh\u1ed1i. S\u1ef1 kh\u00e1c bi\u1ec7t ngang gi\u1eefa c\u00e1c \u0111i\u1ec3m \u1ea3nh trong A (b\u1eaft \u0111\u1ea7u t\u1eeb P) \u0111\u01b0\u1ee3c truy\u1ec1n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c \u0111i\u1ec3m \u1ea3nh t\u1eeb L \u0111\u1ec3 b\u1eaft \u0111\u1ea7u m\u1ed7i h\u00e0ng.<\/li><\/ul>\n\n\n\n<p>S\u01a1 \u0111\u1ed3 b\u00ean d\u01b0\u1edbi minh h\u1ecda s\u1ef1 kh\u00e1c nhau gi\u1eefa c\u00e1c m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng b\u1edfi n\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-intra_modes.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-intra_modes.png\" alt=\"S\u1ef1 kh\u00e1c nhau gi\u1eefa c\u00e1c m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng b\u1edfi n\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP\" class=\"wp-image-5032\"\/><\/a><\/figure><\/div>\n\n\n<p>V\u1edbi kh\u1ed1i 4&#215;4 luma, c\u00f3 th\u00eam s\u00e1u m\u00f4 h\u00ecnh n\u1ed9i t\u01b0\u01a1ng t\u1ef1 v\u1edbi V_PRED v\u00e0 H_PRED, nh\u01b0ng&nbsp;t\u01b0\u01a1ng \u1ee9ng v\u1edbi d\u1ef1 \u0111o\u00e1n c\u00e1c \u0111i\u1ec3m \u1ea3nh theo nh\u1eefng h\u01b0\u1edbng kh\u00e1c nhau. Chi ti\u1ebft h\u01a1n v\u1ec1 c\u00e1c m\u00f4 h\u00ecnh n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong <a href=\"http:\/\/datatracker.ietf.org\/doc\/rfc6386\/\" target=\"_blank\" rel=\"noreferrer noopener\">H\u01b0\u1edbng d\u1eabn VP8 Bitstream<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kh\u1ed1i l\u01b0\u1ee3ng t\u1eed th\u00edch nghi<\/h3>\n\n\n\n<p>\u0110\u1ec3 n\u00e2ng cao ch\u1ea5t l\u01b0\u1ee3ng \u1ea3nh, \u1ea3nh \u0111\u01b0\u1ee3c chia ra th\u00e0nh c\u00e1c khu v\u1ef1c c\u00f3 kh\u1ea3 n\u0103ng nh\u00ecn r\u00f5 t\u01b0\u01a1ng t\u1ef1 nhau (<em>visibly similar features<\/em>). Cho m\u1ed7i khu v\u1ef1c nh\u01b0 v\u1eady, th\u00f4ng s\u1ed1 n\u00e9n (c\u00e1c b\u01b0\u1edbc l\u01b0\u1ee3ng t\u1eed, \u0111\u1ed9 m\u1ea1nh l\u1ecdc, v\u00e2n v\u00e2n) \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9c l\u1eadp (<em>tuned independently<\/em>). \u0110i\u1ec1u n\u00e0y mang l\u1ea1i hi\u1ec7u qu\u1ea3 n\u00e9n b\u1eb1ng c\u00e1ch ph\u00e2n ph\u1ed1i l\u1ea1i (<em>redistributing<\/em>) c\u00e1c bits n\u01a1i ch\u00fang h\u1eefu d\u1ee5ng nh\u1ea5t. VP8 cho ph\u00e9p t\u1ed1i \u0111a b\u1ed1n ph\u00e2n \u0111o\u1ea1n (gi\u1edbi h\u1ea1n c\u1ee7a VP8 bitstream).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_segment.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_segment.png\" alt=\"\" class=\"wp-image-5031\"\/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">T\u1ea1i sao WebP (n\u00e9n m\u1ea5t d\u1eef li\u1ec7u) l\u1ea1i t\u1ed1t h\u01a1n so v\u1edbi JPEG<\/h3>\n\n\n\n<p>M\u00e3 h\u00f3a d\u1ef1 \u0111o\u00e1n l\u00e0 l\u00fd do ch\u00ednh l\u00e0m cho WebP chi\u1ebfn th\u1eafng JPEG. Kh\u1ed1i l\u01b0\u1ee3ng t\u1eed th\u00edch nghi c\u0169ng t\u1ea1o ra s\u1ef1 kh\u00e1c bi\u1ec7t l\u1edbn. L\u1ecdc gi\u00fap bitrates \u1edf m\u1ee9c trung b\u00ecnh v\u00e0 th\u1ea5p. M\u00e3 h\u00f3a s\u1ed1 h\u1ecdc Boolean t\u1ea1o ra th\u00eam t\u1eeb 5%-10% kh\u1ea3 n\u0103ng n\u00e9n so v\u1edbi m\u00e3 h\u00f3a Huffman.<\/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=\"Nen_anh_khong_mat_du_lieu_WebP\"><\/span>N\u00e9n \u1ea3nh kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u WebP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u00e3 h\u00f3a kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u WebP d\u1ef1a tr\u00ean vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i h\u00ecnh \u1ea3nh, n\u00f3 s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 k\u1ef9 thu\u1eadt kh\u00e1c nhau. Sau \u0111\u00f3, m\u00e3 h\u00f3a entropy th\u1ef1c thi tr\u00ean c\u00e1c tham s\u1ed1 bi\u1ebfn \u0111\u1ed5i (<em>transform parameters<\/em>) v\u00e0 chuy\u1ec3n \u0111\u1ed5i d\u1eef li\u1ec7u h\u00ecnh \u1ea3nh.<\/p>\n\n\n\n<p>Vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i \u00e1p d\u1ee5ng tr\u00ean \u1ea3nh bao g\u1ed3m kh\u00f4ng gian d\u1ef1 \u0111o\u00e1n c\u1ee7a c\u00e1c pixel, chuy\u1ec3n \u0111\u1ed5i kh\u00f4ng gian m\u00e0u, s\u1eed d\u1ee5ng b\u1ea3ng m\u00e0u c\u1ee5c b\u1ed9, \u0111\u00f3ng g\u00f3i nhi\u1ec1u \u0111i\u1ec3m \u1ea3nh v\u00e0o m\u1ed9t \u0111i\u1ec3m \u1ea3nh, v\u00e0 thay th\u1ebf alpha. V\u1edbi m\u00e3 h\u00f3a entropy ch\u00fang t\u00f4i s\u1eed d\u1ee5ng bi\u1ebfn th\u1ec3 (<em>variant<\/em>) c\u1ee7a m\u00e3 h\u00f3a LZ77-Huffman, v\u1edbi vi\u1ec7c s\u1eed d\u1ee5ng m\u00e3 h\u00f3a 2D c\u1ee7a gi\u00e1 tr\u1ecb kho\u1ea3ng c\u00e1ch v\u00e0 n\u00e9n gi\u00e1 tr\u1ecb th\u01b0a th\u1edbt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chuy\u1ec3n \u0111\u1ed5i d\u1ef1 \u0111o\u00e1n (kh\u00f4ng gian)<\/h3>\n\n\n\n<p>D\u1ef1 \u0111o\u00e1n kh\u00f4ng gian \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 gi\u1ea3m entropy b\u1eb1ng c\u00e1ch khai th\u00e1c th\u1ef1c t\u1ebf l\u00e0 c\u00e1c pixel c\u1eadn k\u1ec1 th\u01b0\u1eddng c\u00f3 t\u01b0\u01a1ng quan. Trong chuy\u1ec3n \u0111\u1ed5i d\u1ef1 \u0111o\u00e1n (<em>predictor transform<\/em>), gi\u00e1 tr\u1ecb c\u1ee7a pixel hi\u1ec7n t\u1ea1i \u0111\u01b0\u1ee3c d\u1ef1 \u0111o\u00e1n t\u1eeb c\u00e1c pixels \u0111\u00e3 \u0111\u01b0\u1ee3c gi\u1ea3i m\u00e3 (theo l\u1ec7nh qu\u00e9t d\u00f2ng), v\u00e0 ch\u1ec9 gi\u00e1 tr\u1ecb th\u1eb7ng d\u01b0 (th\u1ef1c t\u1ebf &#8211; d\u1ef1 \u0111o\u00e1n) l\u00e0 \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a. M\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n x\u00e1c \u0111\u1ecbnh ki\u1ec3u d\u1ef1 \u0111o\u00e1n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng. \u1ea2nh \u0111\u01b0\u1ee3c chia ra l\u00e0m nhi\u1ec1u v\u00f9ng \u00f4 vu\u00f4ng v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c pixel trong m\u1ed9t v\u00f9ng s\u1eed d\u1ee5ng c\u00f9ng m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n.<\/p>\n\n\n\n<p>C\u00f3 13 m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n kh\u00e1c nhau. M\u1ed9t s\u1ed1 c\u00e1i ph\u1ed5 bi\u1ebfn (<em>prevalent ones<\/em>) l\u00e0 left, top, top-left &amp; top-right pixels. S\u1ed1 c\u00f2n l\u1ea1i l\u00e0 k\u1ebft h\u1ee3p (trung b\u00ecnh) c\u1ee7a left, top, top-left v\u00e0 top-right.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chuy\u1ec3n \u0111\u1ed5i m\u00e0u s\u1eafc (lo\u1ea1i b\u1ecf t\u01b0\u01a1ng quan)<\/h3>\n\n\n\n<p>M\u1ee5c ti\u00eau c\u1ee7a chuy\u1ec3n \u0111\u1ed5i m\u00e0u s\u1eafc l\u00e0 \u0111i\u1ec1u ch\u1ec9nh gi\u00e1 tr\u1ecb R, G v\u00e0 B c\u1ee7a m\u1ed7i pixel. Chuy\u1ec3n \u0111\u1ed5i m\u00e0u s\u1eafc gi\u1eef nguy\u00ean gi\u00e1 tr\u1ecb m\u00e0u xanh l\u00e1 (G), chuy\u1ec3n m\u00e0u \u0111\u1ecf (R) d\u1ef1a tr\u00ean m\u00e0u xanh l\u00e1, v\u00e0 chuy\u1ec3n m\u00e0u xanh da tr\u1eddi (B) d\u1ef1a tr\u00ean m\u00e0u xanh l\u00e1 v\u00e0 d\u1ef1a tr\u00ean m\u00e0u \u0111\u1ecf.<\/p>\n\n\n\n<p>C\u0169ng gi\u1ed1ng nh\u01b0 tr\u01b0\u1eddng h\u1ee3p c\u1ee7a chuy\u1ec3n \u0111\u1ed5i d\u1ef1 \u0111o\u00e1n, \u0111\u1ea7u ti\u00ean \u1ea3nh \u0111\u01b0\u1ee3c chia ra th\u00e0nh c\u00e1c kh\u1ed1i v\u00e0 c\u00f9ng m\u1ed9t m\u00f4 h\u00ecnh chuy\u1ec3n \u0111\u1ed5i \u0111\u01b0\u1ee3c&nbsp;s\u1eed d\u1ee5ng cho t\u1ea5t c\u1ea3 pixels trong m\u1ed9t kh\u1ed1i. V\u1edbi m\u1ed7i kh\u1ed1i c\u00f3 ba ki\u1ec3u chuy\u1ec3n \u0111\u1ed5i m\u00e0u s\u1eafc: green_to_red, green_to_blue, v\u00e0 red_to_blue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chuy\u1ec3n \u0111\u1ed5i tr\u1eeb m\u00e0u xanh l\u00e1<\/h3>\n\n\n\n<p>&#8220;Chuy\u1ec3n \u0111\u1ed5i tr\u1eeb m\u00e0u xanh l\u00e1&#8221; tr\u1eeb gi\u00e1 tr\u1ecb m\u00e0u xanh l\u00e1 t\u1eeb gi\u00e1 tr\u1ecb m\u00e0u \u0111\u1ecf v\u00e0 m\u00e0u xanh da tr\u1eddi c\u1ee7a m\u1ed7i pixel. Khi chuy\u1ec3n \u0111\u1ed5i n\u00e0y c\u00f3 m\u1eb7t, b\u1ed9 gi\u1ea3i m\u00e3 c\u1ea7n th\u00eam gi\u00e1 tr\u1ecb m\u00e0u xanh l\u00e1 v\u00e0o c\u1ea3 m\u00e0u \u0111\u1ecf v\u00e0 m\u00e0u xanh da tr\u1eddi. \u0110\u00e2y l\u00e0 tr\u01b0\u1eddng h\u1ee3p \u0111\u1eb7c bi\u1ec7t c\u1ee7a vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i m\u00e0u s\u1eafc t\u1ed5ng qu\u00e1t \u1edf tr\u00ean, th\u01b0\u1eddng \u0111\u1ee7 \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o c\u1eaft gi\u1ea3m.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chuy\u1ec3n \u0111\u1ed5i ch\u1ec9 m\u1ee5c m\u00e0u s\u1eafc (b\u1ea3ng m\u00e0u)<\/h3>\n\n\n\n<p>N\u1ebfu kh\u00f4ng c\u00f3 nhi\u1ec1u gi\u00e1 tr\u1ecb pixel \u0111\u1ed9c nh\u1ea5t (<em>unique pixel values<\/em>), c\u00f3 th\u1ec3 s\u1ebd hi\u1ec7u qu\u1ea3 h\u01a1n khi t\u1ea1o m\u1ea3ng ch\u1ec9 m\u1ee5c m\u00e0u s\u1eafc v\u00e0 thay th\u1ebf gi\u00e1 tr\u1ecb pixel b\u1eb1ng ch\u1ec9 s\u1ed1 c\u1ee7a m\u1ea3ng (<em>array&#8217;s indices<\/em>). Chuy\u1ec3n \u0111\u1ed5i ch\u1ec9 m\u1ee5c m\u00e0u s\u1eafc l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y. Chuy\u1ec3n \u0111\u1ed5i ch\u1ec9 m\u1ee5c m\u00e0u s\u1eafc (<em>the color indexing transform<\/em>) ki\u1ec3m tra c\u00e1c con s\u1ed1 l\u00e0 gi\u00e1 tr\u1ecb \u0111\u1ed9c nh\u1ea5t ARGB trong b\u1ee9c \u1ea3nh. N\u1ebfu con s\u1ed1 \u0111\u00f3 l\u00e0 d\u01b0\u1edbi ng\u01b0\u1ee1ng (256), n\u00f3 t\u1ea1o m\u1ed9t m\u1ea3ng c\u00e1c gi\u00e1 tr\u1ecb ARGB, c\u00e1i s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thay th\u1ebf gi\u00e1 tr\u1ecb pixel v\u1edbi ch\u1ec9 s\u1ed1 t\u01b0\u01a1ng \u1ee9ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e3 h\u00f3a b\u1ed9 nh\u1edb \u0111\u1ec7m m\u00e0u<\/h3>\n\n\n\n<p>N\u00e9n \u1ea3nh WebP kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u s\u1eed d\u1ee5ng c\u00e1c ph\u00e2n m\u1ea3nh \u1ea3nh s\u1eb5n c\u00f3 theo th\u1ee9 t\u1ef1 \u0111\u1ec3 t\u00e1i t\u1ea1o c\u00e1c pixels m\u1edbi. N\u00f3 c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u1ea3ng m\u00e0u c\u1ee5c b\u1ed9 n\u1ebfu kh\u00f4ng t\u00ecm \u0111\u01b0\u1ee3c so kh\u1edbp th\u00edch h\u1ee3p (<em>if no interesting match is found<\/em>). B\u1ea3ng m\u00e0u n\u00e0y \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt li\u00ean t\u1ee5c \u0111\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i m\u00e0u s\u1eafc g\u1ea7n \u0111\u00e2y (<em>reuse recent colors<\/em>). Trong b\u1ee9c h\u00ecnh b\u00ean d\u01b0\u1edbi, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y b\u1ed9 nh\u1edb \u0111\u1ec7m m\u00e0u c\u1ee5c b\u1ed9 trong h\u00e0nh \u0111\u1ed9ng \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt d\u1ea7n d\u1ea7n v\u1edbi 32 m\u00e0u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng g\u1ea7n \u0111\u00e2y khi qu\u00e9t xu\u1ed1ng.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-beach2.jpg\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-beach2.jpg\" alt=\"B\u1ed9 nh\u1edb \u0111\u1ec7m m\u00e0u c\u1ee5c b\u1ed9\" class=\"wp-image-5036\"\/><\/a><\/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=\"LZ77_tham_chieu_nguoc\"><\/span>LZ77 tham chi\u1ebfu ng\u01b0\u1ee3c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tham chi\u1ebfu ng\u01b0\u1ee3c (<em>backward references<\/em>) l\u00e0 c\u00e1c b\u1ed9 m\u00e3 chi\u1ec1u d\u00e0i v\u00e0 kho\u1ea3ng c\u00e1ch. \u0110\u1ed9 d\u00e0i ch\u1ec9 ra c\u00f3 bao nhi\u00eau pixels trong l\u1ec7nh qu\u00e9t d\u00f2ng \u0111\u01b0\u1ee3c sao ch\u00e9p. Kho\u1ea3ng c\u00e1ch code l\u00e0 con s\u1ed1 ch\u1ec9 v\u1ecb tr\u00ed c\u1ee7a pixel th\u1ea5y tr\u01b0\u1edbc \u0111\u00e2y, t\u1eeb pixel \u0111\u01b0\u1ee3c sao ch\u00e9p. Gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i v\u00e0 kho\u1ea3ng c\u00e1ch \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef s\u1eed d\u1ee5ng m\u00e3 h\u00f3a ti\u1ec1n t\u1ed1 LZ77.<\/p>\n\n\n\n<p>M\u00e3 h\u00f3a ti\u1ec1n t\u1ed1 LZ77 chia c\u00e1c s\u1ed1 nguy\u00ean l\u1edbn ra hai ph\u1ea7n: m\u00e3 ti\u1ec1n t\u1ed1 v\u00e0 c\u00e1c bits b\u1ed5 sung. M\u00e3 ti\u1ec1n t\u1ed1 \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef s\u1eed d\u1ee5ng m\u00e3 entropy, trong khi bits b\u1ed5 sung \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef nh\u01b0 b\u00ecnh th\u01b0\u1eddng (kh\u00f4ng c\u00f3 m\u00e3 entropy).<\/p>\n\n\n\n<p>H\u00ecnh b\u00ean d\u01b0\u1edbi minh h\u1ecda LZ77 (bi\u1ebfn th\u1ec3 2D) v\u1edbi t\u1eeb-kh\u1edbp \/ word-matching (thay cho pixel).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-lz77.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-lz77.png\" alt=\"LZ77 (bi\u1ebfn th\u1ec3 2D) v\u1edbi t\u1eeb-kh\u1edbp \/ word-matching\" class=\"wp-image-5041\"\/><\/a><\/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=\"Nen_mat_du_lieu_WebP_voi_Alpha\"><\/span>N\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP v\u1edbi Alpha<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ngo\u00e0i ki\u1ec3u n\u00e9n m\u1ea5t d\u1eef li\u1ec7u WebP (c\u00e1c m\u00e0u RGB) v\u00e0 n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u WebP (n\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u RGB v\u1edbi k\u00eanh alpha), c\u00f3 m\u00f4 h\u00ecnh WebP kh\u00e1c cho ph\u00e9p m\u00e3 h\u00f3a m\u1ea5t d\u1eef li\u1ec7u cho k\u00eanh RGB v\u00e0 m\u00e3 h\u00f3a kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u cho k\u00eanh alpha. Kh\u1ea3 n\u0103ng n\u00e0y (m\u1ea5t d\u1eef li\u1ec7u RGB v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u alpha) hi\u1ec7n kh\u00f4ng c\u00f3 \u1edf b\u1ea5t c\u1ee9 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh n\u00e0o kh\u00e1c.<\/p>\n\n\n\n<p>Ng\u00e0y nay, ng\u01b0\u1eddi qu\u1ea3n tr\u1ecb web c\u1ea7n thu\u1ed9c t\u00ednh trong su\u1ed1t ph\u1ea3i m\u00e3 h\u00f3a \u1ea3nh kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u \u1edf PNG, \u0111i\u1ec1u n\u00e0y l\u00e0m cho k\u00edch c\u1ee1 t\u0103ng \u0111\u00e1ng k\u1ec3 (<em>leading&nbsp;significant size bloat<\/em>). WebP alpha m\u00e3 h\u00f3a \u1ea3nh v\u1edbi bits-m\u1ed7i-pixel th\u1ea5p v\u00e0 cung c\u1ea5p c\u00e1ch hi\u1ec7u qu\u1ea3 \u0111\u1ec3 gi\u1ea3m k\u00edch c\u1ee1 c\u00e1c \u1ea3nh nh\u01b0 v\u1eady. N\u00e9n kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u c\u1ee7a k\u00eanh alpha ch\u1ec9 th\u00eam <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\" target=\"_blank\" rel=\"noreferrer noopener\">22% dung l\u01b0\u1ee3ng<\/a> so v\u1edbi n\u00e9n m\u1ea5t d\u1eef li\u1ec7u m\u00e3 h\u00f3a WebP (ch\u1ea5t l\u01b0\u1ee3ng 90).<\/p>\n\n\n\n<p>Nh\u00ecn chung (<em>overall<\/em>), thay th\u1ebf \u1ea3nh trong su\u1ed1t PNG v\u1edbi n\u00e9n m\u1ea5t d\u1eef li\u1ec7u+alpha c\u1ee7a WebP cho ph\u00e9p ti\u1ebft ki\u1ec7m trung b\u00ecnh t\u1eeb <a href=\"https:\/\/developers.google.com\/speed\/webp\/lossless_alpha_study\/compression_ratio_20120709.png\" target=\"_blank\" rel=\"noreferrer noopener\">60-70%<\/a>&nbsp;dung l\u01b0\u1ee3ng.&nbsp;\u0110i\u1ec1u n\u00e0y \u0111\u00e3 \u0111\u01b0\u1ee3c x\u00e1c nh\u1eadn l\u00e0 m\u1ed9t t\u00ednh n\u0103ng thu h\u00fat tuy\u1ec7t v\u1eddi cho c\u00e1c trang web di \u0111\u1ed9ng c\u00f3 nhi\u1ec1u icon.<\/p>\n\n\n\n<p><em>(Dich t\u1eeb b\u00e0i vi\u1ebft&nbsp;Compression Techniques &#8211; Tham Chi\u1ebfu &#8211; WebP &#8211; Make the Web Faster &#8211; Google Developer)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u00e0i vi\u1ebft n\u00e0y n\u1eb1m trong chu\u1ed7i n\u1ed9i dung nh\u1eb1m n\u1ed7 l\u1ef1c x\u00e2y d\u1ef1ng c\u00e1c c\u01a1 s\u1edf l\u00fd thuy\u1ebft cho vi\u1ec7c c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website s\u1eed d\u1ee5ng WordPress. Ti\u1ebfp t\u1ee5c b\u00e0n v\u1ec1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh m\u1edbi r\u1ea5t h\u1ea5p d\u1eabn l\u00e0 WebP, b\u00e0i d\u01b0\u1edbi \u0111\u00e2y t\u1eadp trung t\u00ecm hi\u1ec3u c\u00e1c ki\u1ec3u n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[296],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP &#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\/cac-ky-thuat-nen-anh-webp\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"B\u00e0i vi\u1ebft n\u00e0y n\u1eb1m trong chu\u1ed7i n\u1ed9i dung nh\u1eb1m n\u1ed7 l\u1ef1c x\u00e2y d\u1ef1ng c\u00e1c c\u01a1 s\u1edf l\u00fd thuy\u1ebft cho vi\u1ec7c c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website s\u1eed d\u1ee5ng WordPress. Ti\u1ebfp t\u1ee5c b\u00e0n v\u1ec1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh m\u1edbi r\u1ea5t h\u1ea5p d\u1eabn l\u00e0 WebP, b\u00e0i d\u01b0\u1edbi \u0111\u00e2y t\u1eadp trung t\u00ecm hi\u1ec3u c\u00e1c ki\u1ec3u n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/\" \/>\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=\"2017-06-15T04:18:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-17T14:47:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_lossy.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=\"17 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP &#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\/cac-ky-thuat-nen-anh-webp\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP &#8226; Ki\u1ebfn c\u00e0ng","og_description":"B\u00e0i vi\u1ebft n\u00e0y n\u1eb1m trong chu\u1ed7i n\u1ed9i dung nh\u1eb1m n\u1ed7 l\u1ef1c x\u00e2y d\u1ef1ng c\u00e1c c\u01a1 s\u1edf l\u00fd thuy\u1ebft cho vi\u1ec7c c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 website s\u1eed d\u1ee5ng WordPress. Ti\u1ebfp t\u1ee5c b\u00e0n v\u1ec1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh m\u1edbi r\u1ea5t h\u1ea5p d\u1eabn l\u00e0 WebP, b\u00e0i d\u01b0\u1edbi \u0111\u00e2y t\u1eadp trung t\u00ecm hi\u1ec3u c\u00e1c ki\u1ec3u n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 &hellip;","og_url":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2017-06-15T04:18:35+00:00","article_modified_time":"2022-08-17T14:47:57+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2017\/06\/compression-webp_lossy.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":"17 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/","url":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/","name":"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2017-06-15T04:18:35+00:00","dateModified":"2022-08-17T14:47:57+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh c\u1ee7a WebP"}]},{"@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\/5027"}],"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=5027"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/5027\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=5027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=5027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=5027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}