✨Bạn muốn xây dựng web tài liệu & blog, hãy liên hệ qua Facebook của mình để trao đổi thông tin nhé.

logoDocsBlog

Thanh điều hướng

Thanh điều hướng

Tối ưu hình ảnh

Phần này sẽ hướng dẫn bạn tối ưu hình ảnh một cách triệt để, giúp chúng load nhanh hơn trên website

Tối ưu hình ảnh là một bước quan trọng để cải thiện tốc độ tải trang, trải nghiệm người dùng và hiệu quả SEO của website. Dưới đây là những cách tối ưu hình ảnh hiệu quả nhất:

1. Chọn định dạng hình ảnh phù hợp

  • JPEG hoặc JPG: Phù hợp với ảnh có nhiều màu sắc, độ phân giải cao. Nên dùng cho ảnh sản phẩm, banner, background.
  • PNG: Phù hợp với ảnh có ít màu sắc, ảnh logo, biểu đồ, hình minh họa.
  • WebP: Định dạng mới của Google, nén ảnh tốt hơn JPEG, JPG và PNG, giúp giảm dung lượng đáng kể. Bạn không cần đổi qua định dạng này, mình đã cấu hình nên các hình ảnh trên website định dạng jpg, png, jpeg sẽ tự động đổi qua định dạng webp hoặc avif để tối ưu mức tốt nhất.
  • GIF: Dùng cho ảnh động, biểu tượng. Tuy nhiên, dung lượng thường lớn.

2. Điều chỉnh kích thước hình ảnh

  • Giảm kích thước: Chỉ nên để hình ảnh lớn vừa đủ để hiển thị rõ nét trên màn hình.
  • Sử dụng công cụ: Có nhiều công cụ trực tuyến và phần mềm chỉnh sửa ảnh giúp bạn điều chỉnh kích thước một cách dễ dàng.
  • Chú ý tỷ lệ: Giữ tỷ lệ gốc của hình ảnh để tránh bị méo mó.

Đối với các hình ảnh để SEO: nên đặt kích thước là 1200x630.

Đối với hình ảnh banner bài viết: nên đặt kích thước là 1600x840.

3. Nén hình ảnh

  • Giảm dung lượng: Nén hình ảnh giúp giảm kích thước file mà không làm ảnh hưởng quá nhiều đến chất lượng hình ảnh.
  • Công cụ nén: Có nhiều công cụ nén hình ảnh trực tuyến miễn phí như Imgto, TinyPNG, Squoosh, hoặc các phần mềm chỉnh sửa ảnh chuyên nghiệp.
  • Cân nhắc chất lượng: Nén quá nhiều có thể làm giảm chất lượng hình ảnh.

4. Đặt tên file hình ảnh

  • Sử dụng từ khóa: Đặt tên file hình ảnh bao gồm từ khóa liên quan để giúp Google hiểu nội dung của hình ảnh.
  • Không dấu: Tránh sử dụng dấu tiếng Việt, thay vào đó dùng dấu gạch ngang (-) để phân cách các từ.
  • Đơn giản: Tên file nên ngắn gọn, dễ nhớ và dễ hiểu.

Ví dụ: ao-thun-nu-dep-cao-cap.jpg

5. Thêm thuộc tính alt text

  • Mô tả hình ảnh: Alt text là văn bản mô tả nội dung của hình ảnh, giúp người dùng khi tắt hình ảnh hoặc người dùng khiếm thị hiểu được nội dung đó.
  • SEO: Alt text cũng giúp Google hiểu rõ hơn về hình ảnh và cải thiện thứ hạng SEO.

media-library-3

6. Sử dụng lazy loading

  • Tải hình ảnh khi cần: Lazy loading giúp hình ảnh chỉ được tải khi người dùng cuộn đến vị trí của hình ảnh, giúp giảm thời gian tải trang ban đầu (Phần này website đã tích hợp sẵn).

Các công cụ hỗ trợ

  • TinyPNG: Nén ảnh JPEG và PNG hiệu quả.
  • Squoosh: Công cụ nén hình ảnh đa năng của Google.
  • ....

Mình đã sử dụng nhiều công cụ, tuy nhiên imgto.xyz (https://imgto.xyz/) là công cụ mà mình thường sử dụng nhiều và yêu thích nhất (ngoài ra còn miễn phí). Nó tối ưu khá tốt và giảm được dung lượng đáng kể. Bạn có thể tham khảo và sử dụng.

toi-uu-hinh-anh

Chia sẻ lên