{"id":692,"date":"2020-03-25T03:31:10","date_gmt":"2020-03-25T03:31:10","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=692"},"modified":"2021-04-18T12:46:48","modified_gmt":"2021-04-18T12:46:48","slug":"pagespeed-2-1-4-dinh-dang-anh-pho-bien-va-cach-dung-cho-phu-hop","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/pagespeed-2-1-4-dinh-dang-anh-pho-bien-va-cach-dung-cho-phu-hop\/","title":{"rendered":"PageSpeed 2.1: 4 \u0110\u1ecbnh d\u1ea1ng \u1ea3nh ph\u1ed5 bi\u1ebfn v\u00e0 c\u00e1ch d\u00f9ng cho ph\u00f9 h\u1ee3p"},"content":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh mu\u1ed1n gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n 4 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh hay \u0111\u01b0\u1ee3c d\u00f9ng nh\u1ea5t tr\u00ean c\u00e1c website hi\u1ec7n nay. V\u00e0 c\u0169ng v\u00ec kh\u00f4ng c\u00f3 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh n\u00e0o c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng t\u1ed1t trong m\u1ecdi tr\u01b0\u1eddng h\u1ee3p n\u00ean m\u00ecnh c\u0169ng s\u1ebd m\u00f4 t\u1ea3 lu\u00f4n c\u00e1ch s\u1eed d\u1ee5ng ch\u00fang sao cho h\u1ee3p l\u00fd nh\u00e9. B\u1eaft \u0111\u1ea7u th\u00f4i.<\/p>\n<h3>1. JPGs<\/h3>\n<p>\u0110\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn nh\u1ea5t hi\u1ec7n nay v\u00ec dung l\u01b0\u1ee3ng khi n\u00e9n t\u1ed1t (nh\u1ecf) m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c ch\u1ea5t l\u01b0\u1ee3ng \u1ea3nh \u0111\u00e1ng k\u1ec3.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/04\/4-dinh-dang-anh-pho-bien-1.jpg\" alt=\"\" \/><\/p>\n<p>Ph\u00f9 h\u1ee3p cho d\u00f9ng \u1ea3nh v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng cao v\u00e0 nhi\u1ec1u m\u00e0u s\u1eafc ph\u1ee9c t\u1ea1p. \u0110\u01b0\u1ee3c khuy\u1ebfn c\u00e1o d\u00f9ng trong \u0111a s\u1ed1 tr\u01b0\u1eddng h\u1ee3p n\u1ebfu c\u00f3 th\u1ec3, v\u00ed d\u1ee5 nh\u01b0: \u1ea3nh s\u1ea3n ph\u1ea9m, banner, background..v.v&#8230; <\/p>\n<blockquote>\n<p><strong>L\u01b0u \u00fd:<\/strong><\/p>\n<ul>\n<li>Do lu\u00f4n c\u00f3 n\u1ec1n (m\u1eb7c \u0111\u00ednh l\u00e0 tr\u1eafng) n\u00ean kh\u00f4ng th\u1ec3 \u00e1p d\u1ee5ng cho c\u00e1c tr\u01b0\u1eddng h\u1ee3p \u1ea3nh c\u1ea7n c\u00f3 n\u1ec1n trong su\u1ed1t.<\/li>\n<\/ul>\n<\/blockquote>\n<h3>2. PNG:<\/h3>\n<p>C\u0169ng l\u00e0 \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn kh\u00f4ng thua k\u00e9m g\u00ec JPGs nh\u01b0ng l\u1ea1i c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh nh\u1ec9nh h\u01a1n JPGs. <\/p>\n<p>R\u1ea5t ph\u00f9 h\u1ee3p \u0111\u1ec3 d\u00f9ng trong v\u00e0i tr\u01b0\u1eddng h\u1ee3p c\u1ea7n ch\u1ea5t l\u01b0\u1ee3ng g\u1ea7n nh\u01b0 t\u1ed1i \u0111a, h\u00ecnh \u1ea3nh ch\u1ee5p s\u1ed1ng \u0111\u1ed9ng v\u00e0 x\u00f3a \u0111\u01b0\u1ee3c ph\u00f4ng n\u1ec1n nh\u01b0: logo, icon, ho\u1eb7c c\u00e1c \u1ea3nh ch\u1ed3ng l\u00ean ph\u1ee9c t\u1ea1p nh\u01b0 v\u1ea7y:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/04\/broken-frosted-glass-realistic-icon.jpg\" alt=\"\" \/><\/p>\n<blockquote>\n<p><strong>L\u01b0u \u00fd:<\/strong><\/p>\n<ul>\n<li>\u1ea2nh PNG l\u1ea1i c\u00f3 dung l\u01b0\u1ee3ng l\u1edbn h\u01a1n r\u1ea5t nhi\u1ec1u (x2, x3) so v\u1edbi JPGs. Th\u01b0\u1eddng ch\u1ec9 n\u00ean d\u00f9ng cho logo ho\u1eb7c khi th\u1eadt s\u1ef1 c\u1ea7n thi\u1ebft.<\/li>\n<\/ul>\n<\/blockquote>\n<h3>3. GIF:<\/h3>\n<p>L\u00e0 vi\u1ebft t\u1eaft c\u1ee7a Graphics Interchange Format, m\u1ed9t lo\u1ea1i \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi CompuServe. \u1ea2nh GIF th\u01b0\u1eddng bao g\u1ed3m t\u1ed1i \u0111a 256 (kh\u00e1 \u00edt) n\u00ean \u1ea3nh GIF (t\u0129nh) th\u01b0\u1eddng c\u00f3 dung l\u01b0\u1ee3ng nh\u1ecf h\u01a1n JPGs nhi\u1ec1u.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/keUm5tRMxoniSyYWan\" width=\"480\" height=\"247\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/p>\n<p>Nh\u01b0ng b\u00f9 l\u1ea1i GIF c\u0169ng c\u00f3 th\u1ec3 l\u01b0u l\u1ea1i d\u1ea1ng n\u1ec1n trong su\u1ed1t v\u00e0 h\u1ed7 tr\u1ee3 l\u00e0m \u1ea3nh \u0111\u1ed9ng kh\u00e1 t\u1ed1t. Ch\u1eafc anh ch\u1ecb em c\u0169ng kh\u00f4ng l\u1ea1 g\u00ec c\u00e1c \u1ea3nh \u0111\u1ed9ng ph\u1ed5 bi\u1ebfn tr\u00ean internet thay cho c\u00e1c clip ng\u1eafn kh\u00e1 hi\u1ec7u qu\u1ea3 v\u00e0 t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng h\u01a1n video nhi\u1ec1u l\u1ea7n.<\/p>\n<blockquote>\n<p><strong>L\u01b0u \u00fd:<\/strong><\/p>\n<ul>\n<li>\u0110\u1eebng qu\u00e1 l\u1ea1m d\u1ee5ng \u1ea3nh GIF \u0111\u1ed9ng (d\u00e0i) v\u00ec n\u00f3 c\u00f3 khi l\u1ea1i n\u1eb7ng h\u01a1n c\u1ea3 PNG lu\u00f4n \u0111\u1ea5y. T\u1ed1t nh\u1ea5t ch\u1ec9 n\u00ean d\u00f9ng cho \u1ea3nh \u0111\u1ed9ng gi\u1ea3 l\u1eadp tr\u1ea1ng th\u00e1i \u0111ang t\u1ea3i trang ho\u1eb7c nh\u1eefng ch\u1ed7 c\u1ea7n l\u00e0m website sinh \u0111\u1ed9ng h\u01a1n (m\u00e0 v\u1eabn t\u1ea3i nh\u1eb9 h\u01a1n video)<\/li>\n<\/ul>\n<\/blockquote>\n<h3>4. WEBP:<\/h3>\n<p>Google \u0111\u00e3 d\u00e0nh nhi\u1ec1u n\u0103m \u0111\u1ec3 t\u1ea1o ra WEBP v\u1edbi m\u1ee5c ti\u00eau gi\u1ea3m k\u00edch th\u01b0\u1edbc t\u1eadp tin \u1ea3nh m\u00e0 \u00edt \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn ch\u1ea5t l\u01b0\u1ee3ng nh\u1ea5t. Sau nhi\u1ec1u n\u0103m n\u00e2ng c\u1ea5p th\u00ec gi\u1edd thu\u1eadt to\u00e1n n\u00e9n c\u1ee7a WEBP hi\u1ec7u qu\u1ea3 h\u01a1n r\u1ea5t nhi\u1ec1u, gi\u00fap k\u00edch th\u01b0\u1edbc khi n\u00e9n nh\u1eb9 h\u01a1n \u0111\u00e1ng k\u1ec3 so v\u1edbi JPG v\u00e0 PNG.<br \/>\n<img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/04\/webp-logo.jpg\" alt=\"\" \/><br \/>\nNgo\u00e0i ra, n\u00f3 c\u00f2n b\u00e1 \u0111\u1ea1o h\u01a1n khi h\u1ed7 tr\u1ee3 lu\u00f4n \u1ea3nh n\u1ec1n trong su\u1ed1t nh\u01b0 PNG v\u00e0 \u1ea3nh \u0111\u1ed9ng nh\u01b0 GIF ph\u00e0 ph\u00e0. \u0110\u00fang l\u00e0 c\u1ef1c ph\u1ea9m?<\/p>\n<blockquote>\n<p><strong>L\u01b0u \u00fd:<\/strong><\/p>\n<ul>\n<li>H\u1ea7u h\u1ebft tr\u00ecnh duy\u1ec7t hi\u1ec7n t\u1ea1i nh\u01b0 Chrome, Firefox, Edge hay Opera \u0111\u1ec1u h\u1ed7 tr\u1ee3 WebP ch\u1ec9 tr\u1eeb.. \u00f4ng k\u1eb9 Safari c\u1ee7a Apple ????<\/li>\n<\/ul>\n<\/blockquote>\n<h3>5. SVG<\/h3>\n<p>\u1ee6a, sao ti\u00eau \u0111\u1ec1 n\u00f3i c\u00f3 4 c\u00e1i m\u00e0 gi\u1edd l\u00f2i c\u00e1i s\u1ed1 5 v\u1eady?<\/p>\n<p>\u0110\u00fang r\u1ed3i, theo Google Pagespeed Insights th\u00ec 4 lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng \u1ea3nh tr\u00ean chi\u1ebfm 96% l\u01b0u l\u01b0\u1ee3ng \u1ea3nh \u0111\u01b0\u1ee3c truy\u1ec1n t\u1ea3i qua Internet tr\u00ean to\u00e0n c\u1ea7u. M\u00ecnh \u0111\u1ecbnh d\u1eebng l\u1ea1i \u0111\u00e2y nh\u01b0ng trong l\u00fac vi\u1ebft b\u00e0i n\u00e0y c\u00f3 tham kh\u1ea3o m\u1ed9t s\u1ed1 \u00fd ki\u1ebfn anh em n\u00ean b\u1ed5 sung th\u00eam \u0111\u1ecbnh d\u1ea1ng SVG v\u00e0o b\u00e0i n\u00e0y.<\/p>\n<p>C\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>SVG b\u1ea3n ch\u1ea5t l\u00e0 vector, t\u1ef1 \u0111\u1ed9ng co gi\u00e3n tr\u00ean m\u1ecdi tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng s\u1ee3 b\u1ecb.. b\u1ec3 (v\u1ee1) \u1ea3nh.<\/li>\n<li>Trong v\u00e0i tr\u01b0\u1eddng h\u1ee3p th\u00ec k\u00edch th\u01b0\u1edbc th\u00ec nh\u1ecf h\u01a1n PNG v\u00e0 JPGs c\u00f3 khi \u0111\u1ebfn 90% ????<\/li>\n<li>Khuy\u00ean d\u00f9ng cho logo v\u00e0 font icon tr\u1eebu t\u01b0\u1ee3ng, gi\u1eef \u0111\u01b0\u1ee3c ch\u1ea5t l\u01b0\u1ee3ng\b m\u00e0 kh\u00f4ng b\u1ecb v\u1ee1 khi ph\u00f3ng to.<\/li>\n<\/ul>\n<blockquote>\n<p><strong>L\u01b0u \u00fd:<\/strong><\/p>\n<ul>\n<li>SVG kh\u00f4ng d\u1ec5 \u0111\u1ec3 m\u1edf l\u00ean th\u1ea5y ngay m\u00e0 th\u01b0\u1eddng l\u00e0 1 d\u00e3y c\u00e1c m\u00e3 HTML n\u00ean kh\u00f4ng th\u00e2n thi\u1ec7n l\u1eafm v\u1edbi.. th\u01b0\u1eddng d\u00e2n.<\/li>\n<li>V\u1edbi nhi\u1ec1u \u1ea3nh tr\u1eebu t\u01b0\u1ee3ng th\u00ec SVG ngon, nh\u01b0ng chi ti\u1ebft ph\u1ee9c t\u1ea1p h\u01a1n th\u00ec \u00edt khi c\u00f3 m\u00e0 x\u00e0i.<\/li>\n<li>Ho\u1eb7c khi c\u1ed1 s\u1eed d\u1ee5ng c\u00f3 th\u1ec3 l\u00e0m t\u0103ng DOM size (k\u00edch th\u01b0\u1edbc HTML c\u00f3 nhi\u1ec1u node h\u01a1n v\u1edbi \u0111\u1ed9 s\u00e2u qu\u00e1 nhi\u1ec1u). Nghe h\u01a1i ph\u1ee9c t\u1ea1p, \u0111\u1ea1i kh\u00e1i l\u00e0 n\u00f3 l\u00e0m c\u00e1i tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n hi\u1ec3n th\u1ecb m\u1ec7t m\u1ecfi h\u01a1n \u0111\u00f3.<\/li>\n<\/ul>\n<\/blockquote>\n<h4>H\u1ebft r\u1ed3i!<\/h4>\n<p>Mong r\u1eb1ng qua b\u00e0i n\u00e0y s\u1ebd gi\u00fap c\u00e1c b\u1ea1n hi\u1ec3u h\u01a1n v\u00e0 bi\u1ebft c\u00e1ch s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ph\u00f9 h\u1ee3p cho website c\u1ee7a m\u00ecnh nh\u00e9. <\/p>\n<p>C\u1ea3m \u01a1n m\u1ecdi ng\u01b0\u1eddi \u0111\u00e3 d\u00e0nh th\u1eddi gian \u0111\u1ecdc b\u00e0i!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh mu\u1ed1n gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n 4 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh hay \u0111\u01b0\u1ee3c d\u00f9ng nh\u1ea5t tr\u00ean c\u00e1c website hi\u1ec7n nay. V\u00e0 c\u0169ng v\u00ec kh\u00f4ng c\u00f3 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh n\u00e0o c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng t\u1ed1t trong m\u1ecdi tr\u01b0\u1eddng h\u1ee3p n\u00ean m\u00ecnh c\u0169ng s\u1ebd m\u00f4 t\u1ea3 lu\u00f4n c\u00e1ch s\u1eed d\u1ee5ng ch\u00fang sao cho h\u1ee3p l\u00fd nh\u00e9. B\u1eaft \u0111\u1ea7u th\u00f4i. 1. JPGs \u0110\u00e2y l\u00e0 \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn nh\u1ea5t hi\u1ec7n nay v\u00ec dung l\u01b0\u1ee3ng khi n\u00e9n t\u1ed1t (nh\u1ecf) m\u00e0 v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c ch\u1ea5t l\u01b0\u1ee3ng \u1ea3nh \u0111\u00e1ng k\u1ec3. Ph\u00f9 h\u1ee3p cho d\u00f9ng \u1ea3nh v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng cao v\u00e0 nhi\u1ec1u m\u00e0u<\/p>\n","protected":false},"author":5,"featured_media":694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[54],"tags":[57,56,55],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/692"}],"collection":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/694"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}