Thứ Năm, 17/10/2019
News
Home » Thiết kế website » Hướng dẫn tối ưu hình ảnh khi upload lên website

Hướng dẫn tối ưu hình ảnh khi upload lên website

Khi các bạn upload hình ảnh lên website, có một điều rất quan trọng nhưng hầu như ai cũng quên và bỏ qua. Đó là việc tối ưu dung lượng hình ảnh. 

Tại sao lại phải tối ưu hình ảnh khi upload lên website?

Khi các bạn viết bài lên website, để nội dung thêm sinh động và dể hiểu thì chắc chắn các bạn sẽ phải tải lên một vài video hoặc hình ảnh.

Đây là câu chuyện của mình:

Team design của công ty mình luôn thiết kế ra những hình ảnh lung linh, đẹp mắt. Và kích thước hình ảnh thì cũng tỉ lệ thuận theo. Kích thước thì khoảng 1900px và dung lượng hình ảnh thì khi nào cũng trên 500kb. Và mình đã phải yêu cầu team design tối ưu dung lượng hình ảnh trước khi gửi qua để upload lên website. Và các bạn ấy luôn than trời rằng giảm dung lượng hình ảnh thì sẽ làm cho hình ảnh xấu đi, không còn đẹp nữa. Một lần nữa mình lại phải đau đầu để tìm cách cân đối sao cho hình ảnh vẫn đẹp và dung lượng vẫn thấp!

Khi website của bạn có khoảng vài hình ảnh có dung lượng lớn như vậy thì tốc độ tải trang cũng sẽ bị ảnh hưởng theo. Và Google cũng không hề thích điều này :D

Những trang web có tốc độ tải trang chậm ít nhiều cũng sẽ bị ảnh hưởng đến thứ hạng tìm kiếm trên Google.

Vậy làm cách nào để có thể tối ưu dung lượng hình ảnh mà vẫn giữ nguyên chất lượng?

Resize – điều chỉnh kích thước hình trước khi up lên website

Trước tiên bạn cần phải xem vị trí hiển thị hình ảnh kích thước là bao nhiêu để resize hình ảnh cho phù hợp.

Ví dụ vị trí hình ảnh mà bạn cần hiển thị có kích thước là 100x100px, mà bạn lại upload hình ảnh có kích thước là 500x500px lên thì rõ ràng quá là lãng phí. Vì vậy bạn cần resize hình ảnh vừa khớp với khung hình hiển thị.

Cách xem kích thước hiển thị hình ảnh

Cách xem kích thước hiển thị hình ảnh

Sử dụng định dạng ảnh hợp lý

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

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

Hình ảnh JPEG thường sẽ có dung lượng thấp hơn PNG, do đó bạn cần phải cân khi nào thì nên dùng ảnh PNG, và khi nào thì nên dùng ảnh JPEG.

Nếu bạn chỉ cần đăng ảnh thông thường và không cần trong suốt thì chọn JPEG, nếu bạn cần đăng ảnh có trong suốt thì bạn nên chọn PNG.

Còn nếu bạn muốn đăng ảnh chất lượng cao, giữ nguyên tối đa chất lượng thì hãy sử dụng PNG-24 vì nó là một định dạng ảnh nén lossless còn JPEG là nén lossy nên ít nhiều sẽ mất chất lượng. Tuy nhiên theo mình thấy, bạn nên chuyển hẳn sang dùng PNG-24 nếu không cần ảnh động, sau đó sử dụng các công cụ giảm dung lượng ảnh để có dung lượng nhẹ nhất mà chất lượng tốt hơn JPEG rất nhiều.

Nén hình ảnh trước khi upload lên website

Một tấm ảnh gốc nếu nén lại 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 ý là với định dạng PNG bạn sẽ có thể nén tốt hơn, còn JPEG thì nén sẽ ít hơn vì vốn nó đã được nén rồi.

Những công cụ nén ảnh ảnh online khá tốt mà mình biết:

https://kraken.io/web-interface

https://tinypng.com

https://compressor.io

https://squoosh.app

Lời kết

Khi thiết kế một website, ngoài vấn đề về việc làm sao cho website đẹp lung linh, thì việc tối ưu các yếu tố khác như việc tối ưu hình ảnh trên website cũng ảnh hưởng rất lớn trong việc tăng thứ hạng tìm kiếm cũng như tăng trải nghiệm của người dùng. Việc tối ưu hình ảnh cũng sẽ giúp giảm dung lượng lưu trữ hosting, đỡ tốn băng thông và làm cho website tải nhanh hơn.

1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (1 votes, average: 10,00 out of 10)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

:cuoi: :hix: :hihihi: :kiss: :sexy: :dotay: :ngacnhien: :oh: :love: more »