- T\u1ed1c \u0111\u1ed9 t\u1ea3i trang c\u1ee7a 1 trang web th\u00ec ph\u1ee5 thu\u1ed9c v\u00e0o nhi\u1ec1u y\u1ebfu t\u1ed1, t\u1eeb c\u1ea5u h\u00ecnh server, n\u01a1i \u0111\u1eb7t server, code c\u00f3 x\u1ecbn hay l\u1edfm, r\u1ed3i th\u00ec js, css th\u1ebf n\u00e0o ra sao. Ngo\u00e0i ra, c\u00f2n c\u00f3 \u201c\u0111\u1ed9 n\u1eb7ng\u201d c\u1ee7a c\u00e1c h\u00ecnh \u1ea3nh (icon, \u1ea3nh trong assets, \u1ea3nh ng\u01b0\u1eddi d\u00f9ng upload,\u2026) c\u0169ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang.<\/li>
- T\u1ed1i \u01b0u h\u00f3a l\u00e0 l\u00e0m nh\u1eefng c\u00f4ng vi\u1ec7c \u0111\u1ea1i lo\u1ea1i nh\u01b0 gi\u1ea3m k\u00edch th\u01b0\u1edbc (dimension) ho\u1eb7c k\u00edch th\u01b0\u1edbc (size) c\u1ee7a t\u1ec7p h\u00ecnh \u1ea3nh, ho\u1eb7c l\u00e0m c\u00e1c c\u00f4ng vi\u1ec7c kh\u00e1c. C\u1ee5 th\u1ec3 s\u1ebd \u0111\u01b0\u1ee3c tr\u00ecnh b\u00e0y \u1edf ph\u00eda sau.<\/li><\/ul>\n\n\n\n
L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh<\/h2>\n\n\n\n
T\u1ea5t nhi\u00ean th\u00ec c\u00f3 l\u1ee3i th\u00ec m\u1edbi l\u00e0m r\u1ed3i, kh\u00f4ng th\u00ec c\u0169ng kh\u00f4ng r\u1ea3nh:<\/p>\n\n\n\n
- C\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i trang: N\u1ebfu trang c\u1ee7a ch\u00fang ta m\u1ea5t qu\u00e1 nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 t\u1ea3i, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u1ea3m th\u1ea5y kh\u00f3 ch\u1ecbu v\u00ec ph\u1ea3i ch\u1edd \u0111\u1ee3i v\u00e0 chuy\u1ec3n sang m\u1ed9t th\u1ee9 kh\u00e1c hay ho h\u01a1n.<\/li>
- Gi\u00fap c\u1ea3i thi\u1ec7n SEO: C\u00e1c t\u1ec7p l\u1edbn l\u00e0m ch\u1eadm trang web v\u00e0 c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm th\u00ec \u201cgh\u00e9t\u201d c\u00e1c trang web ch\u1eadm. Google s\u1ebd thu th\u1eadp th\u00f4ng tin v\u00e0 l\u1eadp ch\u1ec9 m\u1ee5c h\u00ecnh \u1ea3nh trong trang web c\u1ee7a ch\u00fang ta nhanh h\u01a1n cho t\u00ecm ki\u1ebfm h\u00ecnh \u1ea3nh. (Xem th\u00eam How to Check Image Traffic in Google Analytics<\/a>)<\/li>
- T\u1ea1o b\u1ea3n sao l\u01b0u s\u1ebd nhanh h\u01a1n. (push l\u00ean git \u1ea5y :v)<\/li>
- K\u00edch th\u01b0\u1edbc file h\u00ecnh \u1ea3nh nh\u1ecf h\u01a1n th\u00ec vi\u1ec7c s\u1eed d\u1ee5ng b\u0103ng th\u00f4ng s\u1ebd \u00edt h\u01a1n. L\u1ea5y 1 v\u00ed d\u1ee5, \u1ea3nh g\u1ed1c 590 KB, sau khi n\u00e9n c\u00f2n 151 KB, gi\u1ea3m 439KB, v\u00e0 \u1ea3nh n\u00e0y l\u00e0 1 trong s\u1ed1 nh\u1eefng b\u1ee9c \u1ea3nh n\u1eb1m tr\u00ean 1 trang c\u1ee7a d\u00e2n tr\u00ed<\/a> v\u1edbi m\u1ee9c truy c\u1eadp 100 tri\u1ec7u l\u01b0\u1ee3t 1 tu\u1ea7n<\/a> => ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c 43.9TB b\u0103ng th\u00f4ng 1 tu\u1ea7n cho 1 b\u1ee9c \u1ea3nh (t\u00ednh \u0111\u00fang kh\u00f4ng nh\u1ec9? sao m\u00e0 to v\u00e3i th\u1ebf @@) \u1edd \u0111\u1ea5y \u0111\u1ea1i lo\u1ea1i l\u00e0 ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng.<\/li>
- C\u1ea7n dung l\u01b0\u1ee3ng l\u01b0u tr\u1eef \u00edt h\u01a1n tr\u00ean server.<\/li><\/ul>\n\n\n\n
C\u00e1ch t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh<\/h2>\n\n\n\n
Ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng file ph\u00f9 h\u1ee3p<\/h3>\n\n\n\n
V\u1ec1 c\u01a1 b\u1ea3n, c\u00f3 ba \u0111\u1ecbnh d\u1ea1ng ph\u1ed5 bi\u1ebfn n\u00ean \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng: JPEG, PNG v\u00e0 GIF.<\/p>\n\n\n\n
JPG<\/h4>\n\n\n\n
- JPG<\/a> (c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 JPEG) l\u00e0 lo\u1ea1i t\u1ec7p ph\u1ed5 bi\u1ebfn nh\u1ea5t cho h\u00ecnh \u1ea3nh tr\u00ean web. JPG l\u00e0 ho\u00e0n h\u1ea3o cho c\u00e1c b\u1ee9c \u1ea3nh b\u00ecnh th\u01b0\u1eddng ho\u1eb7c c\u00e1c h\u00ecnh \u1ea3nh ph\u1ee9c t\u1ea1p ch\u1ee9a nhi\u1ec1u m\u00e0u s\u1eafc, \u0111\u1ed9 b\u00f3ng, \u0111\u1ed9 d\u1ed1c ho\u1eb7c c\u00e1c patterns ph\u1ee9c t\u1ea1p kh\u00e1c.<\/li>
- JPG c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u01b0u 1 b\u1ee9c \u1ea3nh \u1edf ch\u1ea5t l\u01b0\u1ee3ng cao, ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p ho\u1eb7c v\u1ecb tr\u00ed trung b\u00ecnh (gi\u1eefa cao v\u00e0 th\u1ea5p t\u00f9y ng\u01b0\u1eddi t\u1ea1o ra). \u0110i\u1ec1u n\u00e0y cho ph\u00e9p ta \u0111i\u1ec1u ch\u1ec9nh v\u00e0 l\u01b0u h\u00ecnh \u1ea3nh ch\u00ednh x\u00e1c theo c\u00e1ch m\u00e0 ta mu\u1ed1n, c\u00e2n b\u1eb1ng ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 k\u00edch th\u01b0\u1edbc file.<\/li><\/ul>\n\n\n\n
PNG<\/h4>\n\n\n\n
- PNG<\/a> l\u00e0 m\u1ed9t \u0111\u1ecbnh d\u1ea1ng t\u1ec7p ph\u1ed5 bi\u1ebfn kh\u00e1c. Trong Adobe Photoshop , c\u00f3 t\u00f9y ch\u1ecdn \u0111\u1ec3 l\u01b0u PNG d\u01b0\u1edbi \u0111\u1ecbnh d\u1ea1ng PNG-8 ho\u1eb7c PNG-24.<\/li>
- PNG-8 c\u00f3 m\u1ed9t pallet (ph\u1ed5 m\u00e0u \u00e0 hay g\u00ec \u0111\u00f3 \u0111\u1ea1i lo\u1ea1i l\u00e0 th\u1ec3 hi\u1ec7n \u0111\u01b0\u1ee3c s\u1ed1 l\u01b0\u1ee3ng m\u00e0u) m\u00e0u r\u1ea5t h\u1ea1n ch\u1ebf l\u00e0 256 m\u00e0u. M\u1eb7c d\u00f9 k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh nh\u1ecf h\u01a1n, nh\u01b0ng \u0111\u00e2y kh\u00f4ng ph\u1ea3i l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t cho \u1ea3nh ch\u1ee5p v\u00e0 h\u00ecnh \u1ea3nh ph\u1ee9c t\u1ea1p.<\/li>
- PNG-24 cung c\u1ea5p h\u00ecnh \u1ea3nh c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng cao h\u01a1n nhi\u1ec1u nh\u01b0ng c\u00e1i gi\u00e1 ph\u1ea3i tr\u1ea3 l\u00e0 k\u00edch th\u01b0\u1edbc file l\u1edbn h\u01a1n.<\/li>
- Tuy nhi\u00ean, ng\u01b0\u1eddi ta v\u1eabn d\u00f9ng PNG v\u00ec \u0111\u1ecbnh d\u1ea1ng n\u00e0y c\u00f3 1 th\u1ee9 th\u00fa v\u1ecb l\u00e0
transparency<\/code> (t\u1ee9c l\u00e0 \u1ea3nh m\u00e0 c\u00f3 n\u1ec1n trong su\u1ed1t m\u00e0 ta v\u1eabn hay d\u00f9ng \u0111\u00f3). \u0110\u00e2y l\u00e0 m\u1ed9t trong nh\u1eefng \u0111i\u1ec3m kh\u00e1c bi\u1ec7t l\u1edbn nh\u1ea5t gi\u1eefa PNG v\u00e0 JPEG.<\/li><\/ul>\n\n\n\nGIF<\/h4>\n\n\n\n
- GIF<\/a> ch\u1ec9 s\u1eed d\u1ee5ng 256 m\u00e0u.<\/li>
- \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t nh\u1ea5t khi m\u00e0 ta mu\u1ed1n c\u00f3 1 t\u1ea5m \u1ea3nh \u0111\u1ed9ng.<\/li><\/ul>\n\n\n\n
SVG<\/h4>\n\n\n\n
SVG<\/a> l\u00e0 \u0111\u1ecbnh d\u1ea1ng vect\u01a1 c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng (scalable vector format) ho\u1ea1t \u0111\u1ed9ng t\u1ed1t cho logos, icons, text v\u00e0 h\u00ecnh \u1ea3nh \u0111\u01a1n gi\u1ea3n.<\/p>\n\n\n\n
- SVG t\u1ef1 \u0111\u1ed9ng m\u1edf r\u1ed9ng trong c\u1ea3 tr\u00ecnh duy\u1ec7t v\u00e0 c\u00f4ng c\u1ee5 ch\u1ec9nh s\u1eeda \u1ea3nh.<\/li>
- Google l\u1eadp ch\u1ec9 m\u1ee5c SVG, gi\u1ed1ng nh\u01b0 c\u00e1ch th\u1ef1c hi\u1ec7n PNG v\u00e0 JPG, do \u0111\u00f3 kh\u00f4ng ph\u1ea3i lo l\u1eafng v\u1ec1 SEO.<\/li>
- SVG theo truy\u1ec1n th\u1ed1ng (t\u1ea5t nhi\u00ean l\u00e0 kh\u00f4ng ph\u1ea3i lu\u00f4n lu\u00f4n) c\u00f3 k\u00edch th\u01b0\u1edbc file nh\u1ecf h\u01a1n so v\u1edbi PNG ho\u1eb7c JPG.<\/li><\/ul>\n\n\n\n
C\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam t\u1ea1i \u0111\u00e2y<\/a> v\u1ec1 SVG.<\/p>\n\n\n\n
N\u00e9n \u1ea3nh<\/h3>\n\n\n\n
N\u00e9n h\u00ecnh \u1ea3nh li\u00ean quan \u0111\u1ebfn vi\u1ec7c gi\u1ea3m k\u00edch th\u01b0\u1edbc t\u00ednh file m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m \u0111\u00e1ng k\u1ec3 ch\u1ea5t l\u01b0\u1ee3ng c\u1ee7a h\u00ecnh \u1ea3nh. \u00c0 th\u00ec n\u00f3i nh\u01b0 v\u1eady, nh\u01b0ng m\u00e0 r\u1ed1t cu\u1ed9c th\u00ec v\u1eabn c\u00f3 2 c\u00e1ch n\u00e9n: lossy v\u00e0 lossless.<\/p>\n\n\n\n
![\"hihi\"\/](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/11\/low-compression-high-quality-jpg.jpg\")
<\/figure>\n\n\n\n\u1ea2nh g\u1ed1c l\u00e0m v\u00ed d\u1ee5: \u0111\u1ecbnh d\u1ea1ng JPG \u2013 k\u00edch c\u1ee1 590 KB<\/p>\n\n\n\n
Lossy<\/h4>\n\n\n\n
Lossy \u2013 c\u00e1ch n\u00e0y s\u1ebd lo\u1ea1i b\u1ecf m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u b\u00ean trong image. \u0110i\u1ec1u n\u00e0y s\u1ebd l\u00e0m suy gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh, v\u00ec v\u1eady b\u1ea1n s\u1ebd ph\u1ea3i c\u1ea9n th\u1eadn v\u1ec1 vi\u1ec7c gi\u1ea3m image \u0111i bao nhi\u00eau. K\u00edch th\u01b0\u1edbc file c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3m xu\u1ed1ng m\u1ed9t l\u01b0\u1ee3ng kh\u00e1 l\u1edbn, nh\u01b0ng b\u00f9 l\u1ea1i h\u00ecnh \u1ea3nh c\u00f3 th\u1ec3 ch\u1ea3 nh\u00ecn th\u1ea5y g\u00ec. :v<\/p>\n\n\n\n
V\u00e0 n\u00e9n b\u1eb1ng c\u00e1ch n\u00e0y 1 c\u00e1ch m\u1ea1nh tay: \u0111\u1ecbnh d\u1ea1ng JPG \u2013 k\u00edch c\u1ee1 68 KB<\/p>\n\n\n\n
![\"hihi\"\/](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/11\/high-compression-low-quality-jpg.jpg\")
<\/figure>\n\n\n\nLossless<\/h4>\n\n\n\n
Lossless \u2013 \u0111\u00e2y \u0111\u00fang l\u00e0 n\u00e9n d\u1eef li\u1ec7u :v v\u00e0 n\u00f3 ch\u1ea3 m\u1ea5t m\u00e1t g\u00ec c\u1ea3. C\u00e1ch n\u00e0y kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng nh\u01b0ng n\u00f3 s\u1ebd y\u00eau c\u1ea7u c\u00e1c h\u00ecnh \u1ea3nh ph\u1ea3i \u0111\u01b0\u1ee3c gi\u1ea3i n\u00e9n tr\u01b0\u1edbc khi ch\u00fang \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/p>\n\n\n\n
![\"haha\"\/](\"https:\/\/cdn.perfmatters.io\/wp-content\/uploads\/2017\/05\/1-jpg-uncompressed.jpg\")
<\/figure>\n\n\n\nV\u00ed d\u1ee5 \u1ea3nh g\u1ed1c: 3.5MB<\/p>\n\n\n\n
\u1ea2nh \u0111\u01b0\u1ee3c n\u00e9n: 778KB<\/p>\n\n\n\n
![\"aaa\"\/](\"https:\/\/cdn.perfmatters.io\/wp-content\/uploads\/2017\/05\/1-jpg-compressed.jpg\")
<\/figure>\n\n\n\nD\u00f9ng c\u00e1i g\u00ec \u0111\u1ec3 n\u00e9n?<\/h4>\n\n\n\n
Trong th\u01b0 vi\u1ec7n imagemagik c\u00f3 1 th\u1ee9 \u0111\u1ec3 n\u00e9n, chuy\u1ec3n \u0111\u1ed5i \u0111\u1ecbnh d\u1ea1ng image l\u00e0 convert<\/a>:<\/p>\n\n\n\n
123<\/td> convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n V\u00ed d\u1ee5:<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/images.viblo.asia\/928b221d-6600-4d50-810c-334f57984e16.png\")
<\/figure>\n\n\n\nHo\u1eb7c \u0111\u01a1n gi\u1ea3n l\u00e0 d\u00f9ng photoshop \u0111\u1ec3 xu\u1ea5t b\u1ea3n l\u1ea1i 1 b\u1ee9c \u1ea3nh c\u00f3 m\u1ee9c \u0111\u1ed9 th\u00e2n thi\u1ec7n h\u01a1n \u0111\u1ed1i v\u1edbi trang web c\u1ee7a m\u00ecnh :v<\/p>\n\n\n\n
C\u00e2n b\u1eb1ng gi\u1eefa ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 k\u00edch th\u01b0\u1edbc<\/h3>\n\n\n\n
Nh\u01b0 \u1edf tr\u00ean \u0111\u00e3 n\u00f3i, ch\u00fang ta c\u00f3 th\u1ec3 n\u00e9n image, tuy nhi\u00ean th\u00ec nh\u1eb9 \u0111i li\u1ec1n v\u1edbi x\u1ea5u =)) c\u1ea7n ph\u1ea3i c\u00e2n b\u1eb1ng gi\u1eefa n\u1eb7ng v\u1eeba v\u1eeba v\u00e0 d\u1ec5 nh\u00ecn: v\u00ed d\u1ee5: N\u00e9n trung b\u00ecnh (ch\u1ea5t l\u01b0\u1ee3ng tuy\u1ec7t v\u1eddi) \u0111\u1ecbnh d\u1ea1ng JPG \u2013 k\u00edch c\u1ee1 151 KB<\/p>\n\n\n\n
![\"jjjj\"\/](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/11\/medium-compression-medium-quality-jpg-1.jpg\")
<\/figure>\n\n\n\nGi\u1ea3m k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh<\/h3>\n\n\n\n
C\u0169ng l\u00e0 k\u00edch th\u01b0\u1edbc image nh\u01b0ng m\u00e0 \u1edf \u0111\u00e2y m\u00ecnh mu\u1ed1n n\u00f3i v\u1ec1 dimensions \u2013 chi\u1ec1u r\u1ed9ng v\u00e0 d\u00e0i t\u00ednh b\u1eb1ng px c\u1ee7a image. Gi\u1ea3m k\u00edch th\u01b0\u1edbc image c\u0169ng khi\u1ebfn \u1ea3nh \u201cnh\u1eb9\u201d \u0111i \u0111\u00f4i ch\u00fat.<\/p>\n\n\n\n
Ch\u00fang ta c\u00f3 th\u1ec3 l\u00e0m l\u00e0:<\/p>\n\n\n\n
- Gi\u1ea3m k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh tr\u01b0\u1edbc khi l\u01b0u: d\u00f9ng photoshop ch\u1eb3ng h\u1ea1n, thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a image r\u1ed3i m\u1edbi upload (ng\u01b0\u1eddi d\u00f9ng c\u00f3 t\u00e2m)<\/li>
- Gi\u1ea3m k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh trong khi l\u01b0u h\u00ecnh \u1ea3nh: vi\u1ec7c n\u00e0y c\u1ee7a ch\u00fang ta \u0111\u00e2y, m\u00ecnh th\u00ec th\u01b0\u1eddng thay \u0111\u1ed5i n\u00f3 trong h\u00e0m upload image:<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/lop12.edu.vn\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-14-at-3.14.28-PM.png\")
<\/figure>\n\n\n\nX\u00f3a \u201csi\u00eau d\u1eef li\u1ec7u\u201d kh\u1ecfi c\u00e1c t\u1ec7p<\/h3>\n\n\n\n
- M\u1ed9t trong nh\u1eefng c\u00e1ch \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u1ee7a \u1ea3nh l\u00e0 x\u00f3a
metadata<\/code> kh\u1ecfi c\u00e1c file h\u00ecnh \u1ea3nh tr\u01b0\u1edbc khi t\u1ea3i ch\u00fang l\u00ean trang web.<\/li>- D\u1eef li\u1ec7u meta h\u00ecnh \u1ea3nh (h\u00ecnh nh\u01b0 c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0
exif<\/code>) \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef tr\u00ean b\u1ea5t k\u1ef3 \u1ea3nh n\u00e0o v\u00e0 bao g\u1ed3m: ng\u00e0y ch\u1ee5p, m\u1eabu m\u00e1y \u1ea3nh, flash \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng, V\u1ecb tr\u00ed GPS, iso, k\u00edch th\u01b0\u1edbc \u1ed1ng k\u00ednh, t\u1ed1c \u0111\u1ed9 m\u00e0n ch\u1eadp v.v\u2026<\/li>- M\u1ed9t l\u00fd do ch\u00ednh \u0111\u00e1ng kh\u00e1c \u0111\u1ec3 x\u00f3a d\u1eef li\u1ec7u meta h\u00ecnh \u1ea3nh l\u00e0 v\u00ec m\u1ee5c \u0111\u00edch b\u1ea3o m\u1eadt. Facebook n\u00f3 \u0111ang l\u00e0m \u0111i\u1ec1u \u0111\u00f3, m\u1ecdi \u1ea3nh upload l\u00ean fb th\u00ec kh\u00f4ng c\u00f2n th\u00f4ng tin exif.<\/li><\/ul>\n\n\n\n
S\u1eed d\u1ee5ng thumbnail<\/h3>\n\n\n\n
C\u00e1i n\u00e0y hay n\u00e0y, thay v\u00ec hi\u1ec3n th\u1ecb to\u00e0n b\u1ed9 image ra trang c\u1ee7a m\u00ecnh, th\u00ec thay v\u00e0o \u0111\u00f3 l\u00e0 m\u00ecnh s\u1ebd d\u00f9ng thumbnail (sinh ra l\u00fac upload file, ch\u1ed7 m\u00e0 resize trong v\u00ed d\u1ee5 tr\u00ean c\u1ee7a m\u00ecnh \u1ea5y) l\u00e0 1 h\u00ecnh \u1ea3nh nh\u1ecf h\u01a1n, ng\u01b0\u1eddi d\u00f9ng mu\u1ed1n xem \u1ea3nh to th\u00ec ph\u1ea3i click v\u00e0o th\u00ec \u1ea3nh to m\u1edbi \u0111\u01b0\u1ee3c load ra. N\u00f3i th\u00ec d\u00e0i ch\u1ee9 \u0111\u01a1n gi\u1ea3n l\u00e0 d\u00f9ng 1 th\u01b0 vi\u1ec7n nh\u01b0 Fancybox<\/a> ch\u1eb3ng h\u1ea1n, ho\u1eb7c \u0111\u01a1n gi\u1ea3n h\u01a1n l\u00e0 l\u00e0m c\u00e1i link nh\u1ea3y sang tab kh\u00e1c. V\u00ed d\u1ee5 th\u00ec nh\u01b0 Viblo n\u00e0y (nh\u01b0ng m\u00e0 h\u00ecnh nh\u01b0 c\u0169ng kh\u00f4ng d\u00f9ng thumbnail th\u00ec ph\u1ea3i)<\/p>\n\n\n\n
S\u1eed d\u1ee5ng text l\u00e0 text thay v\u00ec l\u00e0 text b\u1eb1ng h\u00ecnh<\/h3>\n\n\n\n
Nghe c\u00f3 v\u1ebb l\u1eb1ng nh\u1eb1ng v\u00e0 kh\u00f3 hi\u1ec3u, \u00fd m\u00ecnh l\u00e0 v\u00ed d\u1ee5 c\u00f3 nh\u1eefng banner qu\u1ea3ng c\u00e1o hay c\u00e2u slogan g\u00ec g\u00ec \u0111\u00f3, ngta thay v\u00ec vi\u1ebft ra, th\u00ec s\u1ebd v\u1ebd nh\u0103ng v\u1ebd cu\u1ed9i v\u00e0 xu\u1ea5t th\u00e0nh 1 file image, r\u1ed3i show n\u00f3 ra. Th\u00ec b\u00e2y gi\u1edd kh\u00f4ng n\u00ean l\u00e0m th\u1ebf, m\u00e0 hay d\u00f9ng tr\u1ef1c ti\u1ebfp l\u00e0 text v\u00e0 style l\u1ea1i n\u00f3 b\u1eb1ng css ch\u1eb3ng h\u1ea1n.<\/p>\n\n\n\n
C\u00e1i n\u00e0y c\u0169ng kh\u00e1 l\u00e0 t\u1ed1t cho SEO.<\/p>\n\n\n\n
Kh\u00f4ng Scale Images<\/h3>\n\n\n\n
- D\u1eef li\u1ec7u meta h\u00ecnh \u1ea3nh (h\u00ecnh nh\u01b0 c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0
- M\u1ed9t trong nh\u1eefng c\u00e1ch \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u1ee7a \u1ea3nh l\u00e0 x\u00f3a
- \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1t nh\u1ea5t khi m\u00e0 ta mu\u1ed1n c\u00f3 1 t\u1ea5m \u1ea3nh \u0111\u1ed9ng.<\/li><\/ul>\n\n\n\n
- JPG c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u01b0u 1 b\u1ee9c \u1ea3nh \u1edf ch\u1ea5t l\u01b0\u1ee3ng cao, ch\u1ea5t l\u01b0\u1ee3ng th\u1ea5p ho\u1eb7c v\u1ecb tr\u00ed trung b\u00ecnh (gi\u1eefa cao v\u00e0 th\u1ea5p t\u00f9y ng\u01b0\u1eddi t\u1ea1o ra). \u0110i\u1ec1u n\u00e0y cho ph\u00e9p ta \u0111i\u1ec1u ch\u1ec9nh v\u00e0 l\u01b0u h\u00ecnh \u1ea3nh ch\u00ednh x\u00e1c theo c\u00e1ch m\u00e0 ta mu\u1ed1n, c\u00e2n b\u1eb1ng ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 k\u00edch th\u01b0\u1edbc file.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/lop12.edu.vn\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-14-at-3.13.54-PM.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/lop12.edu.vn\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-14-at-3.13.27-PM.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/lop12.edu.vn\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-14-at-3.12.56-PM.png\")
<\/figure>\n\n\n\n