Tối ưu hình ảnh bài viết SEO: đẹp, đúng nội dung và dễ xem trên điện thoại

Tối ưu hình ảnh bài viết SEO bắt đầu từ việc chọn đúng điều cần cho người đọc nhìn thấy. Sau đó, cắt khung để làm rõ chủ thể, xuất ảnh ở kích thước phù hợp, giảm dung lượng có kiểm tra và viết alt theo nội dung thực sự trong hình. Một ảnh nhẹ nhưng cắt mất thao tác quan trọng vẫn cần làm lại.

Hướng dẫn này giúp bạn quyết định khi nào dùng ảnh thật, minh họa hoặc sơ đồ; đồng thời xem một ví dụ cắt khung và một phép thử nén có kích thước, dung lượng thực. Mục tiêu là giữ được thông tin khi ảnh đi từ màn hình biên tập xuống màn hình điện thoại.

1. Chọn loại ảnh theo điều người đọc cần hiểu

Trước khi tìm ảnh, hãy viết một câu ngắn: “Ảnh này giúp người đọc thấy…”. Câu trả lời càng cụ thể, bạn càng dễ chọn đúng hình và biết chi tiết nào phải giữ khi xử lý.

• Dùng ảnh thật khi cần nhận biết hoặc kiểm chứng: hình dạng sản phẩm, chất liệu, vị trí một bộ phận, tình trạng trước khi sửa, kết quả của một thao tác thực tế. Chẳng hạn, bài hướng dẫn kiểm tra đường may cần ảnh đủ gần để thấy đường chỉ; ảnh một người đứng trong cửa hàng chỉ tạo bối cảnh.
• Dùng hình minh họa khi cần diễn đạt một ý tưởng: cách sắp xếp nội dung, sự phân tán thông tin hoặc một tình huống giả định. Minh họa có thể lược bỏ chi tiết gây nhiễu, nhưng cần được nhận diện đúng là minh họa nếu người xem dễ nhầm với sản phẩm, dự án hay kết quả thật.
• Dùng sơ đồ khi cần theo dõi quan hệ hoặc thứ tự: bước nào trước, nhánh nào phù hợp, hai phương án khác nhau ở đâu. Nếu sơ đồ chỉ chép lại nguyên đoạn văn trong nhiều ô nhỏ, hãy rút gọn hoặc để phần đó dưới dạng chữ trong bài.
• Dùng ảnh chụp màn hình khi người đọc phải thao tác: cho thấy đúng nút, trường nhập hoặc trạng thái cần nhận biết. Giữ đủ bối cảnh để tìm được vị trí, che dữ liệu riêng tư trước khi dùng.

Một bài có thể phối hợp nhiều loại ảnh, miễn mỗi ảnh làm một việc rõ ràng. Ảnh đại diện giới thiệu chủ đề; ảnh trong thân bài giải thích điều người đọc đang gặp ở đoạn đó. Không cần chèn thêm một ảnh chỉ vì vừa viết xong một tiêu đề phụ.

Chọn ảnh tự tạo, ảnh được chủ sở hữu cho phép hoặc nguồn có điều kiện sử dụng phù hợp. Giữ lại thông tin nguồn và quyền dùng cùng tệp gốc. Với nội dung giới thiệu sản phẩm thật, không để hình dựng tự bổ sung màu sắc, kết cấu hay tính năng chưa được xác nhận.

2. Cắt khung trước khi quyết định nén

Cắt ảnh, đổi kích thước và nén là ba việc khác nhau. Cắt khung chọn phần nào của cảnh sẽ xuất hiện. Đổi kích thước thay số pixel của ảnh. Nén thay cách lưu dữ liệu để giảm dung lượng. Làm theo thứ tự này giúp bạn tránh nén kỹ một tệp rồi phát hiện vẫn phải đổi bố cục.

Hãy nhìn lại câu “ảnh này giúp người đọc thấy…” và xác định vùng quan trọng nhất. Với ảnh hướng dẫn thao tác, đó có thể là cả bàn tay lẫn bộ phận đang được xử lý. Với ảnh giới thiệu không gian, đó có thể là quan hệ giữa các vật thể, nên cắt quá sát lại làm mất ý nghĩa.

• Đặt khung theo đúng vị trí sẽ dùng: ảnh đại diện, ảnh ngang trong bài hoặc ảnh chi tiết.
• Giữ một khoảng trống quanh phần quan trọng để ảnh còn chịu được những cách hiển thị khác nhau.
• Không kéo giãn ảnh để lấp đầy khung. Nếu tỷ lệ không phù hợp, chọn lại vùng cắt hoặc một ảnh khác.
• Kiểm tra bản thu nhỏ trước: chủ thể có còn nhận ra được khi không phóng to không?

Một ảnh toàn cảnh đẹp trên máy tính có thể khiến chi tiết chính trở nên quá nhỏ trên điện thoại. Hướng dẫn về cắt ảnh theo bố cục của web.dev mô tả cách dùng các phiên bản có khung khác nhau theo màn hình. Nếu CMS chỉ cho dùng một tệp, hãy chọn khung vẫn truyền đạt được ý chính ở cả hai kích thước; đừng mặc định hệ thống sẽ tự cắt đúng.

Ví dụ cắt khung từ cùng một ảnh minh họa GPT

Ảnh gốc do GPT tạo có kích thước 1536 × 1024 px, gồm lá cây, hai khung ảnh và kính lúp. Hai bản dưới đây đều được xuất thành 390 × 390 px để so sánh cách giữ toàn cảnh và cách cắt giữa.

Bản giữ trọn: vẫn thấy đầy đủ hai khung và cán kính lúp, phù hợp khi cần giải thích quan hệ giữa các vật thể. Bản cắt giữa: chi tiết lá cây lớn hơn, nhưng cạnh trái của khung lớn và phần cuối cán kính lúp đã bị loại khỏi ảnh.

Không phải mọi bản cắt sát đều sai. Nếu mục tiêu chỉ là xem gân lá, vùng cắt có thể hữu ích. Nếu cần thấy toàn bộ bố cục, hãy giữ đủ vật thể hoặc chọn lại khung. Tăng độ nét hay giảm mức nén không thể đưa phần đã cắt trở lại.

Đây là phép thử trên các tệp xuất từ cùng một minh họa, không phải ảnh sản phẩm hoặc kết quả khách hàng. Sau khi đưa vào CMS, vẫn cần kiểm cách giao diện thực tế hiển thị ảnh.

3. Thử trên một ảnh cụ thể rồi mới chọn bản dùng

Để thử nén, Mạch dùng hình minh họa tạo bằng AI riêng cho bài này: một chiếc lá xanh đậm đi qua hai khung màu ngà, phía trước có kính lúp màu đồng cho thấy các đường gân lá. Hình có vùng tối, nền sáng và nhiều nét nhỏ để quan sát; đây không phải ảnh chụp sản phẩm hay phép đo quang học.

Ảnh nguồn PNG được chuyển bằng ImageMagick sang hai bản WebP, với tham số quality lần lượt là 88 và 30. Cả ba tệp giữ nguyên khung và kích thước 1536 × 1024 px. Số đo dưới đây được đọc từ các tệp xuất ngày 04/10/2026, trước khi tải lên CMS. Nếu hệ thống nén hoặc chuyển đổi lại ảnh, dung lượng bản đã lưu có thể khác:

• PNG nguồn: 2.421.942 byte, tương đương 2.365,2 KiB.
• WebP quality 88: 213.232 byte, tương đương 208,2 KiB.
• WebP quality 30: 45.958 byte, tương đương 44,9 KiB.

Trong phép đo này, 1 KiB bằng 1.024 byte. So với PNG nguồn, bản Q88 giảm khoảng 91,2% dung lượng tệp; bản Q30 giảm khoảng 98,1%. Đây là kết quả của việc đổi định dạng và thiết lập xuất trên đúng ảnh này.

Khi đặt hai bản WebP ở cùng chiều rộng, cả hai vẫn nhận ra chiếc lá, hai khung và kính lúp. Đừng chỉ nhìn toàn cảnh: hãy so vùng gân lá trong kính, rìa khung và nền sáng để quyết định phần chi tiết còn lại có đủ cho chỗ sử dụng hay không.

Với bài này, Mạch chọn Q88 làm ảnh đại diện, ưu tiên chi tiết của hình minh họa. Q30 vẫn là một phương án để cân nhắc khi dùng nhỏ hơn hoặc khi ngân sách dung lượng chặt hơn. Việc chọn Q88 là quyết định biên tập của bộ ảnh này, không phải một ngưỡng chất lượng dùng chung cho mọi website.

Điều phép thử xác nhận được là số byte đã giảm trong khi kích thước pixel được giữ nguyên. Các tỷ lệ trên không cho biết trang tải nhanh hơn bao nhiêu và không phải kết quả tăng thứ hạng SEO. Muốn biết tác động tới tải trang, cần đo trên trang thực với điều kiện mạng, thiết bị và cách phân phối ảnh cụ thể.

4. Chọn kích thước và định dạng theo chỗ hiển thị

Trước khi xuất tệp, hãy xem ảnh được hiển thị rộng bao nhiêu trong bố cục bài viết. Kích thước lưu trong tệp và chiều rộng nhìn thấy trên trang không phải lúc nào cũng giống nhau. Màn hình có mật độ điểm ảnh cao cũng có thể cần bản ảnh nhiều pixel hơn để giữ độ rõ.

Cơ chế ảnh đáp ứng được web.dev giải thích cho phép trình duyệt chọn giữa các bản có kích thước khác nhau. Nếu CMS đã tạo các bản này, kiểm tra kết quả nó thực sự phục vụ. Nếu chưa có, chọn tệp theo khung hiển thị lớn nhất cần dùng rồi kiểm cả máy tính và điện thoại, thay vì tải nguyên ảnh gốc nhiều nghìn pixel cho mọi vị trí.

Về định dạng, có thể bắt đầu theo cách sau rồi so lại bằng mắt:

• Ảnh chụp hoặc minh họa nhiều sắc độ: thử WebP hoặc JPEG; có thể thử AVIF nếu CMS hỗ trợ.
• Hình có nét mảnh, chữ nhỏ hoặc cần giữ chi tiết chính xác: so bản PNG hoặc WebP không mất dữ liệu với bản nén mất dữ liệu trước khi chọn.
• Logo hoặc sơ đồ hình học: tệp vector có thể phù hợp nếu hệ thống cho phép sử dụng an toàn. Đừng tự đổi đuôi một ảnh bitmap thành SVG.

Các lựa chọn này bám theo hướng dẫn chọn định dạng ảnh của web.dev. Định dạng tốt là định dạng giữ được điều cần xem với dung lượng hợp lý trong hệ thống bạn đang dùng. Một tệp có đuôi mới hơn vẫn cần kiểm tra chất lượng thực tế.

Khi thử nén, xuất các bản từ cùng tệp nguồn, giữ nguyên khung và kích thước để dễ so sánh. Tăng dần mức nén đến khi thấy chi tiết quan trọng bắt đầu bị ảnh hưởng, rồi quay lại bản còn đáp ứng nhu cầu. Chú ý dấu tiếng Việt, đường kẻ mảnh, rìa vật thể và những vùng chuyển màu nhẹ.

Con số “quality” trong công cụ xuất ảnh là một tham số của bộ mã hóa. Nó không phải phần trăm chất lượng mắt người còn nhìn thấy; cùng một con số ở JPEG và WebP cũng không tạo ra kết quả tương đương. Tài liệu về mức nén của web.dev giải thích sự khác biệt này. Vì vậy, hãy ghi cả công cụ, định dạng và thiết lập khi cần lặp lại một phép thử.

Giới hạn tải lên của CMS là điều kiện kỹ thuật của từng website. Tệp được hệ thống chấp nhận chưa chắc đã là bản phù hợp nhất cho bài; ngược lại, không nên làm chữ vỡ hoặc chi tiết nhòe chỉ để đạt một mốc dung lượng tự đặt.

5. Viết alt đúng ảnh và đúng ngữ cảnh

Alt là phần văn bản thay thế giúp truyền đạt thông tin của ảnh cho người không nhìn thấy nó. W3C hướng dẫn viết alt cho ảnh mang thông tin theo điều ảnh đóng góp trong ngữ cảnh sử dụng. Hãy viết sau khi đã chốt bản cắt, vì một mô tả đúng với ảnh gốc có thể không còn đúng với ảnh được đưa vào bài.

Với hình chiếc lá dùng trong phép thử, có thể viết: “Minh họa chiếc lá qua hai khung màu ngà và kính lúp màu đồng làm rõ gân lá.” Câu này mô tả đúng các thành phần nhìn thấy. Câu “tối ưu hình ảnh SEO chuẩn SEO đẹp nhất” không giúp hình dung ảnh và đưa vào những nhận xét không có căn cứ.

Với bản giữ trọn, alt có thể nêu: “Lá cây, hai khung ảnh và toàn bộ cán kính lúp trong khung vuông có khoảng trống.” Bản cắt giữa cần mô tả khác: “Cùng minh họa bị cắt mất cạnh trái khung lớn và phần cuối cán kính lúp.” Viết theo điều mỗi ảnh đóng góp vào phép so sánh, không chép cùng một alt cho hai nhiệm vụ khác nhau.

Với ảnh so sánh, alt nên nêu điều đang được so sánh. Các số đo và phần giải thích dài nên nằm trong đoạn chữ cạnh ảnh để mọi người cùng đọc được. Cách kết hợp mô tả ngắn và thông tin chi tiết bên cạnh phù hợp với hướng dẫn của W3C cho hình phức tạp.

Ảnh chỉ để trang trí, không bổ sung thông tin, có thể dùng alt rỗng theo hướng dẫn về ảnh trang trí của W3C. Alt rỗng là một lựa chọn có chủ đích; không đồng nghĩa bỏ quên trường này ở mọi ảnh.

Google Search Central khuyên dùng tên tệp ngắn, có tính mô tả, đặt ảnh gần phần chữ liên quan và tránh nhồi từ khóa vào alt. Đặt tên theo điều ảnh thể hiện sẽ hữu ích hơn những tên chung như “image-01”. Từ khóa chỉ nên xuất hiện khi nó thực sự giúp mô tả hình.

Phân biệt thêm hai phần thường bị dùng lẫn: alt truyền đạt thông tin thay thế cho ảnh; chú thích giúp người đang đọc hiểu nguồn, điều kiện thử hoặc điểm cần chú ý. Bạn có thể dùng chú thích để ghi “ảnh minh họa” hay giải thích phép đo, thay vì dồn mọi thông tin vào alt.

6. Kiểm trên điện thoại bằng chính bản xem bài viết

Mở riêng tệp ảnh là bước cần thiết, nhưng chưa đủ. Khi vào bài, ảnh còn chịu chiều rộng cột, lề trang, kiểu cắt thumbnail và cách CMS xử lý sau tải lên. Hãy kiểm bản xem trước đã lưu, không chỉ nhìn ảnh trong cửa sổ chỉnh sửa.

1. Đọc ở kích thước bình thường: bạn có hiểu điểm chính mà không phải chụm tay phóng to không? Nếu chữ trong ảnh quá nhỏ, giảm lượng chữ, tách hình thành các phần có nghĩa hoặc chuyển nội dung đó thành chữ trong bài.
2. Kiểm khung cắt: xem cả ảnh đại diện trên danh sách và ảnh trong trang chi tiết. Bàn tay, vật thể hay nhãn cần đọc có bị mất không?
3. Đối chiếu chữ với hình: ảnh có nằm cạnh đúng đoạn giải thích? Các nhãn “A”, “B” hoặc “trước”, “sau” có khớp không?
4. Kiểm sau xử lý của CMS: mở lại ảnh đã lưu, quan sát vùng nét mảnh và chữ có dấu. Một bản xuất đẹp vẫn có thể thay đổi khi hệ thống tạo lại ảnh.
5. Cuộn từ đầu đến cuối: phát hiện ảnh tràn ngang, khoảng trắng bất thường, phần chữ nhảy vị trí hoặc ảnh cần xem nhưng chưa tải được.

Thu nhỏ cửa sổ trình duyệt là cách kiểm nhanh bố cục. Khi có điều kiện, kiểm thêm trên điện thoại thật, nhất là ảnh nhiều chữ hoặc chi tiết nhỏ. Đừng dùng thao tác phóng to để bỏ qua một hình vốn khó đọc ở kích thước bình thường.

Nếu ảnh đầu bài xuất hiện chậm hoặc làm phần chữ dịch chuyển, trao đổi với người phụ trách website. web.dev lưu ý rằng tải lười không phù hợp cho ảnh cần hiện ngay khi mở trang, còn khai báo kích thước giúp trình duyệt dành sẵn chỗ cho ảnh. Đây là việc cần kiểm ở cách website phân phối và hiển thị ảnh, ngoài bước biên tập tệp.

7. Chốt bộ ảnh trước khi đưa bài lên website

Một lượt kiểm cuối nên trả lời được những câu hỏi sau:

• Mỗi ảnh giúp người đọc hiểu thêm điều gì, và có ảnh nào lặp lại vai trò của ảnh khác không?
• Ảnh có nguồn dùng phù hợp, đúng với đối tượng được mô tả và được ghi rõ là minh họa khi cần không?
• Khung cắt đã giữ đủ chi tiết quan trọng ở cả ảnh lớn lẫn thumbnail chưa?
• Tệp xuất có giữ được độ rõ cần thiết, và các số đo ghi trong bài có khớp với đúng tệp đó không?
• Alt có mô tả bản ảnh cuối cùng, còn phần giải thích dài đã có trong nội dung dễ đọc chưa?
• Ảnh đại diện, ảnh trong bài và đường dẫn đã được mở kiểm lại trên bản lưu chưa?

Hãy lưu tệp gốc riêng để còn cắt lại khi bố cục thay đổi. Đặt bản dùng cuối ở nơi dễ nhận biết, kèm vai trò và alt; tránh gửi nhiều tệp gần giống nhau khiến người đăng chọn nhầm bản thử.

Một bộ ảnh tốt cho bài viết giúp người đọc nhận ra chủ đề, hiểu được ví dụ và theo dõi nội dung trên màn hình họ đang dùng. Khi cần hỗ trợ đồng bộ phần chữ, hình và cách trình bày trong CMS, bạn có thể xem dịch vụ chăm sóc nội dung website của Mạch Nội Dung.