Tối ưu hóa hình ảnh cho trang web
T i u hóa hình nh cho trang webố ư ả
T i u hóa hình nh thì làm gì?ố ư ả
T c đ t i trang c a 1 trang web thì ph thu c vào nhi u y u t , t ố ộ ả ủ ụ ộ ề ế ố ừ
c u hình server, n i đ t server, code có x n hay l m, r i thì js, css th ấ ơ ặ ị ở ồ ế
nào ra sao. Ngoài ra, còn có "đ n ng" c a các hình nh (icon, nh ộ ặ ủ ả ả
trong assets, nh ng i dùng upload,...) cũng nh h ng đ n t c đ ả ườ ả ưở ế ố ộ
t i trang.ả
T i u hóa là làm nh ng công vi c đ i lo i nh gi m kích th c ố ư ữ ệ ạ ạ ư ả ướ
(dimension) ho c kích th c (size) c a t p hình nh, ho c làm các ặ ướ ủ ệ ả ặ
công vi c khác. C th s đ c trình bày phía sau.ệ ụ ể ẽ ượ ở
L i ích c a vi c t i u hóa hình nhợ ủ ệ ố ư ả
T t nhiên thì có l i thì m i làm r i, không thì cũng không r nh:ấ ợ ớ ồ ả
C i thi n t c đ t i trang: N u trang c a chúng ta m t quá nhi u ả ệ ố ộ ả ế ủ ấ ề
th i gian đ t i, ng i dùng có th c m th y khó ch u vì ph i ch ờ ể ả ườ ể ả ấ ị ả ờ
đ i và chuy n sang m t th khác hay ho h n.ợ ể ộ ứ ơ
Giúp c i thi n SEO: Các t p l n làm ch m trang web và các công c ả ệ ệ ớ ậ ụ
tìm ki m thì "ghét" các trang web ch m. Google s thu th p thông tin ế ậ ẽ ậ
và l p ch m c hình nh trong trang web c a chúng ta nhanh h n cho ậ ỉ ụ ả ủ ơ
tìm ki m hình nh. ế ả
T o b n sao l u s nhanh h n. (push lên git y :v)ạ ả ư ẽ ơ ấ
Kích th c file hình nh nh h n thì vi c s d ng băng thông s ít ướ ả ỏ ơ ệ ử ụ ẽ
h n. L y 1 ví d , nh g c 590 KB, sau khi nén còn 151 KB, gi m ơ ấ ụ ả ố ả
439KB, và nh này là 1 trong s nh ng b c nh n m trên 1 trang ả ố ữ ứ ả ằ
c aủ dân trí v i m c truy c pớ ứ ậ 100 tri u l t 1 tu nệ ượ ầ => ti t ki m đ cế ệ ượ
43.9TB băng thông 1 tu n cho 1 b c nh (tính đúng không nh ? sao ầ ứ ả ỉ
mà to vãi th @@) đ y đ i lo i là ti t ki m băng thông.ế ờ ấ ạ ạ ế ệ
C n dung l ng l u tr ít h n trên server.ầ ượ ư ữ ơ
Cách t i u hóa hình nhố ư ả
Ch n đ nh d ng file phù h pọ ị ạ ợ
V c b n, có ba đ nh d ng ph bi n nên đ c s d ng: JPEG, PNG và ề ơ ả ị ạ ổ ế ượ ử ụ
GIF.
JPG
JPG (còn đ c g i là JPEG) là lo i t p ph bi n nh t cho hình nh ượ ọ ạ ệ ổ ế ấ ả
trên web. JPG là hoàn h o cho các b c nh bình th ng ho c các ả ứ ả ườ ặ
hình nh ph c t p ch a nhi u màu s c, đ bóng, đ d c ho c các ả ứ ạ ứ ề ắ ộ ộ ố ặ
patterns ph c t p khác.ứ ạ
JPG có th đ c l u 1 b c nh ch t l ng cao, ch t l ng th p ể ượ ư ứ ả ở ấ ượ ấ ượ ấ
ho c v trí trung bình (gi a cao và th p tùy ng i t o ra). Đi u này ặ ị ữ ấ ườ ạ ề
cho phép ta đi u ch nh và l u hình nh chính xác theo cách mà ta ề ỉ ư ả
mu n, cân b ng ch t l ng và kích th c file.ố ằ ấ ượ ướ
PNG
PNG là m t đ nh d ng t p ph bi n khác. Trong Adobe Photoshop , ộ ị ạ ệ ổ ế
có tùy ch n đ l u PNG d i đ nh d ng PNG-8 ho c PNG-24.ọ ể ư ướ ị ạ ặ
PNG-8 có m t pallet (ph màu à hay gì đó đ i lo i là th hi n đ c ộ ổ ạ ạ ể ệ ượ
s l ng màu) màu r t h n ch là 256 màu. M c dù kích th c hình ố ượ ấ ạ ế ặ ướ
nh nh h n, nh ng đây không ph i là l a ch n t t cho nh ch p và ả ỏ ơ ư ả ự ọ ố ả ụ
hình nh ph c t p.ả ứ ạ
PNG-24 cung c p hình nh có ch t l ng cao h n nhi u nh ng cái ấ ả ấ ượ ơ ề ư
giá ph i tr là kích th c file l n h n.ả ả ướ ớ ơ
Tuy nhiên, ng i ta v n dùng PNG vì đ nh d ng này có 1 th thú v ườ ẫ ị ạ ứ ị
là transparency (t c là nh mà có n n trong su t mà ta v n hay dùng ứ ả ề ố ẫ
đó). Đây là m t trong nh ng đi m khác bi t l n nh t gi a PNG và ộ ữ ể ệ ớ ấ ữ
JPEG.
GIF
GIF ch s d ng 256 màu.ỉ ử ụ
Đây là l a ch n t t nh t khi mà ta mu n có 1 t m nh đ ng.ự ọ ố ấ ố ấ ả ộ
SVG
SVG là đ nh d ng vect có th m r ng (scalable vector format) ho t đ ng ị ạ ơ ể ở ộ ạ ộ
t t cho logos, icons, text và hình nh đ n gi n.ố ả ơ ả
SVG t đ ng m r ng trong c trình duy t và công c ch nh s a ự ộ ở ộ ả ệ ụ ỉ ử
nh.ả
Google l p ch m c SVG, gi ng nh cách th c hi n PNG và JPG, do ậ ỉ ụ ố ư ự ệ
đó không ph i lo l ng v SEO.ả ắ ề
SVG theo truy n th ng (t t nhiên là không ph i luôn luôn) có kích ề ố ấ ả
th c file nh h n so v i PNG ho c JPG.ướ ỏ ơ ớ ặ
Nén nhả
Nén hình nh liên quan đ n vi c gi m kích th c tính file mà không làm ả ế ệ ả ướ
gi m đáng k ch t l ng c a hình nh. À thì nói nh v y, nh ng mà r t ả ể ấ ượ ủ ả ư ậ ư ố
cu c thì v n có 2 cách nén: lossy và lossless.ộ ẫ
nh g c làm ví d : đ nh d ng JPG - kích c 590 KBẢ ố ụ ị ạ ỡ
Lossy
Lossy - cách này s lo i b m t s d li u bên trong image. Đi u này s ẽ ạ ỏ ộ ố ữ ệ ề ẽ
làm suy gi m ch t l ng hình nh, vì v y b n s ph i c n th n v vi c ả ấ ượ ả ậ ạ ẽ ả ẩ ậ ề ệ
gi m image đi bao nhiêu. Kích th c file có th đ c gi m xu ng m t ả ướ ể ượ ả ố ộ
l ng khá l n, nh ng bù l i hình nh có th ch nhìn th y gì. :vượ ớ ư ạ ả ể ả ấ
Và nén b ng cách này 1 cách m nh tay: đ nh d ng JPG - kích c 68 KBằ ạ ị ạ ỡ
Lossless
Lossless - đây đúng là nén d li u :v và nó ch m t mát gì c . Cách này ữ ệ ả ấ ả
không làm gi m ch t l ng nh ng nó s yêu c u các hình nh ph i đ c ả ấ ượ ư ẽ ầ ả ả ượ
gi i nén tr c khi chúng đ c hi n th .ả ướ ượ ể ị
Ví d nh g c: 3.5MBụ ả ố
nh đ c nén: 778KBẢ ượ
Dùng cái gì đ nén?ể
Trong th vi n imagemagik có 1 th đ nén, chuy n đ i đ nh d ng image ư ệ ứ ể ể ổ ị ạ
là convert:
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove]
OUTPUT.png
Ví d :ụ
có thể bạn quan tâm
SƠ LƯỢC QUA VỀ TRUYỀN HÌNH ĐEN TRẮNG VÀ KHUẾCH ĐẠI HÌNH VÀ ĐÈN HÌNH (V...
79
2.902
1.118
Kỹ thuật
79
(New)
Tổng hợp hình động trang trí powerpoint
0
1.780
466
Mẫu slide khác
(New)
Hướng dẫn chuyển màu màn hình máy tính sang trắng đen trên Win và macO...
4
1.292
290
Tài liệu CNTT khác
4
(New)
Khảo sát một số chỉ tiêu kỹ thuật của các mô hình nuôi thâm canh tôm s...
66
765
446
Kỹ thuật
66
(New)
Tình hình xử lý, quản lý rác ở Hà Nội và thực trạng hoạt động của nhà...
56
587
304
Kỹ thuật
56
(New)
Luận văn: Công ty Giao nhận kho vận Ngoại thương, thực trạng và một số...
85
783
321
Kinh tế quản lý
85
(New)
Luận văn: CT TNHH mỹ phẩm sắc màu mới trên thị trường và thực trạng, g...
50
843
306
Kinh tế quản lý
50
(New)
Tổng hợp tình hình thiệt hại thuốc, hóa chất, trang thiết bị y tế
1
742
347
Biểu mẫu, văn bản khác
1
(New)
thông tin tài liệu
Tối ưu hóa ảnh trên trang web sẽ tăng lượt truy cập và giúp trang web chạy nhanh hơn. Hãy cùng tìm hiểu với bài viết dưới đây
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
