Không nên tải ảnh có kích thước quá lớn rồi thu nhỏ bằng CSS.

Ví dụ khu vực chỉ hiển thị ảnh rộng 800px thì không cần tải ảnh rộng 3000–4000px.

Kích thước phù hợp giúp giảm đáng kể dung lượng tải trang.

Nên nén ảnh nhưng vẫn giữ chất lượng đủ tốt.

Đặc biệt cần kiểm soát:

  • Banner.

  • Ảnh sản phẩm.

  • Thumbnail.

  • Ảnh bài viết.

Không nên để một hình đơn lẻ có dung lượng quá lớn nếu không thực sự cần thiết.

Có thể ưu tiên:

WebP, AVIF – ảnh website cần dung lượng thấp.

JPEG – ảnh chụp thông thường.

PNG – ảnh cần nền trong suốt hoặc đồ họa đặc thù.

SVG – logo, icon và hình vector.

Không cần chuyển mọi hình sang cùng một định dạng.

Website nên cung cấp kích thước ảnh phù hợp với:

  • Mobile.

  • Tablet.

  • Desktop.

Trình duyệt sẽ tải phiên bản phù hợp thay vì luôn tải ảnh lớn nhất.

Những hình nằm ngoài màn hình đầu tiên có thể sử dụng:

lazy loading

để chỉ tải khi người dùng cuộn tới gần.

Tuy nhiên ảnh chính ở đầu trang thường không nên lazy load nếu ảnh đó ảnh hưởng trực tiếp đến tốc độ hiển thị nội dung chính.

Alt text giúp mô tả hình ảnh cho công cụ tìm kiếm và người dùng sử dụng công nghệ hỗ trợ.

Ví dụ:

Đèn LED âm trần MPE 9W màu trắng

tốt hơn:

hình ảnh sản phẩm tốt nhất giá rẻ mua ngay

Alt text nên tự nhiên, chính xác và không nhồi từ khóa.

Nên dùng:

den-led-am-tran-mpe.webp

thay vì:

IMG_938271.jpg

Tên file rõ ràng giúp quản lý hình ảnh dễ hơn và có thể hỗ trợ công cụ tìm kiếm hiểu nội dung.

Nên khai báo chiều rộng và chiều cao của hình ảnh để trình duyệt dành sẵn không gian trước khi ảnh tải xong.

Điều này giúp hạn chế tình trạng bố cục bị nhảy và cải thiện CLS.

Website có nhiều hình ảnh hoặc người dùng ở nhiều khu vực có thể kết hợp:

CDN + Cache

để phân phối hình nhanh hơn và giảm tải cho server gốc.

Tối ưu hình ảnh nên tập trung vào:

Đúng kích thước + Dung lượng thấp + Định dạng phù hợp + Responsive + Lazy Load + Alt Text + Tên file rõ ràng.

Có thể ghi nhớ:

Ảnh đẹp chưa đủ; ảnh trên website còn phải nhẹ, tải nhanh và dễ hiểu với cả người dùng lẫn công cụ tìm kiếm.

Tags: tối ưu hình ảnh SEO hình ảnh WebP AVIF alt text tốc độ website image SEO