Tối ưu hóa hình ảnh cho PageSpeed Insights bằng Photoshop

Trong quá  trình thiết kế website (hay up bài mới trên web có hình ảnh), ta không biết tối ưu hình ảnh bằng cách nào để load web một cách hiệu quả nhất. Vì vậy, hôm nay mình viết viết hướng dẫn này nhằm giúp cho các bạn tối ưu tối đa hình ảnh của mình.
Tối ưu hóa hình ảnh cho PageSpeed Insights bằng Photoshop

Có nhiều cách để tối ưu hình ảnh, như là dùng tối ưu hình ảnh online qua website trung gian khác hoặc dùng các phần mềm tối ưu khác,... Nhưng ở đây mình chỉ hướng dẫn tối ưu hình ảnh bằng Photoshop (lý do là mình hay dùng photoshop để thiết kế giao diện cho web, hai là dùng local trên máy nên không cần phụ thuộc vào đường truyền mạng).

Bạn xem 2 hình bên dưới để so sánh khi chưa được tối ưu và đã tối ưu:

Hình chưa được tối ưu
(Hình chưa được tối ưu, dung lượng 71,8 KB)

(Hình đã được tối ưu, dung lượng 16,7 KB - Giảm 4,299 lần)

Thực hiện:
- Bạn mở hình ảnh cần tối ưu trong Photoshop.
- Chọn File -> Save For Web
- Sau khi chọn Save For Web sẽ xuất hiện hộp thoại như hình dưới, bạn cần chú ý thay đổi các thông số như hình bên dưới là được.
Tối ưu hóa hình ảnh cho PageSpeed Insights bằng Photoshop

Như vậy, chỉ với các bước đơn giản ta đã tối ưu được hình ảnh một cách tương đối nhất. Vì sao mình nói tương đối ? Là vì các bạn có thể chọn chất lượng thấp hơn nữa để giảm lại dung lượng, nhưng bạn chọn chất lượng quá thấp thì hình ảnh quá xấu. Sau nhiều lần kiểm tra thì mình thấy chất lượng 60 (Quality = 60) là ok nhất. Chúc các bạn thành công!
Bài trước
Bài sau

Thíchcode.NET - Mang lại giải pháp cho coder. Nếu các bạn có gì khó khăn trong lập trình thì liên hệ chúng tôi (FanFace). Chúng tôi sẽ hỗ trợ miễn phí cho các bạn.

0 comments:


Hỗ trợ