https://www.ezfrontend.com/assets/js/f199793a.91424337.js

1"use strict";(self.webpackChunkeasy_frontend=self.webpackChunkeasy_frontend||[]).push([[6417],{3905:function(n,t,e){e.d(t,{Zo:function(){return u},kt:function(){return g}});var h=e(7294);function i(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function a(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var h=Object.getOwnPropertySymbols(n);t&&(h=h.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,h)}return e}function r(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?a(Object(e),!0).forEach((function(t){i(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):a(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function o(n,t){if(null==n)return{};var e,h,i=function(n,t){if(null==n)return{};var e,h,i={},a=Object.keys(n);for(h=0;h<a.length;h++)e=a[h],t.indexOf(e)>=0||(i[e]=n[e]);return i}(n,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(h=0;h<a.length;h++)e=a[h],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(i[e]=n[e])}return i}var l=h.createContext({}),c=function(n){var t=h.useContext(l),e=t;return n&&(e="function"==typeof n?n(t):r(r({},t),n)),e},u=function(n){var t=c(n.components);return h.createElement(l.Provider,{value:t},n.children)},p="mdxType",s={inlineCode:"code",wrapper:function(n){var t=n.children;return h.createElement(h.Fragment,{},t)}},m=h.forwardRef((function(n,t){var e=n.components,i=n.mdxType,a=n.originalType,l=n.parentName,u=o(n,["components","mdxType","originalType","parentName"]),p=c(e),m=i,g=p["".concat(l,".").concat(m)]||p[m]||s[m]||a;return e?h.createElement(g,r(r({ref:t},u),{},{components:e})):h.createElement(g,r({ref:t},u))}));function g(n,t){var e=arguments,i=t&&t.mdxType;if("string"==typeof n||i){var a=e.length,r=new Array(a);r[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=n,o[p]="string"==typeof n?n:i,r[1]=o;for(var c=2;c<a;c++)r[c]=e[c];return h.createElement.apply(null,r)}return h.createElement.apply(null,e)}m.displayName="MDXCreateElement"},8559:function(n,t,e){e.r(t),e.d(t,{assets:function(){return u},contentTitle:function(){return l},default:function(){return g},frontMatter:function(){return o},metadata:function(){return c},toc:function(){return p}});var h=e(7462),i=e(3366),a=(e(7294),e(3905)),r=["components"],o={slug:"optimize-web-images",title:"Nh\u1eefng \u0111i\u1ec1u c\u1ea7n l\u01b0u \xfd khi l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh trong d\u1ef1 \xe1n th\u1ef1c t\u1ebf \ud83d\udd25",author:"H\u1eadu Nguy\u1ec5n",author_title:"Senior Software Engineer at fram^",author_url:"https://github.com/paulnguyen-mn",author_image_url:"https://avatars3.githubusercontent.com/u/31444102?s=400&u=c545a527aa31843e1361462e410c0f51863e8e26&v=4",image:"https://res.cloudinary.com/easy-frontend/image/upload/v1595584742/blog/optimize-images.jpg",tags:["frontend tips","toi uu hinh anh"]},l=void 0,c={permalink:"/blog/optimize-web-images",source:"@site/blog/2020-07-24-optimize-web-images.md",title:"Nh\u1eefng \u0111i\u1ec1u c\u1ea7n l\u01b0u \xfd khi l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh trong d\u1ef1 \xe1n th\u1ef1c t\u1ebf \ud83d\udd25",description:"H\u1ea7u h\u1ebft t\u1ea5t c\u1ea3 c\xe1c d\u1ef1 \xe1n th\u1ef1c t\u1ebf \u0111\u1ec1u s\u1eed d\u1ee5ng h\xecnh \u1ea3nh, kh\xf4ng \xedt th\xec nhi\u1ec1u. Th\u1ec9nh tho\u1ea3ng ch\xfang ta l\u1ea1i g\u1eb7p ph\u1ea3i nh\u1eefng v\u1ea5n \u0111\u1ec1 nh\u01b0 h\xecnh \u1ea3nh t\u1ea3i ch\u1eadm qu\xe1, t\u1ea1o ra nhi\u1ec1u h\xecnh \u1ea3nh gi\u1ed1ng nhau cho tr\u1ea1ng th\xe1i kh\xe1c nhau, ... C\xf9ng m\xecnh t\xecm hi\u1ec3u m\u1ed9t s\u1ed1 \u0111i\u1ec1u c\u1ea7n l\u01b0u \xfd khi l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh \u0111\u1ec3 cho web c\u1ee7a ch\xfang ta ch\u1ea1y m\u01b0\u1ee3t m\xe0 h\u01a1n nh\xe9! \ud83d\ude0d",date:"2020-07-24T00:00:00.000Z",formattedDate:"July 24, 2020",tags:[{label:"frontend tips",permalink:"/blog/tags/frontend-tips"},{label:"toi uu hinh anh",permalink:"/blog/tags/toi-uu-hinh-anh"}],readingTime:3.77,hasTruncateMarker:!0,authors:[{name:"H\u1eadu Nguy\u1ec5n",title:"Senior Softw

1are Engineer at fram^",url:"https://github.com/paulnguyen-mn",imageURL:"https://avatars3.githubusercontent.com/u/31444102?s=400&u=c545a527aa31843e1361462e410c0f51863e8e26&v=4"}],frontMatter:{slug:"optimize-web-images",title:"Nh\u1eefng \u0111i\u1ec1u c\u1ea7n l\u01b0u \xfd khi l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh trong d\u1ef1 \xe1n th\u1ef1c t\u1ebf \ud83d\udd25",author:"H\u1eadu Nguy\u1ec5n",author_title:"Senior Software Engineer at fram^",author_url:"https://github.com/paulnguyen-mn",author_image_url:"https://avatars3.githubusercontent.com/u/31444102?s=400&u=c545a527aa31843e1361462e410c0f51863e8e26&v=4",image:"https://res.cloudinary.com/easy-frontend/image/upload/v1595584742/blog/optimize-images.jpg",tags:["frontend tips","toi uu hinh anh"]},prevItem:{title:'7 th\xf3i quen c\u1ee7a m\u1ed9t developer "ch\u1ea5t" \ud83d\ude0e',permalink:"/blog/developer-habits"},nextItem:{title:"B\xed k\xedp cho bu\u1ed5i ph\u1ecfng v\u1ea5n ReactJS th\xe0nh c\xf4ng \ud83c\udf89",permalink:"/blog/bi-kip-phong-van-reactjs-thanh-cong"}},u={authorsImageUrls:[void 0]},p=[{value:"1. T\u1ed1i \u01b0u h\xecnh \u1ea3nh tr\u01b0\u1edbc khi upload l\xean web",id:"1-t\u1ed1i-\u01b0u-h\xecnh-\u1ea3nh-tr\u01b0\u1edbc-khi-upload-l\xean-web",level:2},{value:"TinyPNG",id:"tinypng",level:3},{value:"Squoosh",id:"squoosh",level:3},{value:"2. \u0110\u01b0a l\xean CDN n\u1ebfu c\xf3 th\u1ec3",id:"2-\u0111\u01b0a-l\xean-cdn-n\u1ebfu-c\xf3-th\u1ec3",level:2},{value:"3. Tr\xe1nh vi\u1ec7c s\u1eed d\u1ee5ng icon b\u1eb1ng h\xecnh \u1ea3nh",id:"3-tr\xe1nh-vi\u1ec7c-s\u1eed-d\u1ee5ng-icon-b\u1eb1ng-h\xecnh-\u1ea3nh",level:2},{value:"4. C\xf3 th\u1ec3 bi\u1ebfn \u0111\u1ed5i m\xe0u s\u1eafc h\xecnh \u1ea3nh b\u1eb1ng CSS filter",id:"4-c\xf3-th\u1ec3-bi\u1ebfn-\u0111\u1ed5i-m\xe0u-s\u1eafc-h\xecnh-\u1ea3nh-b\u1eb1ng-css-filter",level:2}],s={toc:p},m="wrapper";function g(n){var t=n.components,o=(0,i.Z)(n,r);return(0,a.kt)(m,(0,h.Z)({},s,o,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"H\u1ea7u h\u1ebft t\u1ea5t c\u1ea3 c\xe1c d\u1ef1 \xe1n th\u1ef1c t\u1ebf \u0111\u1ec1u s\u1eed d\u1ee5ng h\xecnh \u1ea3nh, kh\xf4ng \xedt th\xec nhi\u1ec1u. Th\u1ec9nh tho\u1ea3ng ch\xfang ta l\u1ea1i g\u1eb7p ph\u1ea3i nh\u1eefng v\u1ea5n \u0111\u1ec1 nh\u01b0 h\xecnh \u1ea3nh t\u1ea3i ch\u1eadm qu\xe1, t\u1ea1o ra nhi\u1ec1u h\xecnh \u1ea3nh gi\u1ed1ng nhau cho tr\u1ea1ng th\xe1i kh\xe1c nhau, ... C\xf9ng m\xecnh t\xecm hi\u1ec3u m\u1ed9t s\u1ed1 \u0111i\u1ec1u c\u1ea7n l\u01b0u \xfd khi l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh \u0111\u1ec3 cho web c\u1ee7a ch\xfang ta ch\u1ea1y m\u01b0\u1ee3t m\xe0 h\u01a1n nh\xe9! \ud83d\ude0d"),(0,a.kt)("p",null,"N\u1ed9i dung b\xe0i chia s\u1ebb:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"T\u1ed1i \u01b0u h\xecnh \u1ea3nh tr\u01b0\u1edbc khi upload l\xean web"),(0,a.kt)("li",{parentName:"ol"},"\u0110\u01b0a l\xean CDN n\u1ebfu c\xf3 th\u1ec3"),(0,a.kt)("li",{parentName:"ol"},"Tr\xe1nh vi\u1ec7c s\u1eed d\u1ee5ng icon b\u1eb1ng h\xecnh \u1ea3nh"),(0,a.kt)("li",{parentName:"ol"},"C\xf3 th\u1ec3 bi\u1ebfn \u0111\u1ed5i m\xe0u s\u1eafc h\xecnh \u1ea3nh b\u1eb1ng CSS filter")),(0,a.kt)("hr",null),(0,a.kt)("h2",{id:"1-t\u1ed1i-\u01b0u-h\xecnh-\u1ea3nh-tr\u01b0\u1edbc-khi-upload-l\xean-web"},"1. T\u1ed1i \u01b0u h\xecnh \u1ea3nh tr\u01b0\u1edbc khi upload l\xean web"),(0,a.kt)("p",null,"T\u1ea1i sao ph\u1ea3i t\u1ed1i \u01b0u h\xecnh \u1ea3nh nh\u1ec9?"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"K\xedch th\u01b0\u1edbc nh\u1ecf h\u01a1n th\xec load nhanh h\u01a1n n\xe8."),(0,a.kt)("li",{parentName:"ul"},"Tr\xe1nh s\u1eed d\u1ee5ng k\xedch th\u01b0\u1edbc to h\u01a1n c\u1ea7n thi\u1ebft. V\xed d\u1ee5 c\u1ea7n ",(0,a.kt)("inlineCode",{parentName:"li"},"300px")," nh\u01b0ng \u1ea3nh t\u1edbi ",(0,a.kt)("inlineCode",{parentName:"li"},"1000px")," th\xec th\u1eadt s\u1ef1 kh\xf4ng c\u1ea7n thi\u1ebft n\xe8."),(0,a.kt)("li",{parentName:"ul"},"C\xf3 \u0111\u01b0\u1ee3c h\xecnh \u1ea3nh kh\xf4ng kh\xe1c bi\u1ec7t l\u1eafm nh\u01b0ng k\xedch th\u01b0\u1edbc nh\u1ecf h\u01a1n \u2764\ufe0f")),(0,a.kt)("p",null,"B\u1ea1n c\xf3 th\u1ec3 s\u1eed d\u1ee5ng 1 trong 2 c\xf4ng c\u1ee5 sau \u0111\xe2y \u0111\u1ec3 t\u1ed1i \u01b0u h\xecnh \u1ea3nh n\xe8."),(0,a.kt)("h3",{id:"tinypng"},(0,a.kt)("a",{parentName:"h3",href:"https://tinypng.com/"},"TinyPNG")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Website: ",(0,a.kt)("a",{parentName:"li",href:"https://tinypng.com/"},"https://tinypng.com/")),(0,a.kt)("li",{parentName:"ul"},"Trang n\xe0y t\u1ed1i \u01b0u h\xecnh \u1ea3nh t\u1ed1t n\xe8, gi\u1ea3m \u0111\u01b0\u1ee3c kh\xe1 nhi\u1ec1u \u0111\xf3 m\u1ecdi ng\u01b0\u1eddi. T\xf9y h\xecnh \u1ea3nh m\xe0 n\xf3 gi\u1ea3m \u0111\u01b0\u1ee3c nhi\u1ec1u hay \xedt."),(0,a.kt)("li",{parentName:"ul"},"C\xe1ch th\u1ee9c th\u1ef1c hi\u1ec7n l\xe0 s\u1eed d\u1ee5ng b\u1ed9 m\xe0u nh\u1ecf h\u01a1n, v\xec th\u1ebf k\xedch th\u01b0\u1edbc c\u0169ng gi\u1ea3m \u0111\u01b0\u1ee3c \u0111\xe1ng k\u1ec3 n\xe8.")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"TinyPNG optimize image",src:e(9667).Z,width:"1920",height:"968"})),(0,a.kt)("h3",{id:"squoosh"},(0,a.kt)("a",{parentName:"h3",href:"https://squoosh.app/"},"Squoosh")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Website: ",(0,a.kt)("a",{parentName:"li",href:"https://squoosh.app/"},"https://squoosh.app/")),(0,a.kt)("li",{parentName:"ul"},"Tool n\xe0y c\u1ee7a Google n\xean bao x\u1ecbn x\xf2 lu\xf4n n\xe8."),(0,a.kt)("li",{parentName:"ul"},"C\xf3 th\u1ec3 ch\u1ecdn nhi\u1ec1u thu\u1eadt to\xe1n kh\xe1c nhau \u0111\u1ec3 t\u1ed1i \u01b0u h\xecnh \u1ea3nh."),(0,a.kt)("li",{parentName:"ul"},"C\xf3 th\u1ec3 ",(0,a.kt)("inlineCode",{parentName:"li"},"resize")," \u1ea3nh tr\u1ef1c ti\u1ebfp ngay tr\xean website n\xean c\u1ef1c k\xec ti\u1ec7n l\u1ee3i lu\xf4n."),(0,a.kt)("li",{parentName:"ul"},"M\xecnh th\xec hay d\xf9ng tool n\xe0y \u0111\u1ec3 t\u1ed1i \u01b0u h\xecnh \u1ea3nh cho d\u1ef1 \xe1n m\xecnh l\xe0m.")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Squoose.app optimize image",src:e(1998).Z,width:"1928",height:"1000"})),(0,a.kt)("admonition",{title:"N\u1ebfu ph\xe2n v\xe2n kh\xf4ng bi\u1ebft s\u1eed d\u1ee5ng tool n\xe0o?",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\u0110\u01a1n gi\u1ea3n l\xe0 h\xe3y th\u1eed upload l\xean c\u1ea3 2 website, xem c\xe1i n\xe0o t\u1ed1i \u01b0u \u0111\u01b0\u1ee3c t\u1ed1t h\u01a1n th\xec s\u1eed d\u1ee5ng c\xe1i \u0111\xf3 n\xe8 hihi \ud83d\ude09")),(0,a.kt)("h2",{id:"2-\u0111\u01b0a-l\xean-cdn-n\u1ebfu-c\xf3-th\u1ec3"},"2. \u0110\u01b0a l\xean CDN n\u1ebfu c\xf3 th\u1ec3"),(0,a.kt)("p",null,"N\u1ebfu nh\u01b0 sau khi o

1ptimize h\xecnh \u1ea3nh m\xe0 k\xedch th\u01b0\u1edbc h\xecnh \u1ea3nh v\u1eabn c\xf2n l\u1edbn (> 100kb) th\xec bi\u1ebft ph\u1ea3i l\xe0m sao? N\u1ebfu c\xf3 th\u1ec3 h\xe3y upload nh\u1eefng h\xecnh \u1ea3nh n\xe0y l\xean CDN \u0111\u1ec3 n\xf3 c\xf3 th\u1ec3 t\u1ea3i nhanh h\u01a1n nh\xe9. "),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Squoose.app optimize image",src:e(2579).Z,width:"1520",height:"776"})),(0,a.kt)("p",null,"H\u01a1n th\u1ebf n\u1eefa, m\u1ea5y d\u1ecbch v\u1ee5 Image CDN gi\u1edd c\xf2n c\xf3 th\u1ec3 gi\xfap b\u1ea1n optimize, resize, crop h\xecnh \u1ea3nh, ... b\u1eb1ng c\xe1ch truy\u1ec1n query params v\xe0o \u0111\u01b0\u1eddng d\u1eabn c\u1ee7a h\xecnh \u1ea3nh lu\xf4n. Tuy nhi\xean n\xf3 s\u1ebd c\xf3 ph\xed \u0111\xf3 nh\xe9, n\xean ki\u1ec3m tra c\u1ea7n th\u1eadn tr\u01b0\u1edbc khi d\xf9ng nhen."),(0,a.kt)("p",null,"M\u1ed9t v\xe0i Image CDN website cho b\u1ea1n tham kh\u1ea3o: "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"S3 + CloudFront c\u1ee7a AWS"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://www.cloudflare.com/"},"Cloudflare")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://cloud.google.com/cdn"},"Cloud CDN")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://bunnycdn.com/"},"Bunny CDN")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://cloudinary.com/"},"Cloudinary")),(0,a.kt)("li",{parentName:"ul"},"...")),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"Link tham kh\u1ea3o v\u1ec1 Image CDN: ",(0,a.kt)("a",{parentName:"p",href:"https://web.dev/image-cdns/"},"https://web.dev/image-cdns/"))),(0,a.kt)("h2",{id:"3-tr\xe1nh-vi\u1ec7c-s\u1eed-d\u1ee5ng-icon-b\u1eb1ng-h\xecnh-\u1ea3nh"},"3. Tr\xe1nh vi\u1ec7c s\u1eed d\u1ee5ng icon b\u1eb1ng h\xecnh \u1ea3nh"),(0,a.kt)("p",null,"Trong m\u1ed9t s\u1ed1 d\u1ef1 \xe1n, h\u1ecd d\xf9ng icon b\u1eb1ng h\xecnh \u1ea3nh, t\u1ee9c m\u1ed9t icon l\xe0 m\u1ed9t c\xe1i h\xecnh png/svg. \u0110i\u1ec1u n\xe0y c\xf3 nhi\u1ec1u b\u1ea5t ti\u1ec7n: "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"M\u1ed7i l\u1ea7n s\u1eed d\u1ee5ng icon n\xe0y, l\xe0 m\u1ed9t l\u1ea7n request t\u1ea3i c\xe1i file h\u1ec9nh \u1ea3nh icon \u0111\xf3."),(0,a.kt)("li",{parentName:"ul"},"Mu\u1ed1n c\xf3 nhi\u1ec1u m\xe0u cho m\u1ed9t icon th\xec ph\u1ea3i c\xf3 nhi\u1ec1u h\xecnh \u1ea3nh kh\xe1c nhau."),(0,a.kt)("li",{parentName:"ul"},"H\u1ec9nh \u1ea3nh nhi\u1ec1u qu\xe1 kh\xf3 cho vi\u1ec7c qu\u1ea3n l\xfd.")),(0,a.kt)("p",null,"Gi\u1ea3i ph\xe1p cho vi\u1ec7c n\xe0y l\xe0 ch\xfang ta n\xean s\u1eed d\u1ee5ng Icon Font nh\u01b0 Font Awesome ho\u1eb7c n\u1ebfu m\xecnh mu\u1ed1n t\u1ef1 t\u1ea1o m\u1ed9t b\u1ed9 icon font custom cho d\u1ef1 \xe1n th\xec c\xf3 th\u1ec3 d\xf9ng ",(0,a.kt)("a",{parentName:"p",href:"https://icomoon.io/app"},"Icomoon App")," nh\xe9."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Squoose.app optimize image",src:e(8015).Z,width:"1200",height:"630"})),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"C\xe1c b\u1ea1n \u0111\u1ecdc th\xeam h\u01b0\u1edbng d\u1eabn \u1edf trang ch\xednh th\u1ee9c c\u1ee7a Icomoon nh\xe9 ",(0,a.kt)("a",{parentName:"p",href:"https://icomoon.io/#docs/app"},"https://icomoon.io/#docs/app"))),(0,a.kt)("h2",{id:"4-c\xf3-th\u1ec3-bi\u1ebfn-\u0111\u1ed5i-m\xe0u-s\u1eafc-h\xecnh-\u1ea3nh-b\u1eb1ng-css-filter"},"4. C\xf3 th\u1ec3 bi\u1ebfn \u0111\u1ed5i m\xe0u s\u1eafc h\xecnh \u1ea3nh b\u1eb1ng CSS filter"),(0,a.kt)("p",null,"B\u1ea1n l\u01b0u \xfd l\xe0 c\xf3 m\u1ed9t s\u1ed1 hi\u1ec7u \u1ee9ng \u0111\u01a1n gi\u1ea3n c\xf3 th\u1ec3 th\u1ef1c hi\u1ec7n b\u1eb1ng CSS nh\xe9, \u0111\u1ec3 h\u1ea1n ch\u1ebf s\u1eed d\u1ee5ng nhi\u1ec1u h\xecnh \u1ea3nh kh\xe1c nhau n\xe8, v\xed d\u1ee5 nh\u01b0 l\xe0 l\xe0m m\u1edd, \u1ea3nh tr\u1eafng \u0111en hay \u0111\u1ed5 b\xf3ng l\xean h\xecnh \u1ea3nh nh\u01b0 c\xe1c v\xed d\u1ee5 d\u01b0\u1edbi \u0111\xe2y nha."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"css filter gray",src:e(5157).Z,width:"1043",height:"413"}),"\n",(0,a.kt)("img",{alt:"css filter gray",src:e(32).Z,width:"1034",height:"409"}),"\n",(0,a.kt)("img",{alt:"css filter gray",src:e(5445).Z,width:"1028",height:"405"})),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"Link th\u1ea3m kh\u1ea3o: ",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/filter"},"https://developer.mozilla.org/en-US/docs/Web/CSS/filter"))),(0,a.kt)("p",null,"Hi v\u1ecdng nh\u1eefng chia s\u1ebb v\u1eeba r\u1ed3i gi\xfap b\u1ea1n l\xe0m vi\u1ec7c v\u1edbi h\xecnh \u1ea3nh trong d\u1ef1 \xe1n t\u1ed1t h\u01a1n nh\xe9! \u2764\ufe0f"),(0,a.kt)("br",null),(0,a.kt)("p",null,"\ud83c\udf10 Ngu\u1ed3n t\xe0i li\u1ec7u tham kh\u1ea3o"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://www.techradar.com/news/the-best-cdns-of-2018"},"https://www.techradar.com/news/the-best-cdns-of-2018")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://codecondo.com/10-ways-to-optimize-images-on-your-website/"},"https://codecondo.com/10-ways-to-optimize-images-on-your-website/")),(0,a.kt)("li",{parentName:"ul"},"Icons undraw: ",(0,a.kt)("a",{parentName:"li",href:"https://undraw.co/search"},"https://undraw.co/search")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://web.dev/image-cdns/"},"https://web.dev/image-cdns/"))))}g.isMDXComponent=!0},32:function(n,t,e){t.Z=e.p+"assets/images/filter-blur-3dd1b0c52f632b763f06e0a027293a2a.jpg"},5445:function(n,t,e){t.Z=e.p+"assets/images/filter-drop-shadow-47cbaf934eab1f

168646d333d1d0e54ed.jpg"},5157:function(n,t,e){t.Z=e.p+"assets/images/filter-grayscale-eba0b0942df4fc6198a942f590b0ef8b.jpg"},8015:function(n,t,e){t.Z=e.p+"assets/images/font-awesome-f8dd94783e04556abcc3a090cd856e3c.jpg"},2579:function(n,t,e){t.Z=e.p+"assets/images/image-cdn-requests-d454642eda3bab68b8f3de23716f50d6.jpg"},1998:function(n,t,e){t.Z=e.p+"assets/images/squoosh-67fc09eb9d9cc71db956cfe12d22549d.jpg"},9667:function(n,t,e){t.Z=e.p+"assets/images/tinypng-b501f2995d9ea8ead3df618675b1a30a.jpg"}}]);