Chuyển đến nội dung
Vizua

Cách tối ưu hình ảnh cho website: hướng dẫn thực hành

Cập nhật:

Ảnh thường chiếm phần lớn dữ liệu trang và còn ảnh hưởng khám phá, giải mã, layout và Largest Contentful Paint. Tối ưu có thể đem lại lợi ích rõ, nhưng không có mức tiết kiệm hoặc kết quả xếp hạng cố định cho mọi trang. Đây là quy trình có thể đo từng bước.

Tại sao tối ưu ảnh ngày càng quan trọng

Báo cáo dung lượng trang của HTTP Archive cho thấy ảnh vẫn đáng kể trên nhiều trang dù trung vị thay đổi. Largest Contentful Paint (LCP) đo lúc phần tử đủ điều kiện lớn nhất trong viewport được render; thường nhưng không luôn là ảnh.

Ngưỡng LCP Google công bố coi tới 2.5 giây là tốt và trên 4 giây là kém ở bách phân vị 75 lượt truy cập. Xử lý ảnh có thể chuyển trang giữa ngưỡng khi tài nguyên LCP là nút thắt, nhưng riêng nó không đảm bảo đạt Core Web Vitals hay vị trí tìm kiếm.

Bước 1: Chọn đúng định dạng

Chọn định dạng có thể ảnh hưởng lớn đến dung lượng và khả năng. So sánh dưới đây mang tính định tính vì benchmark tùy nguồn, bộ mã hóa, cài đặt và mục tiêu chất lượng:

Định dạng Tốt nhất cho Hành vi dung lượng Hỗ trợ trình duyệt
JPEG Ảnh chụp, tương thích trình duyệt cũ Mốc chuẩn Rất rộng
WebP Ảnh chụp + đồ họa Thường hiệu quả; kiểm thử bộ mã hóa Trình duyệt lớn hiện nay; kiểm tra người dùng
AVIF Quy trình phân phối hiện đại đã thử Có thể rất hiệu quả; mã hóa tốn hơn Trình duyệt lớn hiện nay; có thể cần dự phòng
PNG Logo, icon, đồ họa có chữ Hiệu quả với một số đồ họa phẳng; lớn với nhiều ảnh Rất rộng
SVG Icon, minh họa Mã vector tùy nội dung Rộng trong trình duyệt; làm sạch SVG không đáng tin

WebP là ứng viên mặc định hữu ích, không phải đáp án chung. Nếu quy trình và người dùng hỗ trợ AVIF, thử nó ở <source> trước với WebP hoặc JPEG dự phòng. Dùng Vizua để chuyển JPG sang WebP hoặc sang AVIF; tệp xử lý trong trình duyệt và không gửi tới máy chủ.

Xem thêm bài WebP và AVIF cùng giải thích nén mất và không mất dữ liệu.

Bước 2: Thay đổi về kích thước hiển thị thực tế

Ảnh 4000 × 3000 pixel hiển thị 800 × 600 có nhiều pixel nguồn hơn slot cần. Màn hình responsive mật độ cao có thể cần ứng viên lớn hơn, nhưng gửi bản gốc máy ảnh thường thêm truyền và giải mã không cần thiết.

Nguyên tắc là cung cấp ứng viên gần kích thước và mật độ render. Dùng srcset và sizes để trình duyệt chọn, xét chiều rộng layout, mật độ thiết bị, chất lượng, zoom và art direction thay vì cố định hệ số “Retina”.

Ví dụ kích thước bắt đầu để điều chỉnh theo layout:

  • Hero toàn chiều rộng: bắt đầu từ slot lớn nhất rồi tạo ứng viên cho mật độ và breakpoint liên quan
  • Ảnh nội dung: khớp cột nội dung và trạng thái responsive rộng hơn
  • Thumbnail: tạo ứng viên gần mỗi kích thước card thay vì dùng lại hero
  • Avatar: xét hình tròn hoặc vuông hiển thị, mật độ và trang hồ sơ chi tiết

Dùng công cụ đổi kích thước Vizua trước khi nén. Mức tiết kiệm tùy số pixel ban đầu và mục tiêu; hãy đo tệp tạo ra.

Bước 3: Nén với mức chất lượng phù hợp

Sau khi chọn định dạng và kích thước, chỉnh bộ mã hóa. Thang chất lượng không tuyến tính và không chuẩn hóa giữa bộ mã hóa hay định dạng. Giá trị thấp thường đổi nhiều thông tin hơn lấy ít byte hơn trong nén mất dữ liệu, nhưng phải đo dung lượng và thay đổi thị giác ở đầu ra.

Cài đặt chất lượng khuyến nghị:

  • JPEG: 75–85 có thể là khoảng bắt đầu thận trọng. Thang khác nhau; kiểm tra đầu ra.
  • WebP: 75–80 là khoảng bắt đầu, không bảo đảm tương đương JPEG.
  • AVIF: 60–75 có thể là khởi điểm ở một số công cụ; thang và bộ mã hóa khác nhau.
  • PNG: thử nén không mất dữ liệu mạnh hơn trước. Lượng tử bảng màu tối đa 256 mục có thể tiết kiệm hơn nhưng giảm màu có mất dữ liệu và cần kiểm tra.

Công cụ nén JPEG Vizua cho phép chỉnh chất lượng và xem đầu ra. Phương pháp chi tiết ở bài nén ảnh không mất chất lượng.

Bước 4: Phân phối ảnh hiệu quả

Nén tốt mới chỉ là một nửa công việc. Cách bạn phân phối ảnh đến trình duyệt cũng quan trọng không kém cho hiệu suất tổng thể.

Đặt kích thước rõ ràng

Cho mỗi <img> width và height nội tại chính xác, hoặc giữ slot bằng quy tắc layout. Trình duyệt thiết lập tỷ lệ sớm, giảm dịch chuyển do ảnh; nhưng font, nội dung chèn, ảnh động và CSS sai vẫn ảnh hưởng Cumulative Layout Shift (CLS).

Lazy-load ảnh dưới fold

Cân nhắc loading="lazy" cho ảnh đủ xa viewport ban đầu. Đừng dùng máy móc cho ảnh LCP hoặc nội dung cần ngay. Heuristic trình duyệt, carousel, in, cuộn nhanh và layout ẩn đòi hỏi kiểm thử.

Ưu tiên ảnh hero

Đừng trì hoãn ảnh LCP có khả năng. Cân nhắc fetchpriority="high" nếu thật sự xứng đáng băng thông sớm và đảm bảo HTML đầu phát hiện được. Đừng gán ưu tiên cao rộng; xác nhận bằng trace và dữ liệu thực tế.

Dùng ảnh responsive

srcset và sizes đưa ứng viên và mô tả slot. Trình duyệt xét viewport, mật độ, cache và triển khai. Đảm bảo sizes khớp layout; giá trị sai có thể chọn ảnh quá lớn hoặc nhỏ.

Bước 5: kiểm tra và đo thường xuyên

Tối ưu ảnh không phải việc làm một lần rồi thôi. Mỗi ảnh mới thêm vào là một cơ hội để hiệu suất tụt lại.

  • PageSpeed Insights: chạy PageSpeed Insights trên trang đại diện. Xem riêng LCP thực tế và lab rồi chẩn đoán ảnh hiện tại, không phụ thuộc nhãn audit có thể đổi.
  • Network DevTools: sắp yêu cầu theo kích thước và xem ảnh lớn trong ngữ cảnh. Kiểm tra kích thước, định dạng, nén, cache và ưu tiên có đúng vai trò thay vì giới hạn KB chung.
  • Tự động hóa: thêm tối ưu ảnh vào build để phát hiện ảnh quá lớn trước khi đăng.

Checklist tối ưu ảnh nhanh

  • Tạo và so sánh biến thể JPEG, WebP, AVIF, PNG hoặc SVG phù hợp
  • Đổi kích thước theo hiển thị thực, không rộng hơn cần thiết
  • Bắt đầu cài đặt thận trọng, so sánh byte và hình ảnh; không coi số chất lượng giữa định dạng là tương đương
  • Giữ slot chính xác cho mỗi <img>, thường bằng width và height nội tại
  • Cân nhắc fetchpriority="high" cho ảnh LCP rồi đo
  • Trì hoãn ảnh ngoài màn hình phù hợp; thử cuộn và layout
  • Dùng srcset/sizes cho phân phối responsive
  • Đặt ngân sách hiệu năng từ trang, người dùng và dữ liệu thực tế
  • Xóa siêu dữ liệu riêng tư không cần, nhưng giữ hồ sơ màu hay dữ liệu quy trình cần — xem EXIF và quyền riêng tư
  • Kiểm tra định kỳ với PageSpeed Insights

Câu hỏi thường gặp

Định dạng ảnh nào tốt nhất cho website?

Không có một định dạng tốt nhất. JPEG tương thích rộng cho ảnh chụp; WebP hỗ trợ mất và không mất dữ liệu, trong suốt, ảnh động; AVIF có thể hiệu quả nếu quy trình và người dùng hỗ trợ; PNG phù hợp đồ họa cạnh sắc không mất dữ liệu; SVG cho tác phẩm vector đáng tin. Tạo biến thể đại diện và chọn theo kích thước đo được, chất lượng, tương thích và tính năng.

Ảnh chưa tối ưu làm website chậm bao nhiêu?

Tác động tùy trang, viewport, mạng, cache và vai trò ảnh. Ảnh LCP quá lớn có thể tăng đáng kể thời gian truyền và giải mã, nhưng không có dung lượng nào tương ứng một giá trị LCP cố định. Dùng Core Web Vitals thực tế và trace phòng lab để xác định truyền, khám phá, ưu tiên, giải mã hay render là nút thắt.

Có nên lazy-load mọi ảnh trên trang?

Không. Trì hoãn ảnh bắt đầu ngoài viewport khi có ích, nhưng không trì hoãn ảnh LCP có khả năng. Chỉ đặt ưu tiên tải cao cho ảnh đầu thực sự quan trọng; lạm dụng làm gợi ý kém hữu ích. Kiểm thử vì layout, phát hiện preload và chọn nguồn responsive cũng ảnh hưởng thời gian.

Mọi ảnh đều cần chỉ định chiều rộng và cao?

Với img HTML, cung cấp width và height nội tại chính xác khi có thể để trình duyệt suy ra tỷ lệ trước khi tải. Kontainer CSS có kích thước chủ ý hoặc aspect-ratio cũng giữ chỗ. Điểm chính là slot ổn định và chính xác; kích thước sai hoặc thay đổi muộn vẫn gây Cumulative Layout Shift.

Tối ưu ảnh ảnh hưởng SEO thế nào?

Có thể cải thiện trải nghiệm và Core Web Vitals khi ảnh là nút thắt. Google dùng tín hiệu trải nghiệm trong hệ thống xếp hạng rộng hơn, nhưng ảnh nhỏ hơn không đảm bảo tăng hạng. Tối ưu cho người dùng, xác thực dữ liệu thực tế và xét chất lượng nội dung, liên quan, khả năng crawl cùng các yếu tố khác.

Tối ưu ảnh ngay bây giờ

Không cần tài khoản. Tệp xử lý trong trình duyệt và không gửi tới máy chủ xử lý ảnh của chúng tôi.

Nén JPEG Thay đổi kích thước Chuyển sang AVIF