Tại sao cần tối ưu hình ảnh?

• Giảm thời gian tải trang: Hình ảnh chiếm phần lớn dung lượng trang web, tối ưu hóa chúng giúp giảm thời gian tải trang.
• Cải thiện trải nghiệm người dùng: Trang tải nhanh hơn giúp người dùng không phải chờ đợi lâu, tăng mức độ hài lòng.
• Tăng SEO: Google và các công cụ tìm kiếm đánh giá tốc độ tải trang là yếu tố quan trọng trong việc xếp hạng trang web.

Tối ưu hóa hình ảnh với srcset

Để phục vụ hình ảnh với chất lượng phù hợp tùy theo kích thước màn hình và độ phân giải của thiết bị người dùng, chúng ta có thể sử dụng thuộc tính srcset. Thuộc tính này cho phép trình duyệt lựa chọn hình ảnh tốt nhất dựa trên kích thước viewport của người dùng.

<img src="image-600.jpg" 
     srcset="image-300.jpg 300w, image-600.jpg 600w, image-1200.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="Hình ảnh đẹp" />

Ví dụ về cách sử dụng srcset:

Giải thích các thuộc tính:

• src: Hình ảnh mặc định được sử dụng khi không hỗ trợ srcset.
• srcset: Các đường dẫn hình ảnh khác nhau cùng với kích thước của chúng (300w, 600w, 1200w) để trình duyệt chọn hình ảnh phù hợp.
• sizes: Định nghĩa kích thước mà hình ảnh sẽ chiếm khi được hiển thị trong các điều kiện viewport khác nhau.

Lazyload Hình ảnh với UIkit

Lazy loading là kỹ thuật trì hoãn việc tải hình ảnh cho đến khi người dùng cuộn đến khu vực có hình ảnh đó. Điều này giúp giảm bớt tải trọng ban đầu của trang, tiết kiệm băng thông và cải thiện tốc độ tải trang. UIkit cung cấp tính năng lazy load tích hợp dễ dàng qua lớp .uk-img.

Để kích hoạt lazy load trong UIkit, chỉ cần thêm thuộc tính loading="lazy" vào thẻ <img>:

<img src="image-600.jpg" 
     srcset="image-300.jpg 300w, image-600.jpg 600w, image-1200.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="Hình ảnh đẹp" 
     class="uk-img" 
     loading="lazy" />

Cách thức hoạt động:

• loading="lazy": Thuộc tính này thông báo cho trình duyệt chỉ tải hình ảnh khi nó gần được hiển thị trên màn hình (hoặc khi người dùng cuộn tới).
• uk-img: UIkit tự động nhận diện hình ảnh có lớp này và xử lý việc lazy load cho chúng.

Với cách này, bạn có thể tiết kiệm băng thông cho người dùng và cải thiện tốc độ tải trang.

Kết hợp srcset và Lazy Load

Để đạt được hiệu suất tối ưu nhất, bạn có thể kết hợp cả hai kỹ thuật: sử dụng srcset để phục vụ hình ảnh phù hợp với thiết bị và sử dụng lazy load để trì hoãn việc tải hình ảnh cho đến khi cần thiết.

<img src="image-600.jpg" 
     srcset="image-300.jpg 300w, image-600.jpg 600w, image-1200.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="Hình ảnh đẹp" 
     class="uk-img" 
     loading="lazy" />

Bằng cách này, bạn đảm bảo rằng trang web sẽ tải nhanh và hình ảnh được hiển thị ở chất lượng tối ưu cho mọi thiết bị và độ phân giải.

Kiểm tra và Giám sát

Sau khi tích hợp lazy load và srcset, đừng quên kiểm tra và giám sát hiệu suất của trang web của bạn. Bạn có thể sử dụng các công cụ như:

• Google PageSpeed Insights để kiểm tra tốc độ tải trang và các vấn đề cần tối ưu.
• Web.dev để đánh giá các yếu tố ảnh hưởng đến hiệu suất của trang web.

Kết luận

Việc tối ưu hình ảnh bằng cách sử dụng srcset và lazy load không chỉ giúp cải thiện tốc độ tải trang mà còn tối ưu hóa trải nghiệm người dùng, đặc biệt là trên các thiết bị di động và mạng chậm. UIkit cung cấp một cách tiếp cận dễ dàng và hiệu quả để thực hiện điều này mà không cần thêm quá nhiều cấu hình phức tạp.

Vậy bạn đã thử tối ưu hóa hình ảnh cho trang web của mình chưa? Hãy thử ngay và chia sẻ kết quả với chúng tôi!