Việc sử dụng hình ảnh cho thiết kế web là điều không thể nào thiếu được bởi nó thực sự cần thiết cho trang web. Nếu bạn truy cập vào một website chỉ toàn chữ và chữ bạn sẽ cảm thấy thế nào? Hẳn rất nhàm chán phải không, và đó chính là lý do hình ảnh được sử dụng trong thiết kế web.
Các hình ảnh thực sự cần thiết cho trang vì nó giúp website sinh động hơn, truyền tải được nhiều thông điệp hơn đến khách hàng đồng thời giúp họ có quyết định mua hàng, sản phẩm hay không. Tuy nhiên, nhược điểm lớn của các hình ảnh này là tốn dung lượng và băng thông trên web. Nó khiến trang web nhanh bị đầy, nặng và chậm.
Làm thế nào để trang web vẫn có hình ảnh nhưng không chiếm quá nhiều dung lượng trên trang? Dưới đây là những cách giúp bạn tối ưu hình ảnh trên các website.
1.Lựa chọn định dạng ảnh
Có rất nhiều cách để chúng ta tối ưu hình ảnh trên website của mình trong đó có việc lựa chọn định dạng ảnh. Chúng ta cần xác định chính xác nhu cầu sử dụng hình ảnh của mình để lựa chọn những hình ảnh phù hợp và tương ứng nhất, tránh tình trạng sử dụng sai ảnh và định dạng.
+ Chọn kiểu hình ảnh sử dụng phù hợp
Có nhiều loại định dạng ảnh mà bạn có thể lựa chọn và sử dụng cho trang web của mình, phổ biến nhất là GIF, PNG-8 hoặc PNG-24 và JPEG. Mặc dù phổ biến nhưng không phải bạn muốn sử dụng định dạng nào cũng được mà cần phải có mục đích rõ ràng và cụ thể.
GIF: Là dạng ảnh động nên khi nào thực sự cần tải các ảnh động lên cho trang web bạn mới nên sử dụng.
PNG-8: Dùng cho các ảnh có độ sắc nét và chi tiết cao nhưng nó chỉ thích hợp sử dụng cho các màu sắc trong tổ hợp màu RBG.
PNG-24: Sẽ thích hợp cho các ảnh có độ nét và chi tiết cao, hỗ trợ đa màu và ảnh trong suốt.
JPEG/JPG: Đây là kiểu định dạng ảnh rất phổ biến nhưng nó có thể làm giảm chất lượng hình ảnh của bạn. Nó có hỗ trợ nhiều ảnh màu thế nhưng lại không hỗ trợ ảnh động cũng như ảnh trong suốt.
Như vậy có thể thấy, tùy thuộc vào nhu cầu, mục đích sử dụng chúng ta sẽ lựa chọn các định dạng ảnh phù hợp nhất để tối ưu cho trang web.
+ Khi nào nên dùng ảnh JPEG?
Nếu bạn muốn sử dụng những hình ảnh có độ màu cao, có sử dụng dốc (gradient) màu cho website của mình thì định dạng ảnh thích hợp nhất chính là JPEG. Bởi các ảnh có gradient thì loại định dạng này sẽ mang lại chất lượng ảnh tốt nhất. Nó cũng sẽ giúp giảm dung lượng ảnh xuống mức thấp nhưng vẫn đảm bảo độ sắc nét so với các định dạng khác.
+ Khi nào sử dụng ảnh PNG?
Với định dạng ảnh PNG sẽ có PNG-8 và PNG-24, trong đó PNG-8 cải tiến hơn và có thể sử dụng thay thế JPEG trong một số trường hợp. Hay nếu bạn muốn tăng chất lượng hình ảnh thì PNG-24 sẽ phù hợp hơn nhiều. Các ảnh với định dạng này có chất lượng không thua kém gì JPEG nhưng dung lượng sẽ nhẹ hơn nhiều và tối ưu tốt nhất cho website của bạn.
2.Hãy nén ảnh trước khi tải lên website
Lưu ý tiếp theo mà bạn cần nhớ nếu muốn tối ưu hình ảnh trên website là phải nén ảnh trước khi tải lên web. Nén ảnh ở đây là giảm dung lượng chứ không phải giảm kích thước của hình ảnh để chúng nhẹ hơn. Nếu sử dụng ảnh gốc hẳn dung lượng sẽ rất lớn và chiếm nhiều bộ nhớ, khi chúng ta nén lại có thể giúp tiết kiệm đến 80% dung lượng. Đừng lo lắng điều này làm ảnh hưởng chất lượng ảnh nhé bởi khi bạn chọn định dạng PNG nó vẫn sẽ giúp ảnh nhẹ hơn nhưng vẫn giữ nguyên chất lượng hình ảnh.
Việc nén ảnh không thể sử dụng các ứng dụng có sẵn trên máy tính được mà phải lựa chọn công cụ phù hợp nhằm đáp ứng tốt nhu cầu sử dụng. Hiện nay, có khá nhiều ứng dụng bạn có thể sử dụng để nén ảnh của mình trước khi đưa lên website, cụ thể như:
+ Caesium (Windows)
Đây là một trong những phần mềm hỗ trợ nén ảnh phổ biến và được sử dụng khá nhiều. Nó hỗ trợ bạn các định dạng ảnh cơ bản và phổ biến như PNG, JPEG, BMP. Với công cụ này bạn có thể nén một lúc nhiều ảnh trong thư mục và đặc biệt là nó hoàn toàn miễn phí.
+ ImageOptim (Mac)
Với các thiết bị Mac mọi người sẽ ưa chuộng và sử dụng ImageOptim nhiều nhất bởi nó dễ sử dụng và có nhiều ưu điểm. Đặc điểm của công cụ này là nhẹ, hữu ích và hoàn toàn miễn phí. Nó sẽ giúp bạn nén một số định dạng ảnh như JPEG, PNG và cả ảnh động GIF.
+ PngOptimizer (Windows)
Thêm một ứng dụng nhỏ gọn và tiện lợi khác bạn có thể áp dụng để nén ảnh trong quá trình thiết kế web cũng như đưa hình ảnh lên website là PngOptimizer. Nếu chỉ muốn nén ảnh với định dạng PNG đây sẽ là lựa chọn hoàn hảo nhất dành cho bạn.
+ Kraken (Web)
Việc nén ảnh không hề khó khăn và sẽ trở nên vô cùng nhanh chóng với Kraken. Ứng dụng này có khả năng nén ảnh tốt, hỗ trợ nhiều tính năng giúp ảnh nén vẫn giữ nguyên chất lượng. Mọi người có thể nén ảnh trực tiếp từ một liên kết hoặc nén tất cả ảnh trong một website.