{"id":16285,"date":"2020-08-09T07:44:15","date_gmt":"2020-08-09T00:44:15","guid":{"rendered":"https:\/\/speed.family\/?p=16285"},"modified":"2020-08-09T07:44:15","modified_gmt":"2020-08-09T00:44:15","slug":"icon-nhe-tang-toc","status":"publish","type":"post","link":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/","title":{"rendered":"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website"},"content":{"rendered":"\n

M\u1ed9t s\u1ed1 website d\u00f9ng kh\u00e1 nhi\u1ec1u icon, c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn 10 c\u00e1i v\u00e0 nhi\u1ec1u trong s\u1ed1 \u0111\u00f3 n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean<\/a> (t\u1ee9c l\u00e0 c\u00f3 kh\u1ea3 n\u0103ng cao b\u1ea1n kh\u00f4ng mu\u1ed1n lazy load<\/a> n\u00f3). L\u1ed7i ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 t\u00f4i th\u1ea5y v\u1edbi c\u00e1c icon n\u00e0y l\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ec3 k\u00edch c\u1ee1 qu\u00e1 l\u1edbn. V\u00ed d\u1ee5 icon ch\u1ec9 c\u1ea7n 64px, nh\u01b0ng k\u00edch c\u1ee1 l\u1ea1i \u0111\u1ec3 nh\u1eefng 200px, g\u00e2y l\u00e3ng ph\u00ed dung l\u01b0\u1ee3ng. Trong b\u00e0i vi\u1ebft n\u00e0y t\u00f4i c\u00f2n n\u00f3i 2 m\u1eb9o n\u1eefa \u0111\u1ec3 b\u1ea1n gi\u1ea3m \u1ea3nh h\u01b0\u1edfng t\u1ed1c \u0111\u1ed9 \u0111\u1ebfn t\u1ed1i thi\u1ec3u.<\/p>\n\n\n

OK, ch\u00fang ta b\u1eaft \u0111\u1ea7u th\u00f4i.<\/p>\n\n\n

\n\n\n

B\u01b0\u1edbc 1: L\u00ean trang iconfinder.com<\/a> g\u00f5 m\u1ed9t t\u1eeb kh\u00f3a t\u00ecm ki\u1ebfm icon m\u00e0 b\u1ea1n mu\u1ed1n. Ch\u1ecdn Free icon only\/Ch\u1ec9 c\u00e1c icon mi\u1ec5n ph\u00ed<\/em> \u0111\u1ec3 l\u1ecdc ra c\u00e1c icon kh\u00f4ng ph\u1ea3i mua. Nhi\u1ec1u icon \u1edf \u0111\u00e2y mi\u1ec5n ph\u00ed cho s\u1eed d\u1ee5ng th\u01b0\u01a1ng m\u1ea1i & c\u0169ng kh\u00f4ng ph\u1ea3i ghi c\u00f4ng b\u1eb1ng vi\u1ec7c d\u1eabn link v\u1ec1 t\u00e1c gi\u1ea3 g\u1ed1c. PS: n\u1ebfu b\u1ea1n c\u00f3 s\u1eb5n icon r\u1ed3i th\u00ec b\u1ecf qua b\u01b0\u1edbc 1, b\u01b0\u1edbc 3, l\u01b0u \u00fd l\u00e0 n\u00ean ch\u00fa \u00fd thay \u0111\u1ed5i l\u1ea1i k\u00edch c\u1ee1 \u1ea3nh cho h\u1ee3p l\u00fd nh\u01b0 b\u01b0\u1edbc 2 c\u00f3 n\u00f3i.<\/p>\n\n\n

B\u01b0\u1edbc 2: Ch\u1ecdn k\u00edch c\u1ee1 \u1ea3nh ph\u00f9 h\u1ee3p. \u1ea2nh c\u00e0ng l\u1edbn v\u00e0 c\u00e0ng nhi\u1ec1u m\u00e0u s\u1eafc th\u00ec dung l\u01b0\u1ee3ng c\u1ee7a n\u00f3 c\u0169ng l\u1edbn theo.<\/p>\n\n\n

B\u01b0\u1edbc 3: Download icon d\u1ea1ng png v\u1ec1.<\/p>\n\n\n

B\u01b0\u1edbc 4: V\u00e0o trang tinypng.com<\/a> \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng \u1ea3nh. N\u00f3 c\u00f3 th\u1ec3 gi\u1ea3m \u0111\u01b0\u1ee3c 50 – 60% dung l\u01b0\u1ee3ng.<\/p>\n\n\n

B\u01b0\u1edbc 5: V\u00e0o trang base64-image.de<\/a> \u0111\u1ec3 chuy\u1ec3n \u1ea3nh v\u1eeba c\u00f3 th\u00e0nh d\u1ea1ng \u1ea3nh base64<\/a>, gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c m\u1ed9t k\u1ebft n\u1ed1i d\u00f9 dung l\u01b0\u1ee3ng c\u00f3 t\u0103ng l\u00ean m\u1ed9t ch\u00fat (kho\u1ea3ng 20 – 30%).<\/p>\n\n\n

V\u00ed d\u1ee5 nh\u01b0 \u1ea3nh d\u01b0\u1edbi \u0111\u00e2y, t\u00f4i \u00e1p d\u1ee5ng c\u00e1c thao t\u00e1c tr\u00ean:<\/p>\n\n\n

\"\"\/<\/figure><\/div>\n\n\n

\u1ea2nh g\u1ed1c tr\u00ean Iconfinder: 3,93KB<\/p>\n\n\n

\u1ea2nh sau n\u00e9n v\u1edbi TinyPNG: 1,35KB<\/p>\n\n\n

\u1ea2nh sau chuy\u1ec3n th\u00e0nh \u0111\u1ecbnh d\u1ea1ng base64: 1,85KB<\/p>\n\n\n

Nh\u01b0 v\u1eady so v\u1edbi \u1ea3nh g\u1ed1c b\u1ea1n gi\u1ea3m \u0111\u01b0\u1ee3c 50% dung l\u01b0\u1ee3ng v\u00e0 m\u1ed9t k\u1ebft n\u1ed1i, c\u0169ng h\u1eddi! L\u1ee3i \u00edch t\u0103ng th\u00eam n\u1ebfu b\u1ea1n c\u00f3 nhi\u1ec1u icon.<\/p>\n\n\n

PS1: v\u1edbi nh\u1eefng icon kh\u00f4ng n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean, b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng c\u1ea7n d\u00f9ng \u0111\u1ebfn d\u1ea1ng \u1ea3nh base64 m\u00e0 ch\u1ec9 c\u1ea7n gi\u1ea3m thi\u1ec3u dung l\u01b0\u1ee3ng \u1ea3nh v\u00e0 lazyload \u0111\u1ec3 n\u00f3 kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 k\u1ebft xu\u1ea5t cho m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean.<\/p>\n\n\n

PS2: nh\u01b0\u1ee3c \u0111i\u1ec3m c\u1ee7a \u1ea3nh base64 l\u00e0 n\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c index b\u1edfi Google v\u00e0 l\u00e0m t\u0103ng k\u00edch c\u1ee1 \u0111\u00f4i ch\u00fat (so v\u1edbi \u1ea3nh \u0111\u00e3 n\u00e9n r\u1ed3i, c\u00f2n so v\u1edbi \u1ea3nh g\u1ed1c n\u00f3 v\u1eabn gi\u1ea3m 40-50%), v\u00ec th\u1ec3 ch\u1ec9 n\u00ean \u00e1p d\u1ee5ng v\u1edbi \u1ea3nh kh\u00f4ng quan tr\u1ecdng v\u00e0 c\u00f3 dung l\u01b0\u1ee3ng nh\u1ecf nh\u01b0 icon. V\u1ec1 vi\u1ec7c n\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c index b\u1edfi Google t\u00f4i c\u0169ng h\u01a1i nghi ng\u1edd, Google c\u00f3 l\u1ebd th\u1eeba \u0111\u1ee7 c\u00f4ng ngh\u1ec7 \u0111\u1ec3 nh\u00ecn \u0111\u01b0\u1ee3c \u1ea3nh base64, tuy nhi\u00ean c\u00e1c t\u00e0i li\u1ec7u t\u00f4i bi\u1ebft \u0111\u1ec1u n\u00f3i l\u00e0 n\u00f3 kh\u00f4ng \u0111\u01b0\u1ee3c index.<\/p>\n\n\n

C\u1eadp nh\u1eadt: Sau khi share b\u00e0i n\u00e0y l\u00ean nh\u00f3m FB, anh em chia s\u1ebb th\u00eam b\u00ean d\u01b0\u1edbi b\u00ecnh lu\u1eadn l\u00e0 d\u1ea1ng \u1ea3nh SVG (code \u1ea3nh ch\u1ee9 kh\u00f4ng ph\u1ea3i \u1ea3nh thu\u1ea7n t\u00fay) th\u1eadm ch\u00ed c\u00f2n c\u00f3 th\u1ec3 nh\u1eb9 h\u01a1n, v\u00e0 n\u00ean t\u00ecm hi\u1ec3u th\u00eam c\u1ea3 CSS Image Sprites n\u1eefa. Ngo\u00e0i ra chuy\u1ec3n th\u00e0nh font icon c\u00f3 kh\u1ea3 n\u0103ng \u0111\u1ed5 m\u00e0u cho icon qua CSS. V\u1edbi ai d\u00f9ng plugin Autoptimize<\/a> (n\u00f3 r\u1ea5t ph\u1ed5 bi\u1ebfn) c\u00f3 th\u1ec3 chuy\u1ec3n th\u00e0nh base64 t\u1ef1 \u0111\u1ed9ng thay v\u00ec ph\u1ea3i l\u00e0m th\u1ee7 c\u00f4ng <3<\/p>\n","protected":false},"excerpt":{"rendered":"

M\u1ed9t s\u1ed1 website d\u00f9ng kh\u00e1 nhi\u1ec1u icon, c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn 10 c\u00e1i v\u00e0 nhi\u1ec1u trong s\u1ed1 \u0111\u00f3 n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (t\u1ee9c l\u00e0 c\u00f3 kh\u1ea3 n\u0103ng cao b\u1ea1n kh\u00f4ng mu\u1ed1n lazy load n\u00f3). L\u1ed7i ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 t\u00f4i th\u1ea5y v\u1edbi c\u00e1c icon n\u00e0y l\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ec3 k\u00edch c\u1ee1 qu\u00e1 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[280],"tags":[],"yoast_head":"\nL\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website • 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\/icon-nhe-tang-toc\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"M\u1ed9t s\u1ed1 website d\u00f9ng kh\u00e1 nhi\u1ec1u icon, c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn 10 c\u00e1i v\u00e0 nhi\u1ec1u trong s\u1ed1 \u0111\u00f3 n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (t\u1ee9c l\u00e0 c\u00f3 kh\u1ea3 n\u0103ng cao b\u1ea1n kh\u00f4ng mu\u1ed1n lazy load n\u00f3). L\u1ed7i ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 t\u00f4i th\u1ea5y v\u1edbi c\u00e1c icon n\u00e0y l\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ec3 k\u00edch c\u1ee1 qu\u00e1 …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/icon-nhe-tang-toc\/\" \/>\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-08-09T00:44:15+00:00\" \/>\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=\"4 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website • 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\/icon-nhe-tang-toc\/","og_locale":"vi_VN","og_type":"article","og_title":"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website • Ki\u1ebfn c\u00e0ng","og_description":"M\u1ed9t s\u1ed1 website d\u00f9ng kh\u00e1 nhi\u1ec1u icon, c\u00f3 th\u1ec3 l\u00ean \u0111\u1ebfn 10 c\u00e1i v\u00e0 nhi\u1ec1u trong s\u1ed1 \u0111\u00f3 n\u1eb1m trong m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean (t\u1ee9c l\u00e0 c\u00f3 kh\u1ea3 n\u0103ng cao b\u1ea1n kh\u00f4ng mu\u1ed1n lazy load n\u00f3). L\u1ed7i ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 t\u00f4i th\u1ea5y v\u1edbi c\u00e1c icon n\u00e0y l\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf \u0111\u1ec3 k\u00edch c\u1ee1 qu\u00e1 …","og_url":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-08-09T00:44:15+00:00","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":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/","url":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/","name":"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong t\u0103ng t\u1ed1c Website • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-08-09T00:44:15+00:00","dateModified":"2020-08-09T00:44:15+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/icon-nhe-tang-toc\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/icon-nhe-tang-toc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"L\u00e0m v\u00e0 ki\u1ebfm m\u1ea5y c\u00e1i icon th\u1eadt nh\u1eb9 trong 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\/16285"}],"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=16285"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16285\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}