Có thể nói hình ảnh nằm trong top đầu những phương tiện truyền tải nội dung tốt nhất. Một website biết cách phối hợp tốt giữa văn bản và hình ảnh sẽ nhận được những phản hồi tích cực từ phía người đọc và khách hàng.
Thế nhưng hình ảnh cũng mang đến cho website một rắc rối đó là nó khá tốn dung lượng và băng thông. Chưa kể những website sử dụng mã nguồn WordPress còn có cơ chế tự động sinh ra nhiều bức ảnh với các kích thước khác nhau để làm ảnh thumb hay ảnh feature.
Nghiêm trọng hơn là việc có quá nhiều hình ảnh và hình ảnh quá nặng sẽ khiến tốc độ tải trang giảm đáng kể gây ảnh hưởng phần nào tới khả năng bứt top.
Vậy khi thiết kế website làm sao để sử dụng hình ảnh cho đúng cách và phù hợp nhất.
Mời bạn theo dõi bài viết dưới đây.
>> Xem thêm: Thiết kế web giá rẻ hcm
Một website đẹp sử dụng rất nhiều hình ảnh
1. Lựa chọn hình ảnh một cách chính xác
Những hình ảnh dùng cho website thường nằm trong 4 định dạng chính:
- GIF: Ảnh động (Ít gặp, thường được sử dụng chủ yếu ở các website funny)
- PNG-8: Ảnh hỗ trợ nền trong suốt và có độ chi tiết cao tuy nhiên chỉ hỗ trợ màu 8 bit
- PNG-24: Tương tự như ảnh PNG-8 nhưng hỗ trợ màu 24 bit
- JPG/JPEG: Đây là định dạng phổ biến nhất của các bức ảnh sử dụng trên website bởi vì nó có thể nén, giảm kích thước ảnh khá nhiều.
Với những lưu ý như vậy bạn nên xác định trước nhu cầu sử dụng bức ảnh để lựa chọn định dạng ảnh phù hợp nhất. Với những bức ảnh không cần màu sắc quá chi tiết thì bạn nên lựa chọn PNG-8 sẽ cho chất lượng hiển thị và dung lượng tối ưu nhất.
Google đã khuyến cáo: “Các định dạng hình ảnh như JPEG 2000, JPEG XR và WebP thường nén tốt hơn so với các định dạng PNG hoặc JPEG. Điều này có nghĩa là tốc độ tải xuống nhanh hơn và tiêu tốn ít dữ liệu hơn.” – Trích https://developers.google.com/web/tools/lighthouse/audits/webp. Tuy nhiên các định dạng này chưa được hỗ trợ hiển thị một cách tốt nhất trên hầu hết các trình duyệt web hiện nay nên việc sử dụng còn rất hạn chế.
2. Sử dụng đúng kích thước ảnh
Hình ảnh được hiển thị với kích thước 510 x 380px
Một trong những lỗi thường gặp nhất của các hình ảnh xuất hiện trên website đó là kích thước hỉnh ảnh quá to so với khung hình.
Một hình ảnh có độ rộng lên tới 2000px sẽ không thể hiển thị với kích thước thực tế trên hầu hết các website hiện nay. Nếu website được tối ưu tốt thì hình ảnh sẽ tự thu nhỏ lại để hiển thị với kích thước phù hợp nhất tuy nhiên về bản chất là kích thước và dung lượng hình ảnh không thay đổi dẫn đến việc lãng phí tài nguyên.
Trước khi thiết kế và lựa chọn hình ảnh để đăng lên website bạn nên tìm hiểu trước khung hình hiển thị của hình ảnh đó.
3. Nén hình ảnh trước khi tải lên website
Việc nén sẽ giúp bạn tiết kiệm từ 70-80% tài nguyên cần thiết mà hầu như không làm ảnh hưởng tới trải nghiệm của người dùng trên website.
Một số công cụ nén hình ảnh tốt
Cesium làm giảm kích thước hình ảnh của bạn lên đến 90% mà vẫn đảm bảo chất lượng hình ảnh gốc. Cho phép bạn tiết kiệm rất nhiều dung lượng và dễ dàng tải lên hình ảnh lên web trong giây lát. Phần mềm này thiết kế khá đơn giản và thân thiện với người dùng
Đây là ứng dụng online giúp bạn nén hình ảnh nhanh chóng. Bạn cũng có thể gửi lên file zip chưa hình ảnh để nén cùng lúc.
Ngoài ra bạn có 3 lựa chọn ở 3 mức nén khác nhau: Lossy, Lossless và Expert. Hãy thử nén bằng cả 3 cách để xem hình ảnh nào phù hợp nhất nhé. Với những người có nhu cầu nén lại hình ảnh của toàn bộ website thì nên sử dụng bản pro để sử dụng tính năng nén toàn bộ hình ảnh trên URL.
Hi vọng bài viết này sẽ giúp các bạn cải thiện được phần nào tốc độ tải trang bằng cách sử dụng và tối ưu đúng cách các hình ảnh.
Bài viết tham khảo:
Ưu và nhược điểm của giải pháp elearning dành cho doanh nghiệp
