Nén ảnh, kích thước và văn bản thay thế: làm đúng từng việc

Hiểu Google · Mùa 4 · Chuyên đề 38

Người đồng hành gửi lên một ảnh sản phẩm rất lớn. “Ảnh này nét lắm. Cứ giữ nguyên cho khách xem rõ nhé?”

Anh Gồ mở trang trên điện thoại. Khung ảnh chỉ chiếm một khoảng vừa phải, nhưng người xem vẫn phải tải một tệp lớn hơn nhu cầu của khung ấy. Đến lúc ảnh hiện, phần chi tiết nhỏ lại bị cắt khỏi vùng nhìn.

Đây là tình huống giả định. Một ảnh tốt trên website cần vừa giúp xem rõ, vừa được phục vụ đúng kích thước, và có cách truyền đạt ý nghĩa cho người không nhìn thấy ảnh. Ba việc ấy liên quan nhưng không thay thế nhau.

Phân biệt kích thước, dung lượng và chất lượng

Kích thước ảnh là chiều rộng và chiều cao tính bằng pixel. Dung lượng là lượng dữ liệu của tệp, thường thấy bằng KB hoặc MB. Chất lượng là điều người xem nhận được: ảnh có đủ rõ màu, hình dáng, chất liệu và chi tiết cần biết hay không.

Ví dụ tự đặt: ảnh rộng 4.000 pixel được đưa vào một khung chỉ rộng khoảng 800 pixel. Có thể cần bản nhỏ hơn cho khung đó, nhưng nếu trang cho phóng lớn để xem đường may thì vẫn phải tính phần xem chi tiết. Đừng chọn một chiều rộng cố định cho mọi ảnh chỉ vì nghe đó là kích thước “chuẩn SEO”.

Tài liệu web.dev về hiệu suất ảnh giải thích việc tải ảnh lớn hơn nhu cầu có thể gây lãng phí. Khi làm thực tế, hãy xem cả khung hiển thị, mật độ điểm ảnh của thiết bị và các bản ảnh website thực sự gửi xuống, thay vì chỉ nhìn tệp gốc trong thư viện.

Nén để bớt dữ liệu, rồi nhìn lại chi tiết

Giữ bản gốc trước khi thử. Tạo bản dùng cho web với kích thước phù hợp, chọn định dạng và mức nén, rồi mở cạnh bản cũ ở độ lớn người dùng sẽ xem. Với ảnh sản phẩm, để ý màu, viền vật thể, bề mặt vải, vân gỗ hoặc chi tiết quyết định việc chọn mua.

Một ảnh có nền phẳng và một ảnh có nhiều sợi mây đan không nhất thiết chịu được cùng mức nén. Không có lý do bắt tất cả ảnh phải dưới cùng một con số KB khi nội dung và mục đích khác nhau. Mục tiêu tự đặt cho trang có thể hữu ích, nhưng phải kiểm tra phần thông tin bị mất.

Các hệ thống có thể tự tạo nhiều bản ảnh hoặc dùng dịch vụ xử lý. Tài liệu về tự động nén và mã hóa ảnh mô tả hướng làm ấy. Nếu website đã có cơ chế tự xử lý, kiểm tra nó trước khi thêm một công cụ khác làm cùng việc.

Đặt ảnh cạnh nội dung mà nó đang giúp giải thích

Đọc hình: sơ đồ đặt trang chứa ảnh cạnh cách ảnh có thể được trình bày trong tìm kiếm hình ảnh. Đây là minh họa về ngữ cảnh và cách giới thiệu, không phải bài kiểm tra tốc độ hoặc ảnh trước–sau nén. Tên trang, phần nội dung gần ảnh và chính bức ảnh cần cùng nói về một việc.

Google khuyên dùng ảnh có ích, đặt trong nội dung liên quan, có tên tệp dễ hiểu và văn bản thay thế phù hợp. Xem hướng dẫn SEO hình ảnh của Google. Những yếu tố này giúp diễn đạt ảnh rõ hơn; chúng không bảo đảm ảnh sẽ đứng ở một vị trí nào trong kết quả.

Trong một bài hướng dẫn tháo chao đèn, ảnh cận cảnh khớp nối nên nằm ngay chỗ đang nói về khớp nối. Đặt nó cuối bài cùng một loạt ảnh trang trí khiến người xem phải tự đoán vì sao bức ảnh có mặt ở đó.

Văn bản thay thế diễn đạt điều ảnh cần truyền tải

Alt, hay văn bản thay thế, giúp truyền đạt ý nghĩa ảnh trong ngữ cảnh sử dụng, gồm cả khi người dùng tiếp cận bằng công nghệ hỗ trợ. Nó không phải chỗ chứa một danh sách từ khóa và cũng không đồng nhất với chú thích người xem nhìn thấy dưới ảnh.

Đọc ảnh: chú chó có một chiếc chuông ở vòng cổ. Trong ví dụ của W3C WAI, chi tiết chiếc chuông có ý nghĩa với nội dung nên được đưa vào mô tả. Nếu chỉ viết “ảnh đẹp” hoặc tên tệp, phần thông tin ấy sẽ biến mất đối với người cần văn bản thay thế.

Theo hướng dẫn ảnh mang thông tin của W3C WAI, điều nên mô tả tùy vào lý do ảnh được dùng. Một ảnh toàn cảnh sản phẩm và một ảnh cận đường may có thể cần hai mô tả khác nhau, dù chụp cùng một món đồ.

Ví dụ giả định cho ảnh thật đã xác nhận: “Chao đèn vải màu be, dáng trụ, viền nâu” hoặc “Cận cảnh đường may ở mép chao đèn”. Chỉ viết những gì nhìn thấy hoặc có tư liệu chắc chắn. Không thêm “cao cấp”, “bền nhất” hay vật liệu chưa được xác nhận vào alt.

Có ảnh nên để alt rỗng

Một nét trang trí chỉ tạo không khí và không mang thông tin có thể dùng alt rỗng, viết trong mã là alt=””. W3C WAI giải thích ảnh trang trí để tránh bắt người dùng công nghệ hỗ trợ nghe những mô tả thừa. Alt rỗng có chủ ý khác với quên xử lý thuộc tính.

Nếu ảnh là một liên kết hoặc nút thao tác, cần truyền đạt chức năng của nó theo ngữ cảnh. Nếu ảnh là biểu đồ hay bảng có nhiều thông tin, một câu ngắn chưa chắc đủ; hãy có phần giải thích hoặc dữ liệu đọc được trong bài. Đừng trút cả đoạn nội dung vào một ô alt.

Sau khi lưu, kiểm tra trên trang thật

Mở trang trên điện thoại và máy tính. Xem ảnh có bị kéo méo, cắt mất chi tiết hoặc chỉ hiện một bản mờ không. Nếu thay ảnh chính, kiểm tra cả phần phóng lớn. Nếu sửa alt trong thư viện nhưng ảnh trong bài đã có thuộc tính riêng, cần kiểm tra phần thực sự xuất ra trang; thao tác trên thư viện không tự bảo đảm mọi chỗ sử dụng đều đổi.

Một ghi chú hoàn thành giả định nên có: ảnh nào đã xử lý, kích thước bản dùng trên trang, dung lượng trước và sau, chi tiết đã kiểm tra và alt được lưu ở đâu. Mình có bằng chứng rõ hơn câu “đã tối ưu tất cả ảnh”.

À, ảnh nhẹ là để người xem đỡ chờ. Ảnh rõ và được diễn đạt đúng là để họ còn hiểu điều mình muốn cho thấy. Làm xong cần kiểm cả hai.

Đọc tiếp trong Mùa 4

Chuyên đề 39: Rich Results Test — biết công cụ đã kiểm tra được điều gì.

Các chuyên đề Mùa 4 · Bản đồ Hiểu Google

Đối chiếu tài liệu gốc ngày 29/10/2026. Câu chuyện, số liệu và tình huống tự đặt được dùng để giải thích, không phải kết quả đã đo trên website người đồng hành. Ảnh có nguồn và giới hạn sử dụng ngay dưới hình; giao diện có thể khác theo phiên bản, ngôn ngữ hoặc tài khoản.