Như ở bài trước mình có đề cập vấn đề làm thế nào để tối ưu website, làm thế nào để website của bạn có tốc độ tốt nhất.Nếu anh em chưa đọc anh em có thể tham khảo bài viết Làm thế nào để lấy được 90 – 100 điểm từ Google PageSpeed Insights.

Trong bài viết mình có đề cập tới vấn đề tối ưu hình ảnh, sử dụng định dạng WEBP để tối ưu. Bài viết này sẽ giải thích rõ hơn tại sao lại sử dụng định dạng hình ảnh này, tại sao là định dạng webp chứ không phải một định dạng nào khác như: JPG/JPEG hay PNG

Định dạng hình ảnh WEBP là gì ?

Đây là định dạng ảnh mới do Google phát triển, nhằm tối ưu dung lượng hình ảnh so với PNG, hay JPG/JPEG nhưng vẫn giữ được chất lượng hình ảnh cao, …

Tại sao lại sử dụng định dạng WebP ?

Hình ảnh trên website là một yếu tố quan trọng quyết định việc website của bạn có được tối ưu hay không ? Tốc độ website của bạn có nhanh hay không thì hình ảnh cũng tác động phần lớn.

WebP là định dạng ảnh hiện đại cung cấp khả năng nén rất cao cho cả kiểu nén không mất dữ liệu và mất dữ liệu (lossless and lossy) trên website. Sử dụng WebP, người quản trị và phát triển website có thể tạo ra các bức ảnh có dung lượng nhỏ hơn, giúp website tải nhanh hơn, tốc độ website được cải thiện đáng kể.

Định dạng do Google phát triển, định dạng được Google khuyến nghị sử dụng vì vậy chắc không phải nói nhiều về định dạng này nữa đúng không anh em. Đây chắc chắn là công nghệ tương lai sẽ được áp dụng phổ biến và rộng rãi

Cách sử dụng định dạng WebP

Do định dạng hình ảnh này còn khá mới nên một số trình duyệt sẽ chưa được hỗ trợ phổ biến vì vậy khi sử dụng định dạng này anh em cần lưu ý khi chạy trên những trình duyệt không được hỗ trợ. Câu hỏi đặt ra là làm sao mà sử dụng định dạng WebP để tối ưu website mà trình duyệt không hỗ trợ vẫn hoạt động, sau khi áp dụng thực tế trên website hiện tại thì giải pháp để giải quyết vấn đề này là sử dụng thẻ Picture:

<picture>
    <source srcset="example.webp" type="image/webp">
    <img src="example.jpg">
</picture>

Với thẻ picture, source là hình ảnh với định dạng webp nếu trình duyệt hỗ trợ định dạng webp sẽ tự động áp dụng định dạng này và ngược lại sẽ sử dụng định dạng jpg như bình thường đảm bảo việc không bị mất hình ảnh khi trình duyệt không hỗ trợ định dạng

Hiện nay có rất nhiều công cụ, rất nhiều website cho phép bạn tối ưu và chuyển đổi sang định dạng hình ảnh WebP. Viweb Solution cũng đã phát triển công cụ để anh em có thêm lựa chọn, có thêm công cụ để tối ưu hình ảnh nhằm đáp ứng tất cả nhu cầu của anh em.

Anh em hãy truy cập địa chỉ: https://convert.viweb.com.vn/ để test thử hệ thống bên mình nhé. Nếu cần hỗ trợ hay đóng góp ý kiến gì anh em đừng ngần ngại để lại bình luận bên dưới để chúng ta cùng trao đổi 😀