Sử dụng ảnh trên website đúng cách và tối ưu [NEW]

Việc sử dụng hình ảnh trên trang web là điều tất yếu vì nhu cầu chèn hình ảnh là có ở tất cả mọi người, cho dù đó là trang web nào. Nhưng có một nhược điểm của việc upload ảnh lên host là nó sẽ chiếm nhiều dung lượng và băng thông nếu bạn có kho ảnh lớn, chưa kể nếu bạn dùng WordPress thì việc nó tự động tạo ra nhiều ảnh khác nhau sẽ tốn dung lượng hơn. . Vì vậy nếu bạn đang sử dụng cách upload hình ảnh trực tiếp lên host thì hãy tham khảo những kinh nghiệm tối ưu hình ảnh của mình trong bài viết này nhé.

Nên xem:

  • Quản lý hình ảnh WordPress đầy đủ
  • Xóa hình ảnh không sử dụng trong WordPress
  • Kraken.io – Giảm kích thước hình ảnh tối đa

Định dạng hình ảnh nào để sử dụng trên trang web?

Để khai thác tối đa hình ảnh và tránh sử dụng sai định dạng ảnh gây ảnh hưởng xấu đến website của bạn, bạn nên xác định rõ từng nhu cầu để sử dụng định dạng ảnh phù hợp nhất.

Sử dụng ảnh trên website đúng cách và tối ưu [NEW]

Chọn kiểu ảnh thích hợp để sử dụng.

Thông thường hình ảnh chúng ta hay sử dụng nhất trên website là định dạng GIF, PNG-8 hoặc PNG-24 và JPEG. Mỗi định dạng ảnh đều có những mục đích rõ ràng khác nhau, tôi xin tóm tắt như sau:

  • GIF: Dùng cho nhu cầu tải ảnh động lên trang web.
  • PNG-8: Sử dụng cho hình ảnh sắc nét hơn và có độ chi tiết cao, nhưng chỉ có thể sử dụng các màu trong tổ hợp màu RBG. Hình ảnh trong suốt (không có nền) được hỗ trợ.
  • PNG-24: Sử dụng cho hình ảnh có độ chi tiết cao và hỗ trợ nhiều màu. Hình ảnh trong suốt (không có nền) được hỗ trợ.
  • JPEG / JPG: Định dạng ảnh thông thường, có thể giảm chất lượng ảnh, hỗ trợ ảnh đa màu. Nhưng không hỗ trợ hình ảnh động và hình ảnh trong suốt.

Vì vậy các bạn theo nhu cầu trên nếu không có nhu cầu sử dụng ảnh động thì nên Ưu tiên định dạng ảnh PNG và JPEG. Nếu hình ảnh ít rườm rà hơn, hãy sử dụng PNG-8 thay vì JPEG vì giữa JPEG và PNG, PNG sẽ có chất lượng hình ảnh tốt hơn.

Khi nào nên sử dụng ảnh JPEG?

Nếu bạn có những bức ảnh có độ màu cao, sử dụng gradient, hãy sử dụng JPEG vì với những bức ảnh có độ dốc, nhiều màu, sử dụng JPEG sẽ giúp bạn đạt được chất lượng ảnh tốt hơn nhưng dung lượng ảnh sẽ giảm xuống. thấp hơn PNG và GIF.

JPEG tốt hơn cho hình ảnh có chế độ màu phong phú.

JPEG tốt hơn cho hình ảnh có chế độ màu phong phú.

Khi nào sử dụng hình ảnh PNG?

PNG có PNG-8 và PNG-24, trong đó PNG-8 là định dạng ảnh mới có cùng thuộc tính với PNG-24, tuy nhiên có thể dùng trong một số trường hợp để thay thế JPEG như tạo ảnh trong suốt hoặc sử dụng cho low- hình ảnh màu sắc.

Nếu bạn muốn đăng ảnh chất lượng cao, giữ chất lượng tối đa thì hãy sử dụng PNG-24 vì đây là định dạng ảnh nén không mất dữ liệu còn JPEG là nén mất dữ liệu nên ít nhiều sẽ bị giảm chất lượng. Tuy nhiên, như tôi thấy, bạn nên chuyển sang PNG-24 nếu bạn không cần hoạt ảnh, thì hãy sử dụng các công cụ giảm hình ảnh để có kích thước nhẹ nhất nhưng chất lượng tốt hơn nhiều so với JPEG. Chính vì vậy mà hiện tại Thachpham.com chỉ sử dụng ảnh PNG nếu ảnh do mình tự làm như ảnh chụp màn hình.

So sánh giữa PNG và JPEG

Đây là 2 tấm ảnh của mình chụp bằng phần mềm Snagit 12 và lưu dưới dạng JPEG (chất lượng 75%) và PNG-24, các bạn xem sự khác biệt nhé.

JPEG - 45kB

JPEG – 45kB

PNG - 13KB

PNG – 13KB

Vui lòng nén ảnh trước khi tải lên website

Bạn nên nén ảnh (giảm dung lượng ảnh chứ không giảm dung lượng) trước khi tải lên website nếu không cần thiết phải giữ chất lượng tối đa. Một ảnh gốc nếu được nén bạn có thể tiết kiệm đến 70 – 80% dung lượng mà chất lượng hầu như không thay đổi nếu dùng mắt thường, lưu ý với định dạng PNG bạn sẽ nén tốt hơn, còn JPEG thì không. nén sẽ ít hơn vì nó đã được nén.

Giảm tới 50% dung lượng khi nén, tại sao không?

Giảm tới 50% dung lượng khi nén, tại sao không?

Ứng dụng nén ảnh tốt nhất

Cesium (Windows)

Phần mềm này hỗ trợ bạn nén các định dạng ảnh phổ biến như PNG, JPEG và BMP, có thể nén nhiều ảnh cùng lúc trong một thư mục và hoàn toàn miễn phí.

ImageOptim (Mac)

Đây là một ứng dụng mình khá thích trên Mac và sử dụng thường xuyên trong thời gian sử dụng Mac vì nó vừa nhẹ, vừa hữu ích và miễn phí. Nó hỗ trợ bạn nén một số định dạng ảnh phổ biến như JPEG, PNG và GIF.

PngOptimizer (Windows)

Đây là một ứng dụng nhỏ gọn và tôi hiện đang sử dụng nó để nén ảnh PNG.

Kraken (Web)

kraken-webinterface

Nếu bạn cần nén ảnh nhanh, nén tốt và hỗ trợ giảm dung lượng ảnh thì Kraken sẽ khá phù hợp với bạn. Bạn cũng có thể nén trực tiếp từ một liên kết hiện có hoặc nén tất cả các hình ảnh trong một trang web bằng Page Cruncher.

Nén hình ảnh trên WordPress

Nếu bạn đang sử dụng WordPress và cần nén những hình ảnh mà bạn đã tải lên bộ sưu tập, bạn có thể sử dụng một trong 3 plugin rất tốt sau đây.

Trình tối ưu hóa hình ảnh EWWW

Plugin miễn phí này hỗ trợ nén ảnh khá tốt và hỗ trợ hầu hết các định dạng ảnh. Nó hỗ trợ bạn tự động nén hình ảnh khi tải lên hoặc nén trực tiếp trong thư viện.

Một lý do khác mà bạn nên sử dụng plugin này là nó hỗ trợ bạn nén tất cả hình ảnh trên máy chủ thông qua lệnh WP-CLI, vì vậy nếu bạn đang sử dụng máy chủ sử dụng WP-CLI, hãy cài đặt plugin này và vào thư mục WordPress và gõ wp help ewwwio optimize để xem hướng dẫn.

WP Smush

Chức năng của WP Smush tương tự như EWWW Image Optimizer, cho phép tự nén ảnh khi tải lên và nén trực tiếp trong thư viện, tuy nhiên nó có phần nhẹ hơn và dễ sử dụng hơn.

Kraken

Nếu bạn thích bỏ tiền ra để có thể nén ảnh tốt hơn, không tốn nhiều tài nguyên máy chủ (do sử dụng dịch vụ bên ngoài) thì có thể sử dụng dịch vụ của Kraken, hỗ trợ tùy chọn nén ảnh Lossless hoặc Lossy nhưng bạn phải trả phí tại ít nhất $ 5 / tháng.

Giảm kích thước hình ảnh

Một điều bạn cần biết là một hình ảnh quá lớn hoặc quá nặng nếu tải lên website sẽ khá tốn băng thông và dung lượng ổ cứng máy chủ. Ví dụ, nếu bạn không phải là người thích chụp ảnh, hay đăng ảnh nến lên máy tính thì một bức ảnh bạn đưa lên website chỉ nên có chiều rộng tối đa là 1024px vì nếu quá lớn, người dùng có thể sẽ nhìn rõ hơn. khi họ phải nhấp vào ảnh và sau đó phóng to để xem tất cả.

Phần kết

Vậy tại sao việc tối ưu hóa hình ảnh trên website lại quan trọng và thú vị đến vậy? Đơn giản là nếu không tối ưu, bạn sẽ tốn nhiều dung lượng hơn cho việc lưu trữ, nhiều băng thông hơn, do đó bạn sẽ tốn nhiều tiền hơn khi thuê host / server. Ngoài ra, hình ảnh lớn sẽ khiến tốc độ tải trang bị ảnh hưởng đôi chút, vì vậy việc sử dụng hình ảnh trên trang web đúng cách cũng là một cách tăng tốc trang web tốt hơn.

Đánh giá nội dung này