{"id":16866,"date":"2020-03-24T20:51:26","date_gmt":"2020-03-24T13:51:26","guid":{"rendered":"https:\/\/kiencang.net\/?p=15482"},"modified":"2020-03-24T20:51:26","modified_gmt":"2020-03-24T13:51:26","slug":"kich-thuoc-anh-toi-uu","status":"publish","type":"post","link":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/","title":{"rendered":"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website"},"content":{"rendered":"\n<p>Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u00e1o c\u00e1o danh s\u00e1ch t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh tr\u00ean trang c\u1ee7a b\u1ea1n kh\u00f4ng c\u00f3 k\u00edch th\u01b0\u1edbc \u1ea3nh t\u1ed1i \u01b0u, c\u00f9ng v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m t\u00ednh theo kilobyte (KB). Thay \u0111\u1ed5i k\u00edch c\u1ee1 c\u00e1c \u1ea3nh n\u00e0y gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m d\u1eef li\u1ec7u v\u00e0 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kich-co-anh-phu-hop.png\" alt=\"k\u00edch c\u1ee1 \u1ea3nh ph\u00f9 h\u1ee3p\" class=\"wp-image-15483\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">C\u00e1ch Lighthouse t\u00ecm ra v\u00e0 \u0111\u00e1nh gi\u00e1 c\u00e1c \u1ea3nh qu\u00e1 c\u1ee1<\/h2>\n\n\n<p>V\u1edbi t\u1eebng \u1ea3nh tr\u00ean trang, Lighthouse so s\u00e1nh k\u00edch c\u1ee1 c\u1ee7a \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t (render) so v\u1edbi k\u00edch c\u1ee1 \u1ea3nh th\u1ef1c t\u1ebf. K\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t c\u0169ng \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n theo t\u1ef7 l\u1ec7 pixel c\u1ee7a thi\u1ebft b\u1ecb. N\u1ebfu k\u00edch c\u1ee1 \u0111\u00e3 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t nh\u1ecf h\u01a1n \u00edt nh\u1ea5t 25 KB so v\u1edbi k\u00edch th\u01b0\u1edbc th\u1ef1c t\u1ebf th\u00ec h\u00ecnh \u1ea3nh s\u1ebd kh\u00f4ng v\u01b0\u1ee3t qua \u0111\u01b0\u1ee3c b\u00e0i ki\u1ec3m tra c\u1ee7a Lighthouse (v\u00e0 b\u1ecb g\u1eafn c\u1edd c\u1ea3nh b\u00e1o).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">Chi\u1ebfn l\u01b0\u1ee3c gi\u00fap b\u1ea1n t\u1ea1o c\u00e1c \u1ea3nh c\u00f3 k\u00edch c\u1ee1 t\u1ed1i \u01b0u<\/h2>\n\n\n<p>L\u00fd t\u01b0\u1edfng nh\u1ea5t, trang c\u1ee7a b\u1ea1n kh\u00f4ng n\u00ean ph\u1ee5c v\u1ee5 c\u00e1c \u1ea3nh l\u1edbn h\u01a1n phi\u00ean b\u1ea3n m\u00e0 \u0111\u00e3 \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. B\u1ea5t c\u1ee9 \u1ea3nh n\u00e0o l\u1edbn h\u01a1n s\u1ebd \u0111em l\u1ea1i h\u1eadu qu\u1ea3 l\u00e0 l\u00e3ng ph\u00ed d\u1eef li\u1ec7u v\u00e0 l\u00e0m ch\u1eadm th\u1eddi gian t\u1ea3i trang.<\/p>\n\n\n<p>Chi\u1ebfn l\u01b0\u1ee3c ch\u00ednh \u0111\u1ec3 ph\u1ee5c v\u1ee5 c\u00e1c \u1ea3nh c\u00f3 k\u00edch th\u01b0\u1edbc t\u1ed1i \u01b0u \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 &#8220;\u1ea3nh \u0111\u00e1p \u1ee9ng&#8221;. V\u1edbi \u1ea3nh \u0111\u00e1p \u1ee9ng, b\u1ea1n c\u1ea7n ph\u1ea3i t\u1ea1o ra nhi\u1ec1u phi\u00ean b\u1ea3n c\u1ee7a h\u00ecnh \u1ea3nh, r\u1ed3i sau \u0111\u00f3 ch\u1ec9 \u0111\u1ecbnh c\u1ee5 th\u1ec3 phi\u00ean b\u1ea3n s\u1eed d\u1ee5ng trong HTML ho\u1eb7c CSS s\u1eed d\u1ee5ng c\u00e1c truy v\u1ea5n media, k\u00edch th\u01b0\u1edbc c\u1ee7a khung nh\u00ecn tr\u00ecnh duy\u1ec7t (viewport dimensions), v\u00e0 nhi\u1ec1u c\u00e1i kh\u00e1c n\u1eefa. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam c\u00e1ch ph\u1ee5c v\u1ee5 c\u00e1c \u1ea3nh \u0111\u00e1p \u1ee9ng \u1edf b\u00e0i vi\u1ebft kh\u00e1c.<\/p>\n\n\n<p>M\u1ed9t chi\u1ebfn l\u01b0\u1ee3c n\u1eefa l\u00e0 s\u1eed d\u1ee5ng <a href=\"https:\/\/kiencang.net\/gif-png-jpg-hoac-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0111\u1ecbnh d\u1ea1ng \u1ea3nh ki\u1ec3u vector, ch\u1eb3ng h\u1ea1n nh\u01b0 SVG<\/a>. V\u1edbi s\u1ed1 l\u01b0\u1ee3ng m\u00e3 c\u00f3 h\u1ea1n, \u1ea3nh SVG c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng ra b\u1ea5t c\u1ee9 k\u00edch c\u1ee1 n\u00e0o. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam b\u00e0i vi\u1ebft thay th\u1ebf c\u00e1c icon ph\u1ee9c t\u1ea1p b\u1eb1ng SVG.<\/p>\n\n\n<p>C\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 <a href=\"https:\/\/www.npmjs.com\/package\/gulp-responsive\" target=\"_blank\" rel=\"noreferrer noopener\">gulp-responsive<\/a> ho\u1eb7c <a href=\"https:\/\/www.npmjs.com\/package\/responsive-images-generator\" target=\"_blank\" rel=\"noreferrer noopener\">responsive-images-generator<\/a> c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n sang c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh kh\u00e1c nhau. Ngo\u00e0i ra c\u00f3 nhi\u1ec1u <a href=\"https:\/\/kiencang.net\/cdn-toi-uu-anh\/\" target=\"_blank\" rel=\"noreferrer noopener\">d\u1ecbch v\u1ee5 CDN gi\u00fap t\u1ea1o ra nhi\u1ec1u phi\u00ean b\u1ea3n \u1ea3nh<\/a>, ho\u1eb7c khi b\u1ea1n t\u1ea3i l\u00ean \u1ea3nh, ho\u1eb7c y\u00eau c\u1ea7u n\u00f3 t\u1eeb trang c\u1ee7a b\u1ea1n.<\/p>\n\n\n<p class=\"has-luminous-vivid-amber-background-color has-background\">PS: b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o <a href=\"https:\/\/kiencang.net\/kich-co-anh-phu-hop-imsantiny\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1ch ph\u1ee5c l\u1ed7i k\u00edch c\u1ee1 \u1ea3nh kh\u00f4ng ph\u00f9 h\u1ee3p \u1edf b\u00e0i vi\u1ebft n\u00e0y<\/a>.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Properly size images, trang: web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u00e1o c\u00e1o danh s\u00e1ch t\u1ea5t c\u1ea3 c\u00e1c \u1ea3nh tr\u00ean trang c\u1ee7a b\u1ea1n kh\u00f4ng c\u00f3 k\u00edch th\u01b0\u1edbc \u1ea3nh t\u1ed1i \u01b0u, c\u00f9ng v\u1edbi ti\u1ec1m n\u0103ng ti\u1ebft ki\u1ec7m t\u00ednh theo kilobyte (KB). Thay \u0111\u1ed5i k\u00edch c\u1ee1 c\u00e1c \u1ea3nh n\u00e0y gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m d\u1eef li\u1ec7u v\u00e0 c\u1ea3i thi\u1ec7n th\u1eddi gian t\u1ea3i trang. &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[282],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"N\u1ebfu \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, \u0111i\u1ec1u n\u00e0y s\u1ebd g\u00e2y d\u1eef li\u1ec7u d\u01b0 th\u1eeba v\u00f4 \u00edch, v\u00e0 l\u00e0m t\u0103ng th\u1eddi gian trang kh\u00f4ng c\u1ea7n thi\u1ebft.\" \/>\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\/kich-thuoc-anh-toi-uu\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"N\u1ebfu \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, \u0111i\u1ec1u n\u00e0y s\u1ebd g\u00e2y d\u1eef li\u1ec7u d\u01b0 th\u1eeba v\u00f4 \u00edch, v\u00e0 l\u00e0m t\u0103ng th\u1eddi gian trang kh\u00f4ng c\u1ea7n thi\u1ebft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/\" \/>\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=\"2020-03-24T13:51:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kich-co-anh-phu-hop.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=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website &#8226; Ki\u1ebfn c\u00e0ng","description":"N\u1ebfu \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, \u0111i\u1ec1u n\u00e0y s\u1ebd g\u00e2y d\u1eef li\u1ec7u d\u01b0 th\u1eeba v\u00f4 \u00edch, v\u00e0 l\u00e0m t\u0103ng th\u1eddi gian trang kh\u00f4ng c\u1ea7n thi\u1ebft.","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\/kich-thuoc-anh-toi-uu\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website &#8226; Ki\u1ebfn c\u00e0ng","og_description":"N\u1ebfu \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, \u0111i\u1ec1u n\u00e0y s\u1ebd g\u00e2y d\u1eef li\u1ec7u d\u01b0 th\u1eeba v\u00f4 \u00edch, v\u00e0 l\u00e0m t\u0103ng th\u1eddi gian trang kh\u00f4ng c\u1ea7n thi\u1ebft.","og_url":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-24T13:51:26+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/kich-co-anh-phu-hop.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":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/","url":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/","name":"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-24T13:51:26+00:00","dateModified":"2020-03-24T13:51:26+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"N\u1ebfu \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 k\u00edch c\u1ee1 l\u1edbn h\u01a1n khung nh\u00ecn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, \u0111i\u1ec1u n\u00e0y s\u1ebd g\u00e2y d\u1eef li\u1ec7u d\u01b0 th\u1eeba v\u00f4 \u00edch, v\u00e0 l\u00e0m t\u0103ng th\u1eddi gian trang kh\u00f4ng c\u1ea7n thi\u1ebft.","breadcrumb":{"@id":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/kich-thuoc-anh-toi-uu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ed1i \u01b0u k\u00edch th\u01b0\u1edbc \u1ea3nh \u0111\u1ec3 t\u0103ng t\u1ed1c website"}]},{"@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\/16866"}],"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=16866"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16866\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}