{"id":5189,"date":"2018-04-14T14:11:29","date_gmt":"2018-04-14T14:11:29","guid":{"rendered":"http:\/\/www.ducanhplus.com\/?p=5189"},"modified":"2022-08-17T21:41:44","modified_gmt":"2022-08-17T14:41:44","slug":"toi-uu-hoa-anh-tren-web","status":"publish","type":"post","link":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/","title":{"rendered":"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft)"},"content":{"rendered":"\n<p>C\u00e1c b\u1ee9c \u1ea3nh th\u01b0\u1eddng chi\u1ebfm ph\u1ea7n l\u1edbn dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 tr\u00ean trang web v\u00e0 c\u0169ng th\u01b0\u1eddng chi\u1ebfm kh\u00f4ng gian th\u1ecb gi\u00e1c \u0111\u00e1ng k\u1ec3. V\u00ec l\u00fd do \u0111\u00f3, <a href=\"https:\/\/kiencang.net\/toi-uu-hoa-toc-do-tai-anh\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1i \u01b0u h\u00f3a \u1ea3nh<\/a> s\u1ebd gi\u00fap gi\u1ea3m m\u1ed9t l\u01b0\u1ee3ng l\u1edbn d\u1eef li\u1ec7u v\u00e0 n\u00e2ng cao hi\u1ec7u n\u0103ng, <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 cho website<\/a> c\u1ee7a b\u1ea1n:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>S\u1ed1 l\u01b0\u1ee3ng d\u1eef li\u1ec7u tr\u00ecnh duy\u1ec7t c\u1ea7n t\u1ea3i v\u1ec1 c\u00e0ng \u00edt th\u00ec c\u00f3 c\u00e0ng \u00edt c\u1ea1nh tranh cho b\u0103ng th\u00f4ng c\u1ee7a m\u00e1y kh\u00e1ch, th\u00eam v\u00e0o \u0111\u00f3 <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 t\u1ea3i v\u00e0 render n\u1ed9i dung<\/a> h\u1eefu \u00edch nhanh h\u01a1n tr\u00ean m\u00e0n h\u00ecnh.<\/p><\/blockquote>\n\n\n\n<p>T\u1ed1i \u01b0u h\u00f3a \u1ea3nh l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a c\u1ea3 ngh\u1ec7 thu\u1eadt v\u00e0 khoa h\u1ecdc: l\u00e0 ngh\u1ec7 thu\u1eadt b\u1edfi v\u00ec kh\u00f4ng c\u00f3 m\u1ed9t c\u00e2u tr\u1ea3 l\u1eddi ho\u00e0n ch\u1ec9nh cho vi\u1ec7c t\u1ec9 l\u1ec7 n\u00e9n n\u00e0o l\u00e0 t\u1ed1t nh\u1ea5t cho t\u1eebng \u1ea3nh c\u1ee5 th\u1ec3, v\u00e0 l\u00e0 khoa h\u1ecdc b\u1edfi v\u00ec c\u00f3 nhi\u1ec1u k\u1ef9 thu\u1eadt v\u00e0 thu\u1eadt to\u00e1n \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n t\u1ed1t c\u00f3 th\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng \u1ea3nh \u0111\u00e1ng k\u1ec3.<\/p>\n\n\n\n<p>\u0110\u1ec3 t\u00ecm ra thi\u1ebft l\u1eadp t\u1ed1i \u01b0u&nbsp;cho c\u00e1c h\u00ecnh \u1ea3nh, b\u1ea1n c\u1ea7n ph\u00e2n t\u00edch c\u1ea9n th\u1eadn tr\u00ean nhi\u1ec1u kh\u00eda c\u1ea1nh: <\/p>\n\n\n\n<ul><li>\u0110\u1ecbnh d\u1ea1ng c\u00f3 th\u1ec3 cung c\u1ea5p.<\/li><li>N\u1ed9i dung c\u1ee7a d\u1eef li\u1ec7u m\u00e3 h\u00f3a.<\/li><li>Ch\u1ea5t l\u01b0\u1ee3ng.<\/li><li>K\u00edch th\u01b0\u1edbc t\u00ednh ra pixel.<\/li><li>V\u00e0 nhi\u1ec1u c\u00e1i kh\u00e1c n\u1eefa.<\/li><\/ul>\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-6577d6190e551\" ><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-6577d6190e551\"  type=\"checkbox\" id=\"item-6577d6190e551\"><\/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\/toi-uu-hoa-anh-tren-web\/#1_Loai_bo_va_thay_the_hinh_anh\" title=\"#1. Lo\u1ea1i b\u1ecf v\u00e0 thay th\u1ebf h\u00ecnh \u1ea3nh\">#1. Lo\u1ea1i b\u1ecf v\u00e0 thay th\u1ebf h\u00ecnh \u1ea3nh<\/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\/toi-uu-hoa-anh-tren-web\/#2_Anh_Vector_va_Raster\" title=\"#2. \u1ea2nh Vector v\u00e0 Raster\">#2. \u1ea2nh Vector v\u00e0 Raster<\/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\/toi-uu-hoa-anh-tren-web\/#3_Tac_dong_cua_man_hinh_co_do_phan_giai_cao\" title=\"#3. T\u00e1c \u0111\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao\">#3. T\u00e1c \u0111\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao<\/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\/toi-uu-hoa-anh-tren-web\/#4_Toi_uu_anh_vector\" title=\"#4. T\u1ed1i \u01b0u \u1ea3nh vector\">#4. T\u1ed1i \u01b0u \u1ea3nh vector<\/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\/toi-uu-hoa-anh-tren-web\/#5_Toi_uu_hoa_anh_raster\" title=\"#5. T\u1ed1i \u01b0u h\u00f3a \u1ea3nh raster\">#5. T\u1ed1i \u01b0u h\u00f3a \u1ea3nh raster<\/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\/toi-uu-hoa-anh-tren-web\/#6_Nen_anh_mat_du_lieu_va_khong_mat_du_lieu\" title=\"#6. N\u00e9n \u1ea3nh m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u\">#6. N\u00e9n \u1ea3nh m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#7_Lua_chon_dung_dinh_dang_anh\" title=\"#7. L\u1ef1a ch\u1ecdn \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng \u1ea3nh\">#7. L\u1ef1a ch\u1ecdn \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng \u1ea3nh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#8_Cac_cong_cu_va_dieu_chinh_tham_so\" title=\"#8. C\u00e1c c\u00f4ng c\u1ee5 v\u00e0 \u0111i\u1ec1u ch\u1ec9nh tham s\u1ed1\">#8. C\u00e1c c\u00f4ng c\u1ee5 v\u00e0 \u0111i\u1ec1u ch\u1ec9nh tham s\u1ed1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#9_Phan_phoi_cac_anh_thu_nho\" title=\"#9. Ph\u00e2n ph\u1ed1i c\u00e1c \u1ea3nh thu nh\u1ecf\">#9. Ph\u00e2n ph\u1ed1i c\u00e1c \u1ea3nh thu nh\u1ecf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#10_Danh_sach_kiem_tra_toi_uu_hoa_hinh_anh\" title=\"#10. Danh s\u00e1ch ki\u1ec3m tra t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh\">#10. Danh s\u00e1ch ki\u1ec3m tra t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"lo\u1ea1i-b\u1ecf-va-thay-th\u1ebf-hinh-\u1ea3nh\"><span class=\"ez-toc-section\" id=\"1_Loai_bo_va_thay_the_hinh_anh\"><\/span>#1. Lo\u1ea1i b\u1ecf v\u00e0 thay th\u1ebf h\u00ecnh \u1ea3nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>Lo\u1ea1i b\u1ecf c\u00e1c \u1ea3nh ngu\u1ed3n kh\u00f4ng c\u1ea7n thi\u1ebft.<\/li><li>T\u1eadn d\u1ee5ng c\u00e1c hi\u1ec7u \u1ee9ng CSS3 khi c\u00f3 th\u1ec3.<\/li><li>S\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/font-cho-web-va-toc-do-tai-trang\/\" target=\"_blank\" rel=\"noreferrer noopener\">font web<\/a> thay v\u00ec ph\u1ea3i m\u00e3 h\u00f3a v\u0103n b\u1ea3n l\u00ean h\u00ecnh \u1ea3nh.<\/li><\/ul>\n\n\n\n<p>C\u00e2u h\u1ecfi \u0111\u1ea7u ti\u00ean m\u00e0 b\u1ea1n ph\u1ea3i t\u1ef1 h\u1ecfi b\u1ea3n th\u00e2n m\u00ecnh l\u00e0 m\u1ed9t h\u00ecnh \u1ea3nh c\u00f3 th\u1ef1c s\u1ef1 l\u00e0 y\u00eau c\u1ea7u c\u1ea7n thi\u1ebft \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c hi\u1ec7u qu\u1ea3 b\u1ea1n tr\u00f4ng \u0111\u1ee3i hay kh\u00f4ng. Thi\u1ebft k\u1ebf t\u1ed1t th\u01b0\u1eddng l\u00e0 \u0111\u01a1n gi\u1ea3n v\u00e0 n\u00f3 c\u0169ng \u0111em l\u1ea1i hi\u1ec7u su\u1ea5t t\u1ed1t nh\u1ea5t.<\/p>\n\n\n\n<p>Lu\u00f4n l\u00e0 chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a t\u1ed1t nh\u1ea5t n\u1ebfu b\u1ea1n c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf \u1ea3nh- c\u00e1i th\u01b0\u1eddng y\u00eau c\u1ea7u m\u1ed9t l\u01b0\u1ee3ng l\u1edbn byte d\u1eef li\u1ec7u khi so s\u00e1nh v\u1edbi HTML, CSS, JavaScript v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c tr\u00ean trang.<\/p>\n\n\n\n<p>Nh\u01b0ng c\u0169ng c\u1ea7n ph\u1ea3i n\u00f3i, m\u1ed9t h\u00ecnh \u1ea3nh \u0111\u1eb9p \u1edf \u0111\u00fang ch\u1ed7 c\u00f3 th\u1ec3 truy\u1ec1n \u0111\u1ea1t \u0111\u01b0\u1ee3c nhi\u1ec1u th\u00f4ng tin h\u01a1n c\u1ea3 m\u1ed9t ng\u00e0n t\u1eeb, v\u00ec v\u1eady \u0111i\u1ec1u \u0111\u00f3 t\u00f9y thu\u1ed9c v\u00e0o b\u1ea1n \u0111\u1ec3 t\u00ecm ra \u0111\u01b0\u1ee3c \u0111i\u1ec3m c\u00e2n b\u1eb1ng.<\/p>\n\n\n\n<p>Ti\u1ebfp theo, b\u1ea1n ph\u1ea3i xem x\u00e9t n\u1ebfu c\u00f3 c\u00f4ng ngh\u1ec7 thay th\u1ebf&nbsp;c\u00f3 th\u1ec3 \u0111em l\u1ea1i k\u1ebft qu\u1ea3 nh\u01b0 mong mu\u1ed1n, nh\u01b0ng theo c\u00e1ch hi\u1ec7u qu\u1ea3 h\u01a1n:<\/p>\n\n\n\n<ul><li><strong>C\u00e1c hi\u1ec7u \u1ee9ng CSS<\/strong> (gradients, \u0111\u1ed5 b\u00f3ng, v\u00e2n v\u00e2n) v\u00e0 hi\u1ec7u \u1ee9ng \u0111\u1ed9ng c\u1ee7a CSS c\u00f3 th\u1ec3 h\u1eefu \u00edch trong vi\u1ec7c t\u1ea1o ra c\u00e1c s\u1ea3n ph\u1ea9m \u0111\u1ed9c l\u1eadp v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i, n\u00f3 lu\u00f4n lu\u00f4n tr\u00f4ng s\u1eafc n\u00e9t (<em>sharp<\/em>) \u1edf m\u1ecdi \u0111\u1ed9 ph\u00e2n gi\u1ea3i v\u00e0 m\u1ee9c \u0111\u1ed9 ph\u00f3ng to (<em>zoom level<\/em>), th\u01b0\u1eddng l\u00e0 m\u1ed9t ph\u00e2n m\u1ea3nh c\u1ee7a d\u1eef li\u1ec7u y\u00eau c\u1ea7u b\u1edfi file \u1ea3nh.<\/li><li><strong>Web fonts<\/strong> cho ph\u00e9p s\u1eed d\u1ee5ng c\u00e1c ki\u1ec3u font \u0111\u1eb9p m\u1eaft trong khi v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c&nbsp;kh\u1ea3 n\u0103ng ch\u1ecdn l\u1ef1a, t\u00ecm ki\u1ebfm v\u00e0 thay \u0111\u1ed5i k\u00edch c\u1ee1 v\u0103n b\u1ea3n &#8211; c\u00e1i c\u1ea3i thi\u1ec7n \u0111\u00e1ng k\u1ec3 <a href=\"https:\/\/kiencang.net\/tinh-kha-dung-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00ednh kh\u1ea3 d\u1ee5ng<\/a>.<\/li><\/ul>\n\n\n\n<p>N\u1ebfu b\u1ea1n t\u1eebng th\u1ea5y b\u1ea3n th\u00e2n m\u00e3 h\u00f3a v\u0103n b\u1ea3n tr\u00ean \u1ea3nh, h\u00e3y d\u1eebng v\u00e0 xem x\u00e9t l\u1ea1i. <a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typography \u0111\u1eb9p<\/a> l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng cho thi\u1ebft k\u1ebf, th\u01b0\u01a1ng hi\u1ec7u, v\u00e0 kh\u1ea3 n\u0103ng \u0111\u1ecdc t\u1ed1t, nh\u01b0ng v\u0103n b\u1ea3n n\u1eb1m \u0111\u00f4ng c\u1ee9ng tr\u00ean h\u00ecnh t\u1ea1o ra tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng ngh\u00e8o n\u00e0n: v\u0103n b\u1ea3n kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c l\u1ef1a ch\u1ecdn, kh\u00f4ng th\u1ec3 t\u00ecm ki\u1ebfm, kh\u00f4ng th\u1ec3 ph\u00f3ng to, kh\u00f4ng ti\u1ec7n d\u1ee5ng v\u00e0 th\u00e2n thi\u1ec7n cho thi\u1ebft b\u1ecb c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao (<em>hight-DPI devices<\/em>). Vi\u1ec7c s\u1eed d\u1ee5ng font ch\u1eef web y\u00eau c\u1ea7u <a href=\"https:\/\/www.igvita.com\/2014\/01\/31\/optimizing-web-font-rendering-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\">thi\u1ebft l\u1eadp t\u1ed1i \u01b0u h\u00f3a ri\u00eang<\/a>, nh\u01b0ng n\u00f3 gi\u1ea3i quy\u1ebft t\u1ea5t c\u1ea3 c\u00e1c lo ng\u1ea1i n\u00e0y v\u00e0 lu\u00f4n l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t h\u01a1n \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u1ea3nh-vector-va-raster\"><span class=\"ez-toc-section\" id=\"2_Anh_Vector_va_Raster\"><\/span>#2. \u1ea2nh Vector v\u00e0 Raster<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>\u1ea2nh vector l\u00e0 l\u00fd t\u01b0\u1edfng cho c\u00e1c \u1ea3nh ch\u1ee9a c\u00e1c h\u00ecnh d\u1ea1ng h\u00ecnh h\u1ecdc (<em>geometric shapes<\/em>).<\/li><li>\u1ea2nh vector c\u00f3 kh\u1ea3 n\u0103ng ph\u00f3ng to v\u00e0 kh\u00f4ng ph\u1ee5 thu\u1ed9c \u0111\u1ed9 ph\u00e2n gi\u1ea3i.<\/li><li>\u1ea2nh raster n\u00ean s\u1eed d\u1ee5ng cho c\u1ea3nh ph\u1ee9c t\u1ea1p v\u1edbi nhi\u1ec1u h\u00ecnh d\u1ea1ng b\u1ea5t th\u01b0\u1eddng v\u00e0 chi ti\u1ebft cao.<\/li><\/ul>\n\n\n\n<p>M\u1ed9t khi b\u1ea1n \u0111\u00e3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c&nbsp;\u1ea3nh l\u00e0 g\u00ec, trong th\u1ef1c t\u1ebf c\u1ea7n t\u1ed1i \u01b0u h\u00f3a \u0111\u1ecbnh d\u1ea1ng \u0111\u1ec3 nh\u1eadn \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng mong mu\u1ed1n, l\u1ef1a ch\u1ecdn quan tr\u1ecdng ti\u1ebfp theo l\u00e0 ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng th\u00edch h\u1ee3p:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/vector-zoom.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/vector-zoom.png\" alt=\"\u1ea2nh vector ph\u00f3ng to\" class=\"wp-image-5194\"\/><\/a><figcaption>\u1ea2nh vector ph\u00f3ng to<\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/raster-zoom.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/raster-zoom.png\" alt=\"\u1ea2nh raster ph\u00f3ng to\" class=\"wp-image-5193\"\/><\/a><figcaption>\u1ea2nh raster ph\u00f3ng to<\/figcaption><\/figure><\/div>\n\n\n<ul><li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Vector_graphics\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea2nh vector<\/a> s\u1eed d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng th\u1eb3ng, \u0111i\u1ec3m v\u00e0 c\u00e1c h\u00ecnh \u0111a gi\u00e1c \u0111\u1ec3 \u0111\u1ea1i di\u1ec7n cho h\u00ecnh \u1ea3nh.<\/li><li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Raster_graphics\" target=\"_blank\" rel=\"noreferrer noopener\">\u1ea2nh raster<\/a> \u0111\u1ea1i di\u1ec7n cho \u1ea3nh \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a ri\u00eang gi\u00e1 tr\u1ecb c\u1ee7a t\u1eebng pixel v\u1edbi l\u01b0\u1edbi ch\u1eef nh\u1eadt.<\/li><\/ul>\n\n\n\n<p>M\u1ed7i \u0111\u1ecbnh d\u1ea1ng c\u00f3 nh\u1eefng \u0111i\u1ec3m m\u1ea1nh v\u00e0 y\u1ebfu ri\u00eang. \u0110\u1ecbnh d\u1ea1ng vector th\u00edch h\u1ee3p l\u00fd t\u01b0\u1edfng cho c\u00e1c h\u00ecnh \u1ea3nh bao g\u1ed3m c\u00e1c <strong>h\u00ecnh d\u1ea1ng h\u00ecnh h\u1ecdc \u0111\u01a1n gi\u1ea3n<\/strong> (l\u1ea5y th\u00ed d\u1ee5 nh\u01b0 logo, v\u0103n b\u1ea3n, icon v\u00e0 c\u00e1c lo\u1ea1i kh\u00e1c), v\u00e0 k\u1ebft qu\u1ea3 l\u00e0 \u0111\u1ed9 s\u1eafc n\u00e9t kh\u00f4ng b\u1ecb suy chuy\u1ec3n t\u1ea1i b\u1ea5t c\u1ee9 \u0111\u1ed9 ph\u00e2n gi\u1ea3i v\u00e0 m\u1ee9c \u0111\u1ed9 ph\u00f3ng to n\u00e0o, c\u00e1i gi\u00fap ch\u00fang tr\u1edf th\u00e0nh \u0111\u1ecbnh d\u1ea1ng l\u00fd t\u01b0\u1edfng cho m\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao&nbsp;v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n c\u1ea7n hi\u1ec3n th\u1ecb tr\u00ean nhi\u1ec1u k\u00edch c\u1ee1 kh\u00e1c nhau.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, \u0111\u1ecbnh d\u1ea1ng vector kh\u00f4ng th\u00edch h\u1ee3p khi s\u1eed d\u1ee5ng v\u1edbi c\u1ea3nh ph\u1ee9c t\u1ea1p (l\u1ea5y th\u00ed d\u1ee5 \u1ea3nh ch\u1ee5p): s\u1ed1 l\u01b0\u1ee3ng \u0111\u00e1nh d\u1ea5u SVG d\u00f9ng \u0111\u1ec3 m\u00f4 t\u1ea3 t\u1ea5t c\u1ea3 c\u00e1c kh\u1ed1i c\u00f3 th\u1ec3 cao kh\u1ee7ng khi\u1ebfp v\u00e0 d\u1eabu th\u1ebf \u0111\u1ea7u ra c\u00f3 th\u1ec3 tr\u00f4ng v\u1eabn kh\u00f4ng gi\u1ed1ng &#8220;\u1ea3nh th\u1ef1c \/<em> photorealistic<\/em>&#8220;. Trong tr\u01b0\u1eddng h\u1ee3p \u0111\u00f3, b\u1ea1n n\u00ean s\u1eed d\u1ee5ng \u1ea3nh \u0111\u1ecbnh d\u1ea1ng raster nh\u01b0 GIF, PNG, JPEG ho\u1eb7c m\u1ed9t \u0111\u1ecbnh d\u1ea1ng m\u1edbi h\u01a1n nh\u01b0 JPEG-XR v\u00e0 <a href=\"https:\/\/kiencang.net\/dinh-dang-anh-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebP<\/a>.<\/p>\n\n\n\n<p>\u1ea2nh raster kh\u00f4ng c\u00f3 thu\u1ed9c t\u00ednh h\u1ea5p d\u1eabn nh\u01b0 \u1ea3nh vector, \u0111\u1ea5y l\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i v\u00e0 thu ph\u00f3ng \u0111\u1ed9c l\u1eadp &#8211; khi b\u1ea1n ph\u00f3ng to \u1ea3nh raster b\u1ea1n s\u1ebd th\u1ea5y h\u00ecnh \u0111\u1ed3 h\u1ecda b\u1ecb r\u00e1ch v\u00e0 m\u1edd v\u1ee1 (<em>jagged and blurry<\/em>). V\u00ec l\u00fd do \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n l\u01b0u nhi\u1ec1u phi\u00ean b\u1ea3n c\u1ee7a \u1ea3nh raster \u1edf c\u00e1c \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh kh\u00e1c nhau \u0111\u1ec3 t\u1ea1o ra tr\u1ea3i nghi\u1ec7m t\u1ed1i \u01b0u cho ng\u01b0\u1eddi d\u00f9ng (WordPress th\u01b0\u1eddng ch\u1ee7 \u0111\u1ed9ng l\u00e0m \u0111i\u1ec1u n\u00e0y, khi b\u1ea1n up m\u1ed9t \u1ea3nh l\u1edbn l\u00ean n\u00f3 s\u1ebd t\u1ea1o ra nhi\u1ec1u phi\u00ean b\u1ea3n \u1ea3nh nh\u1ecf h\u01a1n cho c\u00e1c k\u00edch c\u1ee1 m\u00e0n h\u00ecnh b\u00e9 \u0111\u1ec3 hi\u1ec3n th\u1ecb t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tac-d\u1ed9ng-c\u1ee7a-man-hinh-co-d\u1ed9-phan-gi\u1ea3i-cao\"><span class=\"ez-toc-section\" id=\"3_Tac_dong_cua_man_hinh_co_do_phan_giai_cao\"><\/span>#3. T\u00e1c \u0111\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>M\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao c\u00f3 nhi\u1ec1u pixel c\u1ee7a thi\u1ebft b\u1ecb tr\u00ean m\u1ed7i pixel CSS.<\/li><li>H\u00ecnh \u1ea3nh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao y\u00eau c\u1ea7u s\u1ed1 l\u01b0\u1ee3ng pixel v\u00e0 bytes cao h\u01a1n \u0111\u00e1ng k\u1ec3.<\/li><li>K\u1ef9 thu\u1eadt t\u1ed1i \u01b0u h\u00f3a \u1ea3nh l\u00e0 nh\u01b0 nhau b\u1ea5t k\u1ec3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i.<\/li><\/ul>\n\n\n\n<p>Khi ch\u00fang ta n\u00f3i v\u1ec1 \u1ea3nh pixel, ch\u00fang ta c\u1ea7n ph\u00e2n bi\u1ec7t gi\u1eefa c\u00e1c lo\u1ea1i \u0111i\u1ec3m \u1ea3nh kh\u00e1c nhau: CSS pixel v\u00e0 pixel c\u1ee7a thi\u1ebft b\u1ecb. M\u1ed9t pixel CSS ri\u00eang c\u00f3 th\u1ec3 bao g\u1ed3m nhi\u1ec1u pixel thi\u1ebft b\u1ecb &#8211; l\u1ea5y th\u00ed d\u1ee5, pixel CSS ri\u00eang c\u00f3 th\u1ec3 t\u01b0\u01a1ng \u1ee9ng tr\u1ef1c ti\u1ebfp (<em>correspond directly<\/em>) v\u1edbi m\u1ed9t \u0111i\u1ec3m \u1ea3nh thi\u1ebft b\u1ecb, ho\u1eb7c c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi nhi\u1ec1u \u0111i\u1ec3m \u1ea3nh c\u1ee7a thi\u1ebft b\u1ecb. V\u1eady v\u1ea5n \u0111\u1ec1 \u1edf \u0111\u00e2y l\u00e0 g\u00ec? V\u00e2ng, c\u00e0ng nhi\u1ec1u \u0111i\u1ec3m \u1ea3nh thi\u1ebft b\u1ecb c\u00f3, c\u00e1c chi ti\u1ebft hi\u1ec3n th\u1ecb n\u1ed9i dung t\u1ed1t h\u01a1n tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/css-vs-pixels-cua-thiet-bi.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/css-vs-pixels-cua-thiet-bi.png\" alt=\"T\u00e1c \u0111\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao \u0111\u1ebfn h\u00ecnh \u1ea3nh\" class=\"wp-image-5195\"\/><\/a><\/figure><\/div>\n\n\n<p>M\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao (HiDPI) t\u1ea1o ra k\u1ebft qu\u1ea3 tr\u00f4ng \u0111\u1eb9p h\u01a1n, nh\u01b0ng c\u00f3 m\u1ed9t s\u1ef1 \u0111\u00e1nh \u0111\u1ed5i r\u00f5 r\u00e0ng: h\u00ecnh \u1ea3nh c\u1ee7a ch\u00fang ta c\u1ea7n nhi\u1ec1u chi ti\u1ebft h\u01a1n \u0111\u1ec3 t\u1eadn d\u1ee5ng l\u1ee3i th\u1ebf c\u1ee7a thi\u1ebft b\u1ecb c\u00f3 s\u1ed1 l\u01b0\u1ee3ng pixel cao h\u01a1n. Tin t\u1ed1t l\u00e0, \u1ea3nh vector ho\u00e0n to\u00e0n l\u00fd t\u01b0\u1edfng cho nhi\u1ec7m v\u1ee5 n\u00e0y, khi ch\u00fang c\u00f3 th\u1ec3 xu\u1ea5t ra b\u1ea5t c\u1ee9 \u0111\u1ed9 ph\u00e2n gi\u1ea3i n\u00e0o m\u00e0 <em>\u1ea3nh v\u1eabn s\u1eafc n\u00e9t<\/em> &#8211; ch\u00fang ta c\u00f3 th\u1ec3 ph\u1ea3i ch\u1ecbu chi ph\u00ed x\u1eed l\u00fd cao h\u01a1n \u0111\u1ec3 xu\u1ea5t chi ti\u1ebft \u1ea3nh c\u00f3 chi ti\u1ebft t\u1ed1t h\u01a1n, nh\u01b0ng \u1ea3nh c\u01a1 b\u1ea3n v\u1eabn v\u1eady v\u00e0 kh\u00f4ng b\u1ecb ph\u1ee5 thu\u1ed9c v\u00e0o \u0111\u1ed9 ph\u00e2n gi\u1ea3i.<\/p>\n\n\n\n<p>Tuy nhi\u00ean ng\u01b0\u1ee3c l\u1ea1i, c\u00e1c \u1ea3nh raster \u0111\u1eb7t ra th\u1eed th\u00e1ch l\u1edbn h\u01a1n,&nbsp;b\u1edfi v\u00ec ch\u00fang m\u00e3 h\u00f3a d\u1eef li\u1ec7u \u1ea3nh d\u1ef1a tr\u00ean t\u1eebng pixel c\u01a1 b\u1ea3n. V\u00ec th\u1ebf, s\u1ed1 l\u01b0\u1ee3ng pixel l\u1edbn h\u01a1n, dung l\u01b0\u1ee3ng cho \u1ea3nh raster c\u0169ng l\u1edbn h\u01a1n. L\u1ea5y th\u00ed d\u1ee5, h\u00e3y xem x\u00e9t s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c b\u1ee9c h\u00ecnh hi\u1ec3n th\u1ecb \u1edf 100 x 100 (CSS) pixel:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u0110\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh<\/strong><\/td><td><strong>T\u1ed5ng s\u1ed1 pixel<\/strong><\/td><td><strong>File ch\u01b0a n\u00e9n (4 byte m\u1ed7i pixel)<\/strong><\/td><\/tr><tr><td>1x<\/td><td>100 x 100 = 10 000<\/td><td>40 000 bytes<\/td><\/tr><tr><td>2x<\/td><td>100 x 100 x 4 = 40 000<\/td><td>160 000 bytes<\/td><\/tr><tr><td>3x<\/td><td>100 x 100 x 9 = 90 000<\/td><td>360 000 bytes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Khi \u0111\u1ed9 ph\u00e2n gi\u1ea3i c\u1ee7a m\u00e0n h\u00ecnh v\u1eadt l\u00fd t\u0103ng g\u1ea5p \u0111\u00f4i, t\u1ed5ng s\u1ed1 l\u01b0\u1ee3ng pixel s\u1ebd t\u0103ng g\u1ea5p b\u1ed1n: nh\u00e2n \u0111\u00f4i s\u1ed1 l\u01b0\u1ee3ng pixel theo chi\u1ec1u r\u1ed9ng, c\u0169ng l\u00e0 g\u1ea5p \u0111\u00f4i s\u1ed1 l\u01b0\u1ee3ng pixel theo chi\u1ec1u cao. V\u00ec v\u1eady, m\u00e0n h\u00ecnh g\u1ea5p \u0111\u00f4i kh\u00f4ng ch\u1ec9 l\u00e0 nh\u00e2n hai, s\u1ed1 l\u01b0\u1ee3ng pixel y\u00eau c\u1ea7u l\u00e0 g\u1ea5p b\u1ed1n l\u1ea7n!<\/p>\n\n\n\n<p>V\u1eady th\u00ec \u0111i\u1ec1u n\u00e0y c\u00f3 \u00fd ngh\u0129a g\u00ec trong th\u1ef1c t\u1ebf? M\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao cho ph\u00e9p ch\u00fang ta t\u1ea1o ra c\u00e1c \u1ea3nh \u0111\u1eb9p h\u01a1n, c\u00e1i c\u00f3 th\u1ec3 l\u00e0 t\u00ednh n\u0103ng quan tr\u1ecdng c\u1ee7a s\u1ea3n ph\u1ea9m. D\u1ea7u v\u1eady, m\u00e0n h\u00ecnh \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao c\u0169ng y\u00eau c\u1ea7u \u1ea3nh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao: l\u1ef1a ch\u1ecdn \u1ea3nh vector b\u1ea5t c\u1ee9 khi n\u00e0o c\u00f3 th\u1ec3 \u0111\u1ec3 ch\u00fang \u0111\u1ed9c l\u1eadp v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh v\u00e0 lu\u00f4n lu\u00f4n t\u1ea1o ra \u1ea3nh s\u1eafc n\u00e9t, v\u00e0 n\u1ebfu y\u00eau c\u1ea7u \u1ea3nh raster, t\u1ea1o v\u00e0 t\u1ed1i \u01b0u \u0111a d\u1ea1ng k\u00edch c\u1ee1 \u1ea3nh v\u1edbi s\u1ef1 gi\u00fap \u0111\u1ee1 c\u1ee7a thu\u1ed9c t\u00ednh&nbsp;<code>srcset<\/code> v\u00e0 th\u1ebb&nbsp;<code>picture<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"t\u1ed1i-\u01b0u-\u1ea3nh-vector\"><span class=\"ez-toc-section\" id=\"4_Toi_uu_anh_vector\"><\/span>#4. T\u1ed1i \u01b0u \u1ea3nh vector<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>SVG l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh d\u1ef1a tr\u00ean XML.<\/li><li>File SVG n\u00ean \u0111\u01b0\u1ee3c t\u1ed1i gi\u1ea3n \u0111\u1ec3 gi\u1ea3m k\u00edch c\u1ee1.<\/li><li>File SVG n\u00ean \u0111\u01b0\u1ee3c <a href=\"https:\/\/kiencang.net\/bat-nen-gzip\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u00e9n b\u1eb1ng GZIP<\/a>.<\/li><\/ul>\n\n\n\n<p>T\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i \u0111\u1ec1u h\u1ed7 tr\u1ee3 \u1ea3nh Scalable Vector Graphics (SVG), l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh d\u1ef1a tr\u00ean XML v\u1edbi hai kh\u00eda c\u1ea1nh \u0111\u1ed3 h\u1ecda: ch\u00fang ta c\u00f3 th\u1ec3 nh\u00fang m\u00e3 \u0111\u00e1nh d\u1ea5u SVG tr\u1ef1c ti\u1ebfp tr\u00ean trang, ho\u1eb7c nh\u01b0 m\u1ed9t ngu\u1ed3n b\u00ean ngo\u00e0i. Ng\u01b0\u1ee3c l\u1ea1i, m\u1ed9t file SVG c\u00f3 th\u1ec3 t\u1ea1o b\u1edfi h\u1ea7u h\u1ebft c\u00e1c ph\u1ea7n m\u1ec1m v\u1ebd vector, ho\u1eb7c th\u1ee7 c\u00f4ng v\u00e0 tr\u1ef1c ti\u1ebfp b\u1edfi ph\u1ea7n m\u1ec1m so\u1ea1n th\u1ea3o \u01b0a th\u00edch c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<pre class=\"wp-block-code devsite-code-button-clone\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --&gt;\n&lt;svg version=\"1.2\" baseProfile=\"tiny\" id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n&nbsp; &nbsp;x=\"0px\" y=\"0px\" viewBox=\"0 0 612 792\" xml:space=\"preserve\"&gt;\n&lt;g id=\"XMLID_1_\"&gt;\n&nbsp; &lt;g&gt;\n&nbsp; &nbsp; &lt;circle fill=\"red\" stroke=\"black\" stroke-width=\"2\" stroke-miterlimit=\"10\" cx=\"50\" cy=\"50\" r=\"40\"\/&gt;\n&nbsp; &lt;\/g&gt;\n&lt;\/g&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5 tr\u00ean render m\u1ed9t h\u00ecnh tr\u00f2n \u0111\u01a1n gi\u1ea3n v\u1edbi m\u00e0u \u0111\u01b0\u1eddng vi\u1ec1n l\u00e0 m\u00e0u \u0111en v\u00e0 m\u00e0u \u0111\u1ecf cho background v\u00e0 n\u00f3 \u0111\u01b0\u1ee3c xu\u1ea5t ra t\u1eeb Adobe Illustrator. Nh\u01b0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y, n\u00f3 bao g\u1ed3m r\u1ea5t nhi\u1ec1u si\u00eau d\u1eef li\u1ec7u (metadata), nh\u01b0 th\u00f4ng tin layer, comments, v\u00e0 kh\u00f4ng gian t\u00ean XML, \u0111\u00e2y l\u00e0 nh\u1eefng c\u00e1i th\u01b0\u1eddng kh\u00f4ng c\u1ea7n thi\u1ebft \u0111\u1ec3 render trong tr\u00ecnh duy\u1ec7t. V\u00ec v\u1eady, s\u1ebd lu\u00f4n lu\u00f4n l\u00e0 \u00fd t\u01b0\u1edfng t\u1ed1t \u0111\u1ec3 gi\u1ea3m thi\u1ec3u (<em>minify<\/em>) file SVG c\u1ee7a b\u1ea1n th\u00f4ng qua c\u00f4ng c\u1ee5 ki\u1ec3u nh\u01b0 <a href=\"https:\/\/github.com\/svg\/svgo\" target=\"_blank\" rel=\"noreferrer noopener\">svgo<\/a>.<\/p>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, <strong>svgo gi\u1ea3m k\u00edch c\u1ee1 c\u1ee7a file SVG \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi Illustrator t\u1edbi 58%<\/strong>, gi\u1ea3m n\u00f3 t\u1eeb 470 xu\u1ed1ng c\u00f2n 199 bytes. H\u01a1n n\u1eefa, b\u1edfi v\u00ec SVG l\u00e0 \u0111\u1ecbnh d\u1ea1ng d\u1ef1a tr\u00ean XML, ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng <em>n\u00e9n GZIP<\/em> \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng truy\u1ec1n t\u1ea3i &#8211; h\u00e3y ch\u1eafc ch\u1eafn m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh \u0111\u1ec3 c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n SVG.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"t\u1ed1i-\u01b0u-hoa-\u1ea3nh-raster\"><span class=\"ez-toc-section\" id=\"5_Toi_uu_hoa_anh_raster\"><\/span>#5. T\u1ed1i \u01b0u h\u00f3a \u1ea3nh raster<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>\u1ea2nh raster l\u00e0 m\u1ed9t d\u1ea1ng l\u01b0\u1edbi c\u00e1c pixels (<em>grid of pixels<\/em>).<\/li><li>M\u1ed7i pixel \u0111\u01b0\u1ee3c m\u00e3 h\u00f3a th\u00f4ng tin m\u00e0u s\u1eafc v\u00e0 thu\u1ed9c t\u00ednh trong su\u1ed1t.<\/li><li>C\u00e1c b\u1ed9 n\u00e9n \u1ea3nh s\u1eed d\u1ee5ng \u0111a d\u1ea1ng c\u00e1c k\u1ef9 thu\u1eadt \u0111\u1ec3 gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng b\u00edt y\u00eau c\u1ea7u cho m\u1ed7i pixel \u0111\u1ec3 t\u1eeb \u0111\u1ea5y gi\u1ea3m dung l\u01b0\u1ee3ng c\u1ee7a c\u1ea3 b\u1ee9c h\u00ecnh.<\/li><\/ul>\n\n\n\n<p>M\u1ed9t \u1ea3nh raster \u0111\u01a1n gi\u1ea3n l\u00e0 l\u01b0\u1edbi 2 chi\u1ec1u c\u1ee7a t\u1eebng &#8220;pixels&#8221; c\u1ee5 th\u1ec3 &#8211; l\u1ea5y th\u00ed d\u1ee5, m\u1ed9t \u1ea3nh 100 x 100 pixel l\u00e0 chu\u1ed7i (<em>sequence<\/em>) c\u1ee7a 10 000 pixel. Ng\u01b0\u1ee3c l\u1ea1i, m\u1ed7i pixel ch\u1ee9a c\u00e1c gi\u00e1 tr\u1ecb RGBA: <span style=\"color: #ff0000;\">(R) k\u00eanh m\u00e0u \u0111\u1ecf<\/span>, <span style=\"color: #008000;\">(G) k\u00eanh m\u00e0u xanh l\u00e1<\/span>, <span style=\"color: #0000ff;\">(B) k\u00eanh m\u00e0u xanh da tr\u1eddi<\/span>, v\u00e0 <strong>(A) k\u00eanh alpha (thu\u1ed9c t\u00ednh trong su\u1ed1t)<\/strong>.<\/p>\n\n\n\n<p>B\u00ean trong, tr\u00ecnh duy\u1ec7t ph\u00e2n b\u1ed5 (<em>allocates<\/em>) 256 gi\u00e1 tr\u1ecb (s\u1eafc th\u00e1i) cho m\u1ed7i k\u00eanh, c\u00e1i n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n d\u1ecbch sang d\u1ea1ng 8 b\u00edt cho m\u1ed7i k\u00eanh (2 ^ 8 = 256), v\u00e0 <strong>4 byte cho m\u1ed7i pixel<\/strong> (4 k\u00eanh x 8 b\u00edt\/k\u00eanh = 32 b\u00edt\/pixel = 4 byte\/pixel). V\u00ec l\u00fd do \u0111\u00f3, n\u1ebfu ch\u00fang ta bi\u1ebft \u0111\u1ed9 ph\u00e2n gi\u1ea3i c\u1ee7a l\u01b0\u1edbi ch\u00fang ta c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00ednh to\u00e1n k\u00edch th\u01b0\u1edbc file:<\/p>\n\n\n\n<ul><li>\u1ea2nh 100 x 100px g\u1ed3m c\u00f3 10 000 pixel.<\/li><li>10 000 pixel x 4 bytes = 40 000 bytes.<\/li><li>40 000 bytes \/ 1024 = 39 KB.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>L\u01b0u \u00fd: cho d\u00f9 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh s\u1eed d\u1ee5ng l\u00e0 g\u00ec \u0111i ch\u0103ng n\u1eefa khi d\u00f9ng v\u00e0o vi\u1ec7c truy\u1ec1n t\u1ea3i d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 t\u1edbi m\u00e1y kh\u00e1ch, khi \u1ea3nh \u0111\u01b0\u1ee3c gi\u1ea3i m\u00e3 b\u1edfi tr\u00ecnh duy\u1ec7t, m\u1ed7i pixel lu\u00f4n lu\u00f4n chi\u1ebfm 4 bytes c\u1ee7a b\u1ed9 nh\u1edb. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0 h\u1ea1n ch\u1ebf quan tr\u1ecdng cho c\u00e1c b\u1ee9c \u1ea3nh l\u1edbn v\u00e0 c\u00e1c thi\u1ebft b\u1ecb kh\u00f4ng c\u00f3 kh\u1ea3 n\u0103ng cung c\u1ea5p b\u1ed9 nh\u1edb cao &#8211; l\u1ea5y th\u00ed d\u1ee5 nh\u01b0 c\u00e1c thi\u1ebft b\u1ecb \u0111i\u1ec7n tho\u1ea1i c\u1ea5p th\u1ea5p (low-end mobile device).<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u0110\u1ed9 ph\u00e2n gi\u1ea3i<\/strong><\/td><td><strong>Pixel<\/strong><\/td><td><strong>K\u00edch c\u1ee1 file<\/strong><\/td><\/tr><tr><td>100 x 100<\/td><td>10 000<\/td><td>39 KB<\/td><\/tr><tr><td>200 x 200<\/td><td>40 000<\/td><td>156 KB<\/td><\/tr><tr><td>300 x 300<\/td><td>90 000<\/td><td>351 KB<\/td><\/tr><tr><td>500 x 500<\/td><td>250 000<\/td><td>977 KB<\/td><\/tr><tr><td>800 x 800<\/td><td>640 000<\/td><td>2500 KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>39KB cho \u1ea3nh c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i 100 x 100 pixel c\u00f3 v\u1ebb nh\u01b0 kh\u00f4ng ph\u1ea3i l\u00e0 v\u1ea5n \u0111\u1ec1 l\u1edbn, nh\u01b0ng <em>k\u00edch c\u1ee1 file t\u0103ng nhanh ch\u00f3ng v\u1edbi c\u00e1c h\u00ecnh l\u1edbn h\u01a1n<\/em> v\u00e0 l\u00e0m th\u00e0nh ph\u1ea7n \u1ea3nh tr\u1edf n\u00ean ch\u1eadm v\u00e0 \u0111\u1eaft \u0111\u1ecf h\u01a1n \u0111\u1ec3 t\u1ea3i v\u1ec1 (n\u1ebfu b\u1ea1n n\u00e0o d\u00f9ng 3G \u0111\u1ec3 truy c\u1eadp Internet s\u1ebd hi\u1ec3u gi\u00e1 ti\u1ec1n kh\u00f4ng r\u1ebb). Th\u1eadt may m\u1eafn, nh\u1eefng g\u00ec ch\u00fang ta v\u1eeba m\u00f4 t\u1ea3 l\u00e0 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh &#8220;ch\u01b0a \u0111\u01b0\u1ee3c n\u00e9n&#8221;. Ch\u00fang ta c\u00f3 th\u1ec3 l\u00e0m g\u00ec \u0111\u1ec3 gi\u1ea3m k\u00edch c\u1ee1 file \u1ea3nh?<\/p>\n\n\n\n<p>M\u1ed9t chi\u1ebfn l\u01b0\u1ee3c \u0111\u01a1n gi\u1ea3n l\u00e0 gi\u1ea3m &#8220;\u0111\u1ed9 s\u00e2u b\u00edt&#8221; c\u1ee7a \u1ea3nh t\u1eeb 8 b\u00edt m\u1ed7i k\u00eanh xu\u1ed1ng b\u1ea3ng m\u00e0u nh\u1ecf h\u01a1n: 8 b\u00edt m\u1ed7i k\u00eanh cho ta 256 gi\u00e1 tr\u1ecb m\u1ed7i k\u00eanh v\u00e0 16 777 216 m\u00e0u s\u1eafc t\u1ea5t c\u1ea3. N\u1ebfu ch\u00fang ta gi\u1ea3m b\u1ea3ng m\u00e0u xu\u1ed1ng c\u00f2n 256 m\u00e0u th\u00ec sao? Th\u1ebf th\u00ec ch\u00fang ta s\u1ebd ch\u1ec9 c\u1ea7n 8 b\u00edt t\u1ea5t c\u1ea3 cho k\u00eanh RGB v\u00e0 ngay l\u1eadp t\u1ee9c ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c hai byte cho m\u1ed7i pixel&nbsp;&#8211; t\u1ee9c l\u00e0 50% gi\u00e1 tr\u1ecb n\u00e9n ti\u1ebft ki\u1ec7m so v\u1edbi \u0111\u1ecbnh d\u1ea1ng g\u1ed1c c\u00f3 4 byte.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/artifacts.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/artifacts.png\" alt=\"C\u00e1c \u1ea3nh v\u1edbi s\u1ed1 l\u01b0\u1ee3ng bit m\u00e0u kh\u00e1c nhau\" class=\"wp-image-5197\"\/><\/a><\/figure><\/div>\n\n\n<p>L\u01b0u \u00fd: t\u1eeb tr\u00e1i qua ph\u1ea3i (PNG): 32-b\u00edt (16 tri\u1ec7u m\u00e0u), 7-b\u00edt (128 m\u00e0u), 5-b\u00edt (32 m\u00e0u). C\u00e1c c\u1ea3nh ph\u1ee9c t\u1ea1p v\u1edbi m\u00e0u s\u1eafc chuy\u1ec3n \u0111\u1ed5i (gradients, b\u1ea7u tr\u1eddi, v\u00e2n v\u00e2n) y\u00eau c\u1ea7u b\u1ea3ng m\u00e0u l\u1edbn \u0111\u1ec3 tr\u00e1nh c\u1ea3nh kh\u00f4ng t\u1ef1 nhi\u00ean (<em>visual artifacts<\/em>) nh\u01b0 c\u00e1c pixel h\u00ecnh \u1ea3nh b\u1ea7u tr\u1eddi \u1edf d\u1ea1ng 5 b\u00edt. N\u00f3i c\u00e1ch kh\u00e1c, n\u1ebfu \u1ea3nh ch\u1ec9 s\u1eed d\u1ee5ng v\u00e0i m\u00e0u, th\u00ec b\u1ea3ng m\u00e0u l\u1edbn \u0111\u01a1n gi\u1ea3n l\u00e0 \u0111ang ph\u00ed ph\u1ea1m nh\u1eefng b\u00edt qu\u00fd gi\u00e1!<\/p>\n\n\n\n<p>Ti\u1ebfp theo, m\u1ed9t khi ch\u00fang ta \u0111\u00e3 t\u1ed1i \u01b0u h\u00f3a d\u1eef li\u1ec7u l\u01b0u trong t\u1eebng pixel c\u1ee5 th\u1ec3, ch\u00fang ta c\u00f3 th\u1ec3 th\u00f4ng minh h\u01a1n v\u00e0 ch\u00fa \u00fd v\u00e0o c\u00e1c pixels g\u1ea7n \u0111\u00f3: h\u00f3a ra, r\u1ea5t nhi\u1ec1u b\u1ee9c \u1ea3nh, v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 \u1ea3nh ch\u1ee5p, c\u00e1c pixel g\u1ea7n k\u1ec1 c\u00f3 m\u00e0u t\u01b0\u01a1ng t\u1ef1 nhau &#8211; l\u1ea5y th\u00ed d\u1ee5, b\u1ea7u tr\u1eddi l\u00e0 l\u1eb7p l\u1ea1i k\u1ebft c\u1ea5u. S\u1eed d\u1ee5ng th\u00f4ng tin n\u00e0y \u0111\u1ec3 tr\u00ecnh n\u00e9n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng l\u1ee3i th\u1ebf &#8220;m\u00e3 h\u00f5a delta&#8221; thay v\u00ec l\u01b0u gi\u1eef t\u1eebng gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 cho m\u1ed7i pixel, ch\u00fang ta c\u00f3 th\u1ec3 <strong>l\u01b0u tr\u1eef s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c pixel k\u1ec1 nhau<\/strong>: n\u1ebfu c\u00e1c pixel li\u1ec1n k\u1ec1 gi\u1ed1ng y nhau, th\u00ec delta l\u00e0 &#8220;zero&#8221;, v\u00e0 ch\u00fang ta ch\u1ec9 c\u1ea7n l\u01b0u duy nh\u1ea5t m\u1ed9t b\u00edt! Nh\u01b0ng t\u1ea1i sao l\u1ea1i ch\u1ec9 d\u1eebng \u1edf \u0111\u00e2y th\u00f4i&#8230;<\/p>\n\n\n\n<p>M\u1eaft ng\u01b0\u1eddi c\u00f3 m\u1ee9c \u0111\u1ed9 nh\u1ea1y c\u1ea3m kh\u00e1c nhau&nbsp;v\u1edbi c\u00e1c m\u00e0u kh\u00e1c nhau: ch\u00fang ta c\u00f3 th\u1ec3 t\u1ed1i \u01b0u vi\u1ec7c m\u00e3 h\u00f3a m\u00e0u s\u1eafc \u0111\u1ec3 dung l\u01b0\u1ee3ng cho n\u00f3 gi\u1ea3m xu\u1ed1ng ho\u1eb7c t\u0103ng l\u00ean cho t\u1eebng m\u00e0u. C\u00e1c pixel &#8220;k\u1ebf c\u1eadn&#8221; c\u00f3 m\u1eabu l\u00e0 l\u01b0\u1edbi hai chi\u1ec1u, ngh\u0129a l\u00e0 m\u1ed7i pixel c\u00f3 nhi\u1ec1u h\u00e0ng x\u00f3m: ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ef1c t\u1ebf n\u00e0y \u0111\u1ec3 n\u00e2ng cao kh\u1ea3 n\u0103ng m\u00e3 h\u00f3a delta. Thay v\u00ec nh\u00ecn v\u00e0o ngay l\u1eadp t\u1ee9c nh\u1eefng ng\u01b0\u1eddi h\u00e0ng x\u00f3m c\u1ee7a m\u1ed7i pixel, ch\u00fang ta c\u00f3 th\u1ec3 nh\u00ecn v\u00e0o c\u00e1c kh\u1ed1i l\u1edbn h\u01a1n c\u1ee7a pixel k\u1ebf c\u1eadn v\u00e0 m\u00e3 h\u00f3a c\u00e1c kh\u1ed1i kh\u00e1c nhau v\u1edbi c\u00e1c thi\u1ebft l\u1eadp kh\u00e1c nhau. V\u00e0 c\u1ee9 ti\u1ebfp t\u1ee5c nh\u01b0 v\u1eady&#8230;<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 n\u00f3i, t\u1ed1i \u01b0u h\u00f3a \u1ea3nh ng\u00e0y c\u00e0ng ph\u1ee9c t\u1ea1p (ho\u1eb7c \u1edf kh\u00eda c\u1ea1nh h\u00e0i h\u01b0\u1edbc, ph\u1ee5 thu\u1ed9c v\u00e0o quan \u0111i\u1ec3m c\u1ee7a b\u1ea1n), v\u00e0 \u0111\u00e2y l\u00e0 l\u0129nh v\u1ef1c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a h\u1ecdc thu\u1eadt v\u00e0 nghi\u00ean c\u1ee9u th\u01b0\u01a1ng m\u1ea1i. C\u00e1c b\u1ee9c h\u00ecnh chi\u1ebfm nhi\u1ec1u d\u1eef li\u1ec7u, do v\u1eady s\u1ebd r\u1ea5t \u0111\u00e1ng gi\u00e1 n\u1ebfu ph\u00e1t tri\u1ec3n \u0111\u01b0\u1ee3c c\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh t\u1ed1t h\u01a1n! Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n \u0111ang t\u00f2 m\u00f2, h\u00e3y \u0111i \u0111\u1ebfn <a href=\"https:\/\/en.wikipedia.org\/wiki\/Image_compression\" target=\"_blank\" rel=\"noreferrer noopener\">trang n\u00e0y tr\u00ean Wikipedia<\/a>, ho\u1eb7c ki\u1ec3m tra <a href=\"https:\/\/kiencang.net\/cac-ky-thuat-nen-anh-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c k\u1ef9 thu\u1eadt n\u00e9n \u1ea3nh WebP<\/a> \u0111\u1ec3 t\u00ecm ki\u1ebfm c\u00e1c v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh.<\/p>\n\n\n\n<p>V\u00ec th\u1ebf, m\u1ed9t l\u1ea7n n\u1eefa, t\u1ea5t c\u1ea3 ch\u00fang \u0111\u1ec1u tuy\u1ec7t v\u1eddi, nh\u01b0ng c\u0169ng r\u1ea5t h\u00e0n l\u00e2m: l\u00e0m th\u1ebf n\u00e0o n\u00f3 gi\u00fap ch\u00fang ta t\u1ed1i \u01b0u c\u00e1c \u1ea3nh tr\u00ean trang web? \u0110\u00fang v\u1eady, ch\u00fang ta ch\u1eafc ch\u1eafn kh\u00f4ng c\u00f3 nhi\u1ec7m v\u1ee5 s\u00e1ng t\u1ea1o ra c\u00e1c k\u1ef9 thu\u1eadt n\u00e9n m\u1edbi, nh\u01b0ng \u0111i\u1ec1u quan tr\u1ecdng l\u00e0 hi\u1ec3u c\u00e1c v\u1ea5n \u0111\u1ec1 li\u00ean quan: c\u00e1c pixel RGBA, \u0111\u1ed9 s\u00e2u c\u1ee7a b\u00edt, v\u00e0 nhi\u1ec1u k\u1ef9 thu\u1eadt t\u1ed1i \u01b0u kh\u00e1c nhau. T\u1ea5t c\u1ea3 c\u00e1c \u00fd t\u01b0\u1edfng n\u00e0y r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 hi\u1ec3u v\u00e0 gi\u1eef trong \u0111\u1ea7u tr\u01b0\u1edbc khi ch\u00fang ta \u0111i s\u00e2u v\u00e0o th\u1ea3o lu\u1eadn c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh raster kh\u00e1c nhau.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"nen-\u1ea3nh-m\u1ea5t-d\u1eef-li\u1ec7u-va-khong-m\u1ea5t-d\u1eef-li\u1ec7u\"><span class=\"ez-toc-section\" id=\"6_Nen_anh_mat_du_lieu_va_khong_mat_du_lieu\"><\/span>#6. N\u00e9n \u1ea3nh m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>Do c\u00e1ch th\u1ee9c l\u00e0m vi\u1ec7c c\u1ee7a m\u1eaft, \u1ea3nh l\u00e0 \u1ee9ng vi\u00ean tuy\u1ec7t v\u1eddi cho n\u00e9n \u1ea3nh m\u1ea5t d\u1eef li\u1ec7u.<\/li><li>N\u00e9n \u1ea3nh c\u00f3 hai ki\u1ec3u l\u00e0 m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u.<\/li><li>S\u1ef1 kh\u00e1c bi\u1ec7t trong \u0111\u1ecbnh d\u1ea1ng \u1ea3nh l\u00e0 l\u00fd do d\u1eabn \u0111\u1ebfn s\u1ef1 kh\u00e1c bi\u1ec7t trong c\u00e1ch c\u00e1c thu\u1eadt to\u00e1n m\u1ea5t v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a \u1ea3nh.<\/li><li>Kh\u00f4ng c\u00f3 \u0111\u1ecbnh d\u1ea1ng duy nh\u1ea5t n\u00e0o t\u1ed1t nh\u1ea5t ho\u1eb7c &#8220;thi\u1ebft l\u1eadp ch\u1ea5t l\u01b0\u1ee3ng&#8221; cho t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh: m\u1ed7i s\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa c\u00e1c ki\u1ec3u n\u00e9n c\u1ee5 th\u1ec3 v\u00e0 n\u1ed9i dung \u1ea3nh t\u1ea1o ra m\u1ed9t \u0111\u1ea7u ra duy nh\u1ea5t.<\/li><\/ul>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi m\u1ed9t s\u1ed1 lo\u1ea1i d\u1eef li\u1ec7u nh\u1ea5t \u0111\u1ecbnh, nh\u01b0 ki\u1ec3u m\u00e3 ngu\u1ed3n c\u1ee7a trang, ho\u1eb7c m\u1ed9t t\u1ec7p tin th\u1ef1c thi, \u0111i\u1ec1u quan tr\u1ecdng l\u00e0 n\u00e9n kh\u00f4ng \u0111\u01b0\u1ee3c thay \u0111\u1ed5i ho\u1eb7c m\u1ea5t b\u1ea5t k\u1ef3&nbsp;th\u00f4ng tin g\u1ed1c n\u00e0o: ch\u1ec9 c\u1ea7n m\u1ed9t b\u00edt d\u1eef li\u1ec7u b\u1ecb m\u1ea5t ho\u1eb7c sai c\u00f3 th\u1ec3 thay \u0111\u1ed5i to\u00e0n b\u1ed9 \u00fd ngh\u0129a c\u1ee7a n\u1ed9i dung ho\u1eb7c t\u1ec7 h\u01a1n, ph\u00e1 v\u1ee1 n\u00f3 ho\u00e0n to\u00e0n. V\u1edbi m\u1ed9t s\u1ed1 \u0111\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u kh\u00e1c, nh\u01b0 \u1ea3nh, \u00e2m thanh v\u00e0 video, n\u00f3 c\u00f3 th\u1ec3 v\u1eabn \u0111\u01b0\u1ee3c ch\u1ea5p nh\u1eadn ho\u00e0n to\u00e0n khi ph\u00e2n ph\u1ed1i \u0111\u1ea1i di\u1ec7n &#8220;g\u1ea7n \u0111\u00fang&#8221; c\u1ee7a d\u1eef li\u1ec7u g\u1ed1c ban \u0111\u1ea7u.<\/p>\n\n\n\n<p>Trong th\u1ef1c t\u1ebf, do c\u00e1ch th\u1ee9c l\u00e0m vi\u1ec7c c\u1ee7a m\u1eaft, ch\u00fang ta c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf m\u1ed9t s\u1ed1 th\u00f4ng tin c\u1ee7a m\u1ed7i pixel \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng k\u00edch c\u1ee1 \u1ea3nh &#8211; l\u1ea5y v\u00ed d\u1ee5, m\u1eaft c\u1ee7a ch\u00fang ta c\u00f3 m\u1ee9c \u0111\u1ed9 nh\u1ea1y c\u1ea3m kh\u00e1c nhau v\u1edbi c\u00e1c m\u00e0u kh\u00e1c nhau, \u0111i\u1ec1u \u0111\u1ea5y c\u00f3 ngh\u0129a l\u00e0 ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng s\u1ed1 l\u01b0\u1ee3ng b\u00edt \u00edt h\u01a1n \u0111\u1ec3 m\u00e3 h\u00f3a m\u1ed9t s\u1ed1 m\u00e0u s\u1eafc. V\u00ec v\u1eady, ch\u01b0\u01a1ng tr\u00ecnh t\u1ed1i \u01b0u h\u00f3a \u1ea3nh th\u00f4ng th\u01b0\u1eddng bao g\u1ed3m hai b\u01b0\u1edbc t\u1ed1i \u01b0u:<\/p>\n\n\n\n<ol><li>\u1ea2nh \u0111\u01b0\u1ee3c x\u1eed l\u00fd l\u1ecdc &#8220;m\u1ea5t d\u1eef li\u1ec7u&#8221; ngh\u0129a l\u00e0 lo\u1ea1i b\u1ecf m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u pixel.<\/li><li>\u1ea2nh \u0111\u01b0\u1ee3c x\u1eed l\u00fd l\u1ecdc &#8220;kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u&#8221; \u0111\u1ec3 n\u00e9n c\u00e1c d\u1eef li\u1ec7u c\u1ee7a pixel.<\/li><\/ol>\n\n\n\n<p><strong>B\u01b0\u1edbc \u0111\u1ea7u ti\u00ean l\u00e0 t\u00f9y ch\u1ecdn, v\u00e0 thu\u1eadt to\u00e1n ch\u00ednh x\u00e1c s\u1ebd ph\u1ee5 thu\u1ed9c v\u00e0o \u0111\u1ecbnh d\u1ea1ng \u1ea3nh c\u1ee5 th\u1ec3, nh\u01b0ng \u0111i\u1ec1u quan tr\u1ecdng c\u1ea7n hi\u1ec3u l\u00e0 b\u1ea5t k\u1ef3 \u1ea3nh n\u00e0o c\u0169ng c\u00f3 th\u1ec3 tr\u1ea3i qua b\u01b0\u1edbc n\u00e9n m\u1ea5t d\u1eef li\u1ec7u \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng.&nbsp;<\/strong>Trong th\u1ef1c t\u1ebf, s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng \u1ea3nh, nh\u01b0 GIF, PNG, JPEG v\u00e0 c\u00e1c lo\u1ea1i kh\u00e1c, l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a c\u00e1c thu\u1eadt to\u00e1n c\u1ee5 th\u1ec3 ch\u00fang s\u1eed d\u1ee5ng (ho\u1eb7c b\u1ecf qua) khi \u00e1p d\u1ee5ng c\u00e1c b\u01b0\u1edbc n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u.<\/p>\n\n\n\n<p>V\u00ec v\u1eady, \u0111\u00e2u l\u00e0 t\u00f9y ch\u1ec9nh &#8220;t\u1ed1i \u01b0u&#8221; cho vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u? C\u00e2u tr\u1ea3 l\u1eddi ph\u1ee5 thu\u1ed9c v\u00e0o n\u1ed9i dung b\u1ee9c \u1ea3nh v\u00e0 ti\u00eau chu\u1ea9n ri\u00eang c\u1ee7a b\u1ea1n v\u1ec1 s\u1ef1 \u0111\u00e1nh \u0111\u1ed5i gi\u1eefa k\u00edch c\u1ee1 file v\u00e0 s\u1ef1 m\u1ea5t t\u1ef1 nhi\u00ean do n\u00e9n m\u1ea5t d\u1eef li\u1ec7u g\u00e2y ra:<\/p>\n\n\n\n<p>Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u00f3 th\u1ec3 mu\u1ed1n b\u1ecf qua t\u1ed1i \u01b0u m\u1ea5t d\u1eef li\u1ec7u \u0111\u1ec3 truy\u1ec1n \u0111\u1ea1t c\u00e1c chi ti\u1ebft ph\u1ee9c t\u1ea1p \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c s\u1ef1 trung th\u1ef1c \u0111\u1ea7y \u0111\u1ee7 c\u1ee7a n\u00f3, v\u00e0 trong tr\u01b0\u1eddng h\u1ee3p kh\u00e1c b\u1ea1n c\u00f3 th\u1ec3 mu\u1ed1n \u00e1p d\u1ee5ng t\u1ed1i \u01b0u h\u00f3a m\u1ea5t d\u1eef li\u1ec7u t\u0103ng c\u01b0\u1eddng \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng file \u1ea3nh xu\u1ed1ng. \u0110\u00e2y l\u00e0 ph\u1ea7n m\u00e0 b\u1ea1n c\u1ea7n ph\u00e1n \u0111o\u00e1n v\u00e0 s\u1eed d\u1ee5ng t\u00f9y theo nhu c\u1ea7u c\u1ee7a b\u1ed1i c\u1ea3nh&nbsp;&#8211; kh\u00f4ng c\u00f3 thi\u1ebft l\u1eadp n\u00e0o l\u00e0 chung cho t\u1ea5t c\u1ea3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/save-for-web.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/save-for-web.png\" alt=\"Thi\u1ebft l\u1eadp h\u1ec7 s\u1ed1 n\u00e9n \u1ea3nh\" class=\"wp-image-5206\"\/><\/a><\/figure><\/div>\n\n\n<p>Nh\u01b0 l\u00e0 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh, khi s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng m\u1ea5t d\u1eef li\u1ec7u cho JPEG, ch\u01b0\u01a1ng tr\u00ecnh n\u00e9n s\u1ebd th\u01b0\u1eddng tr\u01b0ng ra t\u00f9y ch\u1ecdn thi\u1ebft l\u1eadp &#8220;ch\u1ea5t l\u01b0\u1ee3ng&#8221; (l\u1ea5y th\u00ed d\u1ee5, thanh ch\u1ea5t l\u01b0\u1ee3ng \u0111\u01b0a ra ch\u1ee9c n\u0103ng &#8220;Save for Web&#8221; trong Adobe Photoshop), th\u01b0\u1eddng l\u00e0 m\u1ed9t s\u1ed1 n\u1eb1m gi\u1eefa 1 v\u00e0 100, \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh ho\u1ea1t \u0111\u1ed9ng b\u00ean trong c\u1ee7a c\u00e1c nh\u00f3m thu\u1eadt to\u00e1n m\u1ea5t v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u c\u1ee5 th\u1ec3. \u0110\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c k\u1ebft qu\u1ea3 t\u1ed1t nh\u1ea5t, th\u1eed nghi\u1ec7m v\u1edbi v\u00e0i thi\u1ebft l\u1eadp ch\u1ea5t l\u01b0\u1ee3ng cho \u1ea3nh c\u1ee7a b\u1ea1n, v\u00e0 \u0111\u1eebng lo l\u1eafng ch\u1ea5t l\u01b0\u1ee3ng s\u1ebd b\u1ecb suy gi\u1ea3m &#8211; th\u1ef1c t\u1ebf ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh th\u01b0\u1eddng v\u1eabn r\u1ea5t t\u1ed1t v\u00e0 dung l\u01b0\u1ee3ng th\u00ec ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c kh\u00e1 nhi\u1ec1u.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>L\u01b0u \u00fd: m\u1ee9c \u0111\u1ed9 ch\u1ea5t l\u01b0\u1ee3ng cho c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh kh\u00e1c nhau kh\u00f4ng tr\u1ef1c ti\u1ebfp so s\u00e1nh \u0111\u01b0\u1ee3c v\u00ec s\u1ef1 kh\u00e1c bi\u1ec7t trong thu\u1eadt to\u00e1n s\u1eed d\u1ee5ng \u0111\u1ec3 m\u00e3 h\u00f3a \u1ea3nh: ch\u1ea5t l\u01b0\u1ee3ng 90 cho JPEG s\u1ebd t\u1ea1o ra k\u1ebft qu\u1ea3 r\u1ea5t kh\u00e1c bi\u1ec7t so v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng 90 c\u1ee7a WebP. Trong th\u1ef1c t\u1ebf, ngay c\u1ea3 c\u00f9ng m\u1ee9c \u0111\u1ed9 ch\u1ea5t l\u01b0\u1ee3ng cho c\u00f9ng b\u1ee9c \u1ea3nh v\u1eabn c\u00f3 th\u1ec3 t\u1ea1o ra \u1ea3nh \u0111\u1ea7u ra tr\u00f4ng kh\u00e1c nhau khi s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 n\u00e9n!<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"l\u1ef1a-ch\u1ecdn-dung-d\u1ecbnh-d\u1ea1ng-\u1ea3nh\"><span class=\"ez-toc-section\" id=\"7_Lua_chon_dung_dinh_dang_anh\"><\/span>#7. L\u1ef1a ch\u1ecdn \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng \u1ea3nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>B\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c l\u1ef1a ch\u1ecdn \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng \u1ea3nh t\u1ed5ng th\u1ec3: <a href=\"https:\/\/kiencang.net\/gif-png-jpg-hoac-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">GIF, PNG, JPEG<\/a>.<\/li><li>Th\u1eed nghi\u1ec7m v\u00e0 l\u1ef1a ch\u1ecdn thi\u1ebft l\u1eadp t\u1ed1t nh\u1ea5t cho m\u1ed7i \u0111\u1ecbnh d\u1ea1ng: ch\u1ea5t l\u01b0\u1ee3ng, k\u00edch c\u1ee1 b\u1ea3ng m\u00e0u, v\u00e2n v\u00e2n.<\/li><li>Xem x\u00e9t vi\u1ec7c b\u1ed5 sung \u0111\u1ecbnh d\u1ea1ng WebP v\u00e0 JPEG XR cho nh\u1eefng kh\u00e1ch h\u00e0ng hi\u1ec7n \u0111\u1ea1i.<\/li><\/ul>\n\n\n\n<p>Ngo\u00e0i c\u00e1c thu\u1eadt to\u00e1n n\u00e9n m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u kh\u00e1c nhau, c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh kh\u00e1c nhau h\u1ed7 tr\u1ee3 c\u00e1c t\u00ednh n\u0103ng kh\u00e1c nhau nh\u01b0 \u1ea3nh \u0111\u1ed9ng v\u00e0 thu\u1ed9c t\u00ednh trong su\u1ed1t (k\u00eanh alpha). V\u00ec l\u00fd do \u0111\u00f3, l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c &#8220;\u0111\u1ecbnh d\u1ea1ng ch\u00ednh x\u00e1c&#8221; cho b\u1ee9c \u1ea3nh c\u1ee5 th\u1ec3 l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p c\u1ee7a k\u1ebft qu\u1ea3 \u0111\u1ed3 h\u1ecda m\u00e0 b\u1ea1n mong mu\u1ed1n&nbsp;v\u00e0 c\u00e1c ch\u1ee9c n\u0103ng c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u0110\u1ecbnh d\u1ea1ng<\/strong><\/td><td><strong>Trong su\u1ed1t<\/strong><\/td><td><strong>\u1ea2nh \u0111\u1ed9ng<\/strong><\/td><td><strong>Tr\u00ecnh duy\u1ec7t<\/strong><\/td><\/tr><tr><td>GIF<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><td>T\u1ea5t c\u1ea3<\/td><\/tr><tr><td>PNG<\/td><td>C\u00f3<\/td><td>Kh\u00f4ng<\/td><td>T\u1ea5t c\u1ea3<\/td><\/tr><tr><td>JPEG<\/td><td>Kh\u00f4ng<\/td><td>Kh\u00f4ng<\/td><td>T\u1ea5t c\u1ea3<\/td><\/tr><tr><td>JPEG XR<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><td>IE<\/td><\/tr><tr><td>WebP<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><td>Chrome, Opera, Android (*)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>(*): C\u1eadp nh\u1eadt 2019, hi\u1ec7n tr\u00ecnh duy\u1ec7t Firefox v\u00e0 Edge Microsoft \u0111\u00e3 h\u1ed7 tr\u1ee3 WebP tr\u00ean phi\u00ean b\u1ea3n m\u00e1y b\u00e0n.<\/p>\n\n\n\n<p>C\u00f3 ba \u0111\u1ecbnh d\u1ea1ng \u1ea3nh \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 ph\u1ed5 bi\u1ebfn: GIF, PNG v\u00e0 JPEG. Ngo\u00e0i c\u00e1c \u0111\u1ecbnh d\u1ea1ng n\u00e0y, m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t c\u0169ng h\u1ed7 tr\u1ee3 c\u00e1c \u0111\u1ecbnh d\u1ea1ng m\u1edbi h\u01a1n nh\u01b0 WebP v\u00e0 JPEG XR, nh\u1eefng \u0111\u1ecbnh d\u1ea1ng nh\u00ecn chung c\u00f3 kh\u1ea3 n\u0103ng n\u00e9n t\u1ed1t h\u01a1n v\u00e0 c\u00f3 nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n. V\u1eady th\u00ec, \u0111\u1ecbnh d\u1ea1ng n\u00e0o b\u1ea1n n\u00ean s\u1eed d\u1ee5ng?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/format-tree.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/format-tree.png\" alt=\"B\u1ea3ng l\u1ef1a ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng \u1ea3nh theo nhu c\u1ea7u\" class=\"wp-image-5198\"\/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"a-b\u1ea1n-c\u1ea7n-\u1ea3nh-d\u1ed9ng-n\u1ebfu-v\u1eady-gif-la-l\u1ef1a-ch\u1ecdn-t\u1ed5ng-th\u1ec3-duy-nh\u1ea5t\"><strong>A. B\u1ea1n c\u1ea7n \u1ea3nh \u0111\u1ed9ng? N\u1ebfu v\u1eady, GIF l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed5ng th\u1ec3 duy nh\u1ea5t.<\/strong><\/h3>\n\n\n\n<p>GIF gi\u1edbi h\u1ea1n b\u1ea3ng m\u00e0u (<em>color palette<\/em>) t\u1ed1i \u0111a 256 m\u00e0u, \u0111i\u1ec1u \u0111\u1ea5y l\u00e0m cho n\u00f3 l\u00e0 l\u1ef1a ch\u1ecdn ngh\u00e8o n\u00e0n&nbsp;cho h\u1ea7u h\u1ebft c\u00e1c b\u1ee9c h\u00ecnh. Th\u00eam n\u1eefa, \u0111\u1ecbnh d\u1ea1ng \u1ea3nh PNG-8 t\u1ea1o ra h\u1ec7 s\u1ed1 n\u00e9n t\u1ed1t h\u01a1n cho \u1ea3nh c\u00f3 b\u1ea3ng m\u00e0u nh\u1ecf. V\u00ec l\u00fd do \u0111\u00f3, GIF l\u00e0 c\u00e2u tr\u1ea3 l\u1eddi \u0111\u00fang duy nh\u1ea5t khi b\u1ea1n c\u1ea7n \u1ea3nh \u0111\u1ed9ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"b-b\u1ea1n-c\u1ea7n-b\u1ea3o-qu\u1ea3n-chi-ti\u1ebft-t\u1ed1t-v\u1edbi-d\u1ed9-phan-gi\u1ea3i-cao-nh\u1ea5t-s\u1eed-d\u1ee5ng-png\"><strong>B. B\u1ea1n c\u1ea7n b\u1ea3o qu\u1ea3n chi ti\u1ebft t\u1ed1t v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao nh\u1ea5t? S\u1eed d\u1ee5ng PNG<\/strong>.<\/h3>\n\n\n\n<ul><li>PNG kh\u00f4ng s\u1eed d\u1ee5ng thu\u1eadt to\u00e1n n\u00e9n m\u1ea5t d\u1eef li\u1ec7u n\u1eb1m ngo\u00e0i s\u1ef1 l\u1ef1a ch\u1ecdn k\u00edch c\u1ee1 c\u1ee7a b\u1ea3ng m\u00e0u. V\u00ec l\u00fd do \u0111\u00f3, n\u00f3 s\u1ebd t\u1ea1o ra \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao nh\u1ea5t, nh\u01b0ng c\u00e1i gi\u00e1 ph\u1ea3i tr\u1ea3 l\u00e0 k\u00edch c\u1ee1 file cao h\u01a1n \u0111\u00e1ng k\u1ec3 so v\u1edbi c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c. H\u00e3y kh\u00f4n ngoan.<\/li><li>N\u1ebfu n\u1ed9i dung \u1ea3nh ch\u1ee9a c\u00e1c h\u00ecnh d\u1ea1ng h\u00ecnh h\u1ecdc, xem x\u00e9t vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i n\u00f3 sang \u0111\u1ecbnh d\u1ea1ng vector (SVG)!<\/li><li>N\u1ebfu \u1ea3nh bao g\u1ed3m v\u0103n b\u1ea3n, d\u1eebng l\u1ea1i v\u00e0 xem x\u00e9t. V\u0103n b\u1ea3n tr\u00ean \u1ea3nh kh\u00f4ng c\u00f3 kh\u1ea3 n\u0103ng l\u1ef1a ch\u1ecdn, t\u00ecm ki\u1ebfm c\u0169ng nh\u01b0 ph\u00f3ng to \u0111\u01b0\u1ee3c. N\u1ebfu b\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng n\u00f3 cho m\u1ee5c \u0111\u00edch \u0111\u1ed3 h\u1ecda t\u00f9y ch\u1ec9nh (v\u00ec l\u00fd do th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c c\u00e1c l\u00fd do kh\u00e1c), s\u1eed d\u1ee5ng web font \u0111\u1ec3 thay th\u1ebf.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c-n\u1ebfu-b\u1ea1n-t\u1ed1i-\u01b0u-\u1ea3nh-ch\u1ee5p-ch\u1ee5p-man-hinh-ho\u1eb7c-cac-\u1ea3nh-t\u01b0\u01a1ng-t\u1ef1-s\u1eed-d\u1ee5ng-jpeg\"><strong>C. N\u1ebfu b\u1ea1n t\u1ed1i \u01b0u \u1ea3nh ch\u1ee5p, ch\u1ee5p m\u00e0n h\u00ecnh ho\u1eb7c c\u00e1c \u1ea3nh t\u01b0\u01a1ng t\u1ef1? S\u1eed d\u1ee5ng JPEG.<\/strong><\/h3>\n\n\n\n<p>JPEG l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa vi\u1ec7c t\u1ed1i \u01b0u m\u1ea5t d\u1eef li\u1ec7u v\u00e0 kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng file c\u1ee7a \u1ea3nh. H\u00e3y th\u1eed v\u00e0i m\u1ee9c \u0111\u1ed9 ch\u1ea5t l\u01b0\u1ee3ng JPEG \u0111\u1ec3 t\u00ecm ra m\u1ee9c \u0111\u1ed9 \u0111\u00e1nh \u0111\u1ed5i t\u1ed1t nh\u1ea5t gi\u1eefa ch\u1ea5t l\u01b0\u1ee3ng &amp; dung l\u01b0\u1ee3ng cho b\u1ee9c h\u00ecnh c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p>Cu\u1ed1i c\u00f9ng khi b\u1ea1n \u0111\u00e3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh t\u1ed1i \u01b0u v\u00e0 thi\u1ebft l\u1eadp \u0111\u01b0\u1ee3c n\u00f3 cho c\u00e1c b\u1ee9c h\u00ecnh, xem x\u00e9t vi\u1ec7c b\u1ed5 sung th\u00eam c\u00e1c d\u1ea1ng m\u00e3 h\u00f3a kh\u00e1c nh\u01b0 WebP v\u00e0 JPEG XR. C\u1ea3 hai \u0111\u1ecbnh d\u1ea1ng n\u00e0y \u0111\u1ec1u m\u1edbi v\u00e0 kh\u00f4ng may l\u00e0 hi\u1ec7n v\u1eabn ch\u01b0a \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 to\u00e0n b\u1ed9 b\u1edfi t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t, nh\u01b0ng ch\u00fang d\u00f9 sao c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m \u0111\u00e1ng k\u1ec3 cho ng\u01b0\u1eddi d\u00f9ng m\u1edbi &#8211; l\u1ea5y th\u00ed d\u1ee5, t\u00ednh theo trung b\u00ecnh, WebP t\u1ea1o ra <a href=\"https:\/\/kiencang.net\/nen-mat-du-lieu-jpg-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">file c\u00f3 dung l\u01b0\u1ee3ng gi\u1ea3m 30%<\/a> so v\u1edbi c\u00f9ng \u1ea3nh JPEG.<\/p>\n\n\n\n<p>V\u00ec c\u1ea3 WebP v\u00e0 JPEG XR hi\u1ec7n \u0111\u1ec1u kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t, <a href=\"https:\/\/kiencang.net\/chuyen-anh-tren-wordpress-sang-dinh-dang-webp\/\" target=\"_blank\" rel=\"noreferrer noopener\">b\u1ea1n s\u1ebd c\u1ea7n th\u00eam logic b\u1ed5 sung cho \u1ee9ng d\u1ee5ng ho\u1eb7c m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n \u0111\u1ec3 ph\u1ee5c v\u1ee5 c\u00e1c ngu\u1ed3n l\u1ef1c th\u00edch h\u1ee3p<\/a>:<\/p>\n\n\n\n<ul><li>M\u1ed9t s\u1ed1 <a href=\"https:\/\/kiencang.net\/cdn-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">d\u1ecbch v\u1ee5 CDN<\/a> (m\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung) cung c\u1ea5p t\u1ed1i \u01b0u h\u00f3a \u1ea3nh nh\u01b0 m\u1ed9t ph\u1ea7n d\u1ecbch v\u1ee5 c\u1ee7a h\u1ecd, bao g\u1ed3m c\u1ea3 vi\u1ec7c ph\u00e2n ph\u1ed1i JPEG XR v\u00e0 WebP (v\u00ed d\u1ee5 <a href=\"https:\/\/kiencang.net\/huong-dan-su-dung-cloudflare\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudflare<\/a>).<\/li><li>M\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 ngu\u1ed3n m\u1edf (l\u1ea5y v\u00ed d\u1ee5 nh\u01b0 PageSpeed cho Apache ho\u1eb7c Ngnix) t\u1ef1 \u0111\u1ed9ng t\u1ed1i \u01b0u, chuy\u1ec3n \u0111\u1ed5i v\u00e0 ph\u1ee5c v\u1ee5 c\u00e1c th\u00e0nh ph\u1ea7n th\u00edch h\u1ee3p.<\/li><li>B\u1ea1n c\u00f3 th\u1ec3 th\u00eam c\u00e1c \u1ee9ng d\u1ee5ng logic b\u1ed5 sung \u0111\u1ec3 ph\u00e1t hi\u1ec7n m\u00e1y kh\u00e1ch, ki\u1ec3m tra xem \u0111\u1ecbnh d\u1ea1ng n\u00e0o h\u1ecd h\u1ed7 tr\u1ee3, v\u00e0 ph\u1ee5c v\u1ee5 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh t\u1ed1t nh\u1ea5t c\u00f3 th\u1ec3.<\/li><\/ul>\n\n\n\n<p>Cu\u1ed1i c\u00f9ng, l\u01b0u \u00fd l\u00e0 n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng Webview \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung trong \u1ee9ng d\u1ee5ng g\u1ed1c c\u1ee7a m\u00ecnh, th\u00ec b\u1ea1n c\u00f3 th\u1ec3 to\u00e0n quy\u1ec1n \u0111i\u1ec1u khi\u1ec3n m\u00e1y kh\u00e1ch v\u00e0 c\u00f3 th\u1ec3 ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng WebP! Facebook, Google+ v\u00e0 nhi\u1ec1u \u1ee9ng d\u1ee5ng kh\u00e1c s\u1eed d\u1ee5ng WebP \u0111\u1ec3 ph\u00e2n ph\u1ed1i h\u00ecnh \u1ea3nh c\u1ee7a h\u1ecd trong c\u00e1c \u1ee9ng d\u1ee5ng t\u01b0\u01a1ng \u1ee9ng &#8211; dung l\u01b0\u1ee3ng ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c ch\u1eafc ch\u1eafn c\u00f3 gi\u00e1 tr\u1ecb c\u1ee7a n\u00f3. \u0110\u1ec3 bi\u1ebft th\u00eam v\u1ec1 WebP, h\u00e3y xem Video <a href=\"https:\/\/www.youtube.com\/watch?v=pS8udLMOOaE\" target=\"_blank\" rel=\"noreferrer noopener\">WebP: Tri\u1ec3n khai h\u00ecnh \u1ea3nh nhanh h\u01a1n, dung l\u01b0\u1ee3ng nh\u1ecf h\u01a1n v\u00e0 \u0111\u1eb9p h\u01a1n<\/a>&nbsp;\u0111\u01b0\u1ee3c tr\u00ecnh b\u00e0y t\u1ea1i Google I\/O 2013.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cac-cong-c\u1ee5-va-di\u1ec1u-ch\u1ec9nh-tham-s\u1ed1\"><span class=\"ez-toc-section\" id=\"8_Cac_cong_cu_va_dieu_chinh_tham_so\"><\/span>#8. C\u00e1c c\u00f4ng c\u1ee5 v\u00e0 \u0111i\u1ec1u ch\u1ec9nh tham s\u1ed1<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Kh\u00f4ng c\u00f3 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh, c\u00f4ng c\u1ee5 ho\u1eb7c m\u1ed9t thi\u1ebft l\u1eadp th\u00f4ng s\u1ed1 t\u1ed1i \u01b0u n\u00e0o ho\u00e0n h\u1ea3o&nbsp;\u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c b\u1ee9c h\u00ecnh. \u0110\u1ec3 c\u00f3 k\u1ebft qu\u1ea3 t\u1ed1t nh\u1ea5t b\u1ea1n ch\u1ecdn l\u1ea5y m\u1ed9t \u0111\u1ecbnh d\u1ea1ng v\u00e0 thi\u1ebft l\u1eadp n\u00f3 ph\u1ee5 thu\u1ed9c v\u00e0o n\u1ed9i dung c\u1ee7a b\u1ee9c h\u00ecnh, v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh c\u0169ng nh\u01b0 c\u00e1c k\u1ef9 thu\u1eadt y\u00eau c\u1ea7u kh\u00e1c.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>C\u00f4ng c\u1ee5<\/strong><\/td><td><strong>M\u00f4 t\u1ea3<\/strong><\/td><\/tr><tr><td><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"noreferrer noopener\">gifsicle<\/a><\/td><td>t\u1ea1o v\u00e0 t\u1ed1i \u01b0u h\u00f3a \u1ea3nh GIF<\/td><\/tr><tr><td><a href=\"http:\/\/jpegclub.org\/jpegtran\/\" target=\"_blank\" rel=\"noreferrer noopener\">jpegtran<\/a><\/td><td>t\u1ed1i \u01b0u h\u00f3a \u1ea3nh JPEG<\/td><\/tr><tr><td><a href=\"http:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">optipng<\/a><\/td><td>t\u1ed1i \u01b0u kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u v\u1edbi \u1ea3nh PNG<\/td><\/tr><tr><td><a href=\"http:\/\/pngquant.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">pngquant<\/a><\/td><td>t\u1ed1i \u01b0u m\u1ea5t d\u1eef li\u1ec7u v\u1edbi \u1ea3nh PNG<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0110\u1eebng lo s\u1ee3 th\u1eed nghi\u1ec7m v\u1edbi c\u00e1c th\u00f4ng s\u1ed1 c\u1ee7a m\u1ed7i tr\u00ecnh n\u00e9n. Th\u1eed gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng, xem n\u00f3 tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0o, sau \u0111\u00f3 b\u1ecf \u0111i l\u00e0m l\u1ea1i t\u1eeb \u0111\u1ea7u. M\u1ed9t khi b\u1ea1n t\u00ecm \u0111\u01b0\u1ee3c nh\u00f3m thi\u1ebft l\u1eadp t\u1ed1t, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ch\u00fang l\u00ean c\u00e1c b\u1ee9c h\u00ecnh t\u01b0\u01a1ng t\u1ef1 kh\u00e1c tr\u00ean trang c\u1ee7a b\u1ea1n, nh\u01b0ng <em>\u0111\u1eebng mong ch\u1edd&nbsp;t\u1ea5t c\u1ea3 b\u1ee9c h\u00ecnh ph\u1ea3i \u0111\u01b0\u1ee3c n\u00e9n v\u1edbi c\u00f9ng thi\u1ebft l\u1eadp<\/em>.<\/p>\n\n\n\n<p>P\/S: N\u1ebfu b\u1ea1n d\u00f9ng WordPress, c\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a l\u00e0 s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/plugin-nen-anh-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1c plugin n\u00e9n \u1ea3nh t\u1ef1 \u0111\u1ed9ng<\/a>. C\u00e1c plugin \u0111\u00f3 \u0111\u1ec1u c\u1ed1 g\u1eafng s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng ngh\u1ec7 n\u00e9n t\u1ed1t nh\u1ea5t, trong \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 c\u00f4ng c\u1ee5 v\u1eeba \u0111\u1ec1 c\u1eadp \u1edf tr\u00ean.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"phan-ph\u1ed1i-cac-\u1ea3nh-thu-nh\u1ecf\"><span class=\"ez-toc-section\" id=\"9_Phan_phoi_cac_anh_thu_nho\"><\/span>#9. Ph\u00e2n ph\u1ed1i c\u00e1c \u1ea3nh thu nh\u1ecf<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul><li>Ph\u00e2n ph\u1ed1i c\u00e1c \u1ea3nh thu nh\u1ecf&nbsp;l\u00e0 m\u1ed9t trong c\u00e1c c\u00e1ch t\u1ed1i \u01b0u \u0111\u01a1n gi\u1ea3n vs hi\u1ec7u qu\u1ea3 nh\u1ea5t.<\/li><li>H\u00e3y ch\u00fa \u00fd h\u01a1n v\u00e0o c\u00e1c \u1ea3nh dung l\u01b0\u1ee3ng l\u1edbn khi \u1ea3nh h\u01b0\u1edfng c\u1ee7a ch\u00fang th\u01b0\u1eddng cao.<\/li><li>Gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng pixel kh\u00f4ng c\u1ea7n thi\u1ebft b\u1eb1ng c\u00e1ch sao ch\u00e9p c\u00e1c \u1ea3nh theo k\u00edch c\u1ee1 hi\u1ec3n th\u1ecb c\u1ee7a n\u00f3.<\/li><\/ul>\n\n\n\n<p>T\u1ed1i \u01b0u h\u00f3a \u1ea3nh r\u00fat ng\u1eafn xu\u1ed1ng hai thu\u1ed9c t\u00ednh: t\u1ed1i \u01b0u h\u00f3a s\u1ed1 l\u01b0\u1ee3ng byte \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 m\u00e3 h\u00f3a m\u1ed7i pixel c\u1ee7a \u1ea3nh v\u00e0 t\u1ed1i \u01b0u h\u00f3a t\u1ed5ng l\u01b0\u1ee3ng pixel: dung l\u01b0\u1ee3ng c\u1ee7a \u1ea3nh \u0111\u01a1n gi\u1ea3n l\u00e0 t\u1ed5ng s\u1ed1 l\u01b0\u1ee3ng pixel nh\u00e2n v\u1edbi&nbsp;t\u1ed5ng s\u1ed1 byte \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 m\u00e3 h\u00f3a m\u1ed7i pixel. Kh\u00f4ng h\u01a1n, kh\u00f4ng k\u00e9m.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/resized-image.png\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/resized-image.png\" alt=\"Ch\u00fa \u00fd \u0111\u1ebfn k\u00edch c\u1ee1 \u1ea3nh khi ph\u00e2n ph\u1ed1i ch\u00fang \u0111\u1ebfn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng\" class=\"wp-image-5204\"\/><\/a><\/figure><\/div>\n\n\n<p>V\u00ec l\u00fd do \u0111\u1ea5y, m\u1ed9t trong c\u00e1c k\u1ef9 thu\u1eadt \u0111\u01a1n gi\u1ea3n v\u00e0 hi\u1ec7u qu\u1ea3 nh\u1ea5t \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a \u1ea3nh l\u00e0 \u0111\u1ea3m b\u1ea3o ch\u00fang ta kh\u00f4ng t\u1ea3i nhi\u1ec1u pixel h\u01a1n c\u1ea7n thi\u1ebft \u0111\u1ec3 hi\u1ec3n th\u1ecb \u1ea3nh tr\u00ean k\u00edch th\u01b0\u1edbc bi\u1ebft tr\u01b0\u1edbc c\u1ee7a tr\u00ecnh duy\u1ec7t. Nghe \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng? Kh\u00f4ng may l\u00e0 h\u1ea7u h\u1ebft c\u00e1c trang \u0111\u1ec1u th\u1ea5t b\u1ea1i trong b\u00e0i ki\u1ec3m tra c\u00f3 nhi\u1ec1u \u1ea3nh: th\u00f4ng th\u01b0\u1eddng, h\u1ecd chuy\u1ec3n t\u1ea3i b\u1ee9c \u1ea3nh l\u1edbn h\u01a1n v\u00e0 d\u1ef1a v\u00e0o tr\u00ecnh duy\u1ec7t \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch c\u1ee1&nbsp;c\u1ee7a ch\u00fang &#8211; \u0111i\u1ec1u n\u00e0y c\u0169ng l\u00e0m ti\u00eau th\u1ee5 th\u00eam CPU&nbsp;&#8211; v\u00e0 hi\u1ec3n th\u1ecb ch\u00fang \u1edf \u0111\u1ed9 ph\u00e2n gi\u1ea3i th\u1ea5p h\u01a1n.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>L\u01b0u \u00fd: \u0111\u01b0a con tr\u1ecf chu\u1ed9t hover qua th\u00e0nh ph\u1ea7n \u1ea3nh trong Chrome DevTools s\u1ebd ti\u1ebft l\u1ed9 c\u1ea3 k\u00edch c\u1ee1 &#8220;hi\u1ec3n th\u1ecb&#8221; v\u00e0 k\u00edch c\u1ee1 &#8220;t\u1ef1 nhi\u00ean&#8221; c\u1ee7a \u1ea3nh. Trong v\u00ed d\u1ee5 tr\u00ean \u1ea3nh c\u00f3 k\u00edch c\u1ee1 300 x 260 pixel \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 nh\u01b0ng sau \u0111\u00f3 \u0111\u01b0\u1ee3c gi\u1ea3m t\u1ef7 l\u1ec7 xu\u1ed1ng 245 x 212 cho ng\u01b0\u1eddi d\u00f9ng khi \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/p><\/blockquote>\n\n\n\n<p>Khi b\u1ea1n t\u1ea3i v\u1ec1 Pixel d\u01b0 th\u1eeba kh\u00f4ng c\u1ea7n thi\u1ebft, r\u1ed3i sau \u0111\u00f3 \u0111\u1ec3 tr\u00ecnh duy\u1ec7t thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc \u1ea3nh thay m\u1eb7t ch\u00fang ta, l\u00e0 b\u1ea1n \u0111ang \u0111\u00e1nh m\u1ea5t c\u01a1 h\u1ed9i l\u1edbn \u0111\u1ec3 gi\u1ea3m v\u00e0 t\u1ed1i \u01b0u t\u1ed5ng l\u01b0\u1ee3ng bytes c\u1ea7n thi\u1ebft \u0111\u1ec3 render trang. Th\u00eam v\u00e0o \u0111\u00f3, l\u01b0u \u00fd l\u00e0 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc kh\u00f4ng \u0111\u01a1n gi\u1ea3n l\u00e0 ch\u1ee9c n\u0103ng c\u1ee7a s\u1ed1 l\u01b0\u1ee3ng pixel m\u00e0 h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c gi\u1ea3m b\u1edbt, m\u00e0 c\u00f2n l\u00e0 k\u00edch th\u01b0\u1edbc t\u1ef1 nhi\u00ean c\u1ee7a n\u00f3.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u0110\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh<\/strong><\/td><td><strong>K\u00edch c\u1ee1 t\u1ef1 nhi\u00ean<\/strong><\/td><td><strong>Size hi\u1ec3n th\u1ecb (CSS px)<\/strong><\/td><td><strong>Pixel kh\u00f4ng c\u1ea7n thi\u1ebft<\/strong><\/td><\/tr><tr><td>1x<\/td><td>110 x 110<\/td><td>100 x 100<\/td><td>110 x 110 &#8211; 100 x 100 = 2100<\/td><\/tr><tr><td>1x<\/td><td>410 x 410<\/td><td>400 x 400<\/td><td>410 x 410 &#8211; 400 x 400 = 8100<\/td><\/tr><tr><td>1x<\/td><td>810 x 810<\/td><td>800 x 800<\/td><td>810 x 810 &#8211; 800 x 800 = 16 100<\/td><\/tr><tr><td>2x<\/td><td>220 x 220<\/td><td>100 x 100<\/td><td>210 x 210 &#8211; (2 x 100) x (2 x 100) = 8400<\/td><\/tr><tr><td>2x<\/td><td>820 x 820<\/td><td>400 x 400<\/td><td>820 x 820 &#8211; (2 x 400) x (2 x 400) = 32400<\/td><\/tr><tr><td>2x<\/td><td>1620 x 1620<\/td><td>800 x 800<\/td><td>1620 x 1620 &#8211; (2 x 800) x (2 x 800) = 64400<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>L\u01b0u \u00fd l\u00e0 trong t\u1ea5t c\u1ea3 c\u00e1c tr\u01b0\u1eddng h\u1ee3p \u1edf tr\u00ean, k\u00edch th\u01b0\u1edbc hi\u1ec3n th\u1ecb &#8220;ch\u1ec9 10 pixel CSS nh\u1ecf h\u01a1n&#8221; so v\u1edbi \u1ea3nh y\u00eau c\u1ea7u cho m\u1ed7i \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh. D\u1ea7u v\u1eady, s\u1ed1 l\u01b0\u1ee3ng pixels t\u0103ng th\u00eam v\u00e0 c\u00e1c chi ph\u00ed li\u00ean quan&nbsp;t\u0103ng l\u00ean nhanh ch\u00f3ng khi k\u00edch th\u01b0\u1edbc hi\u1ec3n th\u1ecb c\u1ee7a h\u00ecnh \u1ea3nh t\u0103ng!<\/p>\n\n\n\n<p>V\u00ec l\u00fd do \u0111\u00f3, trong khi b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng \u0111\u1ea3m b\u1ea3o \u0111\u01b0\u1ee3c m\u1ed7i \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c ph\u00e2n ph\u1ed1i ch\u00ednh x\u00e1c k\u00edch c\u1ee1 hi\u1ec3n th\u1ecb, <strong>b\u1ea1n ph\u1ea3i \u0111\u1ea3m b\u1ea3o s\u1ed1 l\u01b0\u1ee3ng pixel kh\u00f4ng c\u1ea7n thi\u1ebft l\u00e0 t\u1ed1i thi\u1ec3u, v\u00e0 c\u00e1c \u1ea3nh l\u1edbn c\u1ee5 th\u1ec3 c\u1ee7a b\u1ea1n c\u1ea7n ph\u00e2n ph\u1ed1i g\u1ea7n nh\u1ea5t c\u00f3 th\u1ec3 v\u1edbi k\u00edch c\u1ee1 hi\u1ec3n th\u1ecb.<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"danh-sach-ki\u1ec3m-tra-t\u1ed1i-\u01b0u-hoa-hinh-\u1ea3nh\"><span class=\"ez-toc-section\" id=\"10_Danh_sach_kiem_tra_toi_uu_hoa_hinh_anh\"><\/span>#10. Danh s\u00e1ch ki\u1ec3m tra t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t s\u1ed1 m\u1eb9o v\u00e0 k\u1ef9 thu\u1eadt b\u1ea1n c\u1ea7n ghi nh\u1edb khi l\u00e0m c\u00f4ng vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh:<\/p>\n\n\n\n<ul><li><strong>\u01afa ti\u00ean \u0111\u1ecbnh d\u1ea1ng vector<\/strong>: \u1ea3nh vector l\u00e0 \u0111\u1ed9c l\u1eadp v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i v\u00e0 t\u1ec9 l\u1ec7 thu ph\u00f3ng, \u0111i\u1ec1u n\u00e0y l\u00e0m cho ch\u00fang kh\u1edbp ho\u00e0n h\u1ea3o v\u1edbi th\u1ebf gi\u1edbi \u0111a thi\u1ebft b\u1ecb v\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao.<\/li><li><strong>T\u1ed1i gi\u1ea3n h\u00f3a v\u00e0 n\u00e9n \u0111\u1ecbnh d\u1ea1ng SVG<\/strong>: m\u00e3 \u0111\u00e1nh d\u1ea5u XML t\u1ea1o ra b\u1edfi h\u1ea7u h\u1ebft c\u00e1c \u1ee9ng d\u1ee5ng v\u1ebd th\u01b0\u1eddng bao g\u1ed3m c\u00e1c si\u00eau d\u1eef li\u1ec7u kh\u00f4ng c\u1ea7n thi\u1ebft&nbsp;&#8211; c\u00e1i c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf; h\u00e3y \u0111\u1ea3m b\u1ea3o r\u1eb1ng m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh \u0111\u1ec3 \u00e1p d\u1ee5ng n\u00e9n GZIP cho \u1ea3nh SVG.<\/li><li><strong>Ch\u1ecdn l\u1ea5y \u0111\u1ecbnh d\u1ea1ng raster t\u1ed1t nh\u1ea5t<\/strong>: x\u00e1c \u0111\u1ecbnh y\u00eau c\u1ea7u ch\u1ee9c n\u0103ng c\u1ee7a b\u1ea1n v\u00e0 ch\u1ecdn l\u1ea5y m\u1ed9t c\u00e1i ph\u00f9 h\u1ee3p v\u1edbi t\u1eebng lo\u1ea1i c\u1ee5 th\u1ec3.<\/li><li><strong>Th\u1eed nghi\u1ec7m v\u1edbi thi\u1ebft l\u1eadp ch\u1ea5t l\u01b0\u1ee3ng t\u1ed1i \u01b0u cho \u0111\u1ecbnh d\u1ea1ng raster<\/strong>: \u0111\u1eebng s\u1ee3 h\u00e3i v\u1edbi c\u00e0i \u0111\u1eb7t suy gi\u1ea3m &#8220;ch\u1ea5t l\u01b0\u1ee3ng&#8221;, c\u00e1c k\u1ebft qu\u1ea3 th\u01b0\u1eddng r\u1ea5t t\u1ed1t v\u00e0 s\u1ed1 l\u01b0\u1ee3ng byte ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c l\u00e0 \u0111\u00e1ng k\u1ec3.<\/li><li><strong>Lo\u1ea1i b\u1ecf c\u00e1c si\u00eau d\u1eef li\u1ec7u kh\u00f4ng c\u1ea7n thi\u1ebft c\u1ee7a \u1ea3nh<\/strong>: nhi\u1ec1u \u1ea3nh raster bao g\u1ed3m si\u00eau d\u1eef li\u1ec7u kh\u00f4ng c\u1ea7n thi\u1ebft v\u1ec1 \u1ea3nh: th\u00f4ng tin \u0111\u1ecba l\u00fd, th\u00f4ng tin m\u00e1y ch\u1ee5p \u1ea3nh v\u00e0 nhi\u1ec1u th\u1ee9 kh\u00e1c.&nbsp;S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 th\u00edch h\u1ee3p \u0111\u1ec3 lo\u1ea1i b\u1ecf d\u1eef li\u1ec7u n\u00e0y.<\/li><li><strong>Ph\u1ee5c v\u1ee5 h\u00ecnh \u1ea3nh thu nh\u1ecf<\/strong>: thay \u0111\u1ed5i k\u00edch c\u1ee1 c\u00e1c \u1ea3nh tr\u00ean m\u00e1y ch\u1ee7 v\u00e0 \u0111\u1ea3m b\u1ea3o r\u1eb1ng k\u00edch c\u1ee1 &#8220;hi\u1ec3n th\u1ecb&#8221; g\u1ea7n nh\u1ea5t c\u00f3 th\u1ec3 v\u1edbi k\u00edch c\u1ee1 &#8220;t\u1ef1 nhi\u00ean&#8221; c\u1ee7a \u1ea3nh. H\u00e3y \u0111\u1eb7t s\u1ef1 ch\u00fa \u00fd v\u00e0o c\u00e1c \u1ea3nh l\u1edbn c\u1ee5 th\u1ec3, b\u1edfi v\u00ec ch\u00fang chi\u1ebfm chi ph\u00ed&nbsp;l\u1edbn nh\u1ea5t khi thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc!<\/li><li><strong>T\u1ef1 \u0111\u1ed9ng h\u00f3a, t\u1ef1 \u0111\u1ed9ng h\u00f3a, t\u1ef1 \u0111\u1ed9ng h\u00f3a<\/strong>: \u0110\u1ea7u t\u01b0 v\u00e0o c\u00e1c thi\u1ebft b\u1ecb v\u00e0 c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng t\u1ef1 \u0111\u1ed9ng s\u1ebd \u0111\u1ea3m b\u1ea3o cho t\u1ea5t c\u1ea3 h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n lu\u00f4n lu\u00f4n \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u.<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-right\"><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft&nbsp;Image Optimization &#8211; Web Fundamentals &#8211; t\u00e1c gi\u1ea3:&nbsp;Ilya Grigorik &#8211; Google)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1c b\u1ee9c \u1ea3nh th\u01b0\u1eddng chi\u1ebfm ph\u1ea7n l\u1edbn dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 tr\u00ean trang web v\u00e0 c\u0169ng th\u01b0\u1eddng chi\u1ebfm kh\u00f4ng gian th\u1ecb gi\u00e1c \u0111\u00e1ng k\u1ec3. V\u00ec l\u00fd do \u0111\u00f3, t\u1ed1i \u01b0u h\u00f3a \u1ea3nh s\u1ebd gi\u00fap gi\u1ea3m m\u1ed9t l\u01b0\u1ee3ng l\u1edbn d\u1eef li\u1ec7u v\u00e0 n\u00e2ng cao hi\u1ec7u n\u0103ng, c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 cho website c\u1ee7a b\u1ea1n: S\u1ed1 l\u01b0\u1ee3ng &hellip;<\/p>\n","protected":false},"author":1,"featured_media":20459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[280],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft) &#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\/toi-uu-hoa-anh-tren-web\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"C\u00e1c b\u1ee9c \u1ea3nh th\u01b0\u1eddng chi\u1ebfm ph\u1ea7n l\u1edbn dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 tr\u00ean trang web v\u00e0 c\u0169ng th\u01b0\u1eddng chi\u1ebfm kh\u00f4ng gian th\u1ecb gi\u00e1c \u0111\u00e1ng k\u1ec3. V\u00ec l\u00fd do \u0111\u00f3, t\u1ed1i \u01b0u h\u00f3a \u1ea3nh s\u1ebd gi\u00fap gi\u1ea3m m\u1ed9t l\u01b0\u1ee3ng l\u1edbn d\u1eef li\u1ec7u v\u00e0 n\u00e2ng cao hi\u1ec7u n\u0103ng, c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 cho website c\u1ee7a b\u1ea1n: S\u1ed1 l\u01b0\u1ee3ng &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/\" \/>\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=\"2018-04-14T14:11:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-17T14:41:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/o-nhieu-mau-sac.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"27 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft) &#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\/toi-uu-hoa-anh-tren-web\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u1ee9c \u1ea3nh th\u01b0\u1eddng chi\u1ebfm ph\u1ea7n l\u1edbn dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1 tr\u00ean trang web v\u00e0 c\u0169ng th\u01b0\u1eddng chi\u1ebfm kh\u00f4ng gian th\u1ecb gi\u00e1c \u0111\u00e1ng k\u1ec3. V\u00ec l\u00fd do \u0111\u00f3, t\u1ed1i \u01b0u h\u00f3a \u1ea3nh s\u1ebd gi\u00fap gi\u1ea3m m\u1ed9t l\u01b0\u1ee3ng l\u1edbn d\u1eef li\u1ec7u v\u00e0 n\u00e2ng cao hi\u1ec7u n\u0103ng, c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 cho website c\u1ee7a b\u1ea1n: S\u1ed1 l\u01b0\u1ee3ng &hellip;","og_url":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2018-04-14T14:11:29+00:00","article_modified_time":"2022-08-17T14:41:44+00:00","og_image":[{"width":640,"height":426,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2018\/04\/o-nhieu-mau-sac.jpg","type":"image\/jpeg"}],"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":"27 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/","url":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/","name":"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2018-04-14T14:11:29+00:00","dateModified":"2022-08-17T14:41:44+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/toi-uu-hoa-anh-tren-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh cho website (c\u01a1 s\u1edf l\u00fd thuy\u1ebft)"}]},{"@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\/5189"}],"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=5189"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/5189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/20459"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=5189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=5189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=5189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}