Chọn JPG, PNG, GIF, WebP, TIFF hay SVG theo từng loại ảnh; cách resize, nén, đặt tên file, viết alt và kiểm tra tốc độ tải trang.
Không có đuôi ảnh nào tự giúp bài viết lên hạng. Ảnh tốt cho web là ảnh đúng nội dung, đủ nét ở kích thước hiển thị, tải nhanh và có ngữ cảnh để người đọc lẫn công cụ tìm kiếm hiểu. Với ảnh chụp, hãy thử WebP; với logo, sơ đồ, cân nhắc SVG; giữ JPG và PNG khi chúng phù hợp hơn.
Một người làm marketing thường nhận đủ thứ file: ảnh sản phẩm từ máy ảnh, logo PNG, banner TIFF từ designer, GIF từ team social. Nếu tải nguyên tất cả lên website, trang có thể chậm dù nội dung hay. Cách làm đúng không phải đổi hết sang một định dạng, mà là chọn file đầu ra theo mục đích.
Ảnh 1: Chọn file ảnh theo nội dung, không theo một “chuẩn SEO” duy nhất.
Sáu định dạng ảnh phổ biến dùng khi nào?
JPG/JPEG: Phù hợp với ảnh chụp người, không gian, sản phẩm nhiều màu và chuyển sắc. Nén mất dữ liệu nên file có thể nhẹ, nhưng chữ nhỏ, đường nét mảnh hoặc nền trong suốt không phải sở trường. Khi CMS hoặc kênh phân phối chưa xử lý WebP tốt, JPEG là phương án tương thích dễ dùng.
PNG: Phù hợp với ảnh chụp màn hình, hình có chữ hoặc đường nét sắc, hình cần nền trong suốt. Lưu kiểu không mất dữ liệu, nhưng ảnh chụp xuất PNG thường nặng hơn mức cần thiết. Logo PNG dùng được; nếu có bản SVG sạch và hệ thống hỗ trợ, SVG thường tiện hơn cho logo dạng hình học.
GIF: Chủ yếu dùng cho chuyển động ngắn, đơn giản. GIF hỗ trợ bảng màu hạn chế, nên ảnh chụp động thường vừa nặng vừa xấu. Với chuyển động trên website, thử WebP động hoặc video; luôn kiểm tra autoplay, khả năng tạm dừng và trải nghiệm trên điện thoại.
WebP: Lựa chọn thực dụng cho nhiều ảnh web: hỗ trợ nén có mất dữ liệu hoặc không mất dữ liệu, trong suốt và ảnh động. Thường đáng thử với ảnh chụp, banner và ảnh minh họa. Tuy vậy, không phải cứ đổi đuôi sang .webp là nhẹ hơn: phải xuất lại file và so sánh dung lượng, độ nét sau khi nén. Nếu công cụ xuất bản, email hoặc bên nhận không hỗ trợ tốt, giữ JPEG/PNG dự phòng.[2]
TIFF: Hữu ích cho file gốc chất lượng cao, scan và in ấn; không nên đưa trực tiếp lên trang web. Browser hỗ trợ không đồng đều và Google Search không liệt kê TIFF trong các định dạng ảnh được hỗ trợ. Hãy xuất bản web bằng JPEG, WebP hoặc PNG tùy nội dung.[1][2]
SVG: Ảnh vector giữ nét khi phóng to, hợp với logo, icon và sơ đồ đơn giản. Không phải lựa chọn cho ảnh chụp. Nếu nhận SVG từ nguồn ngoài, đội kỹ thuật cần kiểm tra và làm sạch trước khi đưa lên website; không coi nó là file hình vô hại trong mọi ngữ cảnh. Với biểu đồ nhiều thông tin, vẫn cần diễn giải nội dung bằng chữ trên trang.[2][4]
Tóm lại: ảnh chụp chọn WebP hoặc JPEG; ảnh giao diện và chữ nhỏ cân nhắc PNG hoặc WebP không mất dữ liệu; logo/icon chọn SVG khi được hỗ trợ; GIF chỉ khi thật cần; TIFF giữ làm file nguồn.
Định dạng nào tối ưu cho SEO?
Không có đáp án kiểu “WebP là chuẩn SEO nhất”. Google Search hỗ trợ JPEG, PNG, GIF, WebP và SVG, nhưng không liệt kê TIFF. Google nhấn mạnh khả năng tìm thấy ảnh trong HTML, nội dung trang liên quan, tên file, alt text và trải nghiệm tải trang. Định dạng chỉ là một phần của bài toán: chọn sai kích thước hoặc nén quá tay thì WebP vẫn cho trải nghiệm kém.[1]
Ví dụ, ảnh một lớp học đặt tên IMG_8421.webp, alt là “khóa học tốt nhất giá rẻ”, lại nằm trong bài về cách thiết kế website: đuôi WebP không sửa được sự lệch ngữ cảnh đó. Ngược lại, ảnh JPG đủ nét, nhẹ, tên và alt mô tả đúng lớp học có thể hữu ích hơn nhiều.
Tối ưu ảnh cho web mà không làm ảnh xấu đi
1. Xác định khung hiển thị. Ảnh hiển thị rộng khoảng 600 px trên trang thì không cần tải bản gốc 4000 px cho mọi người. Xuất các kích thước phù hợp, để website chọn bản theo màn hình bằng srcset và sizes nếu hệ thống hỗ trợ. Đừng phóng ảnh nhỏ thành ảnh lớn chỉ để đạt một con số kích thước. Ảnh bìa bài Kstudy theo quy trình biên tập có bản gốc 1280 × 800 px; đó là quy cách nội bộ, không phải kích thước bắt buộc của Google.[1]
2. Chọn định dạng rồi nén bằng mắt. Xuất thử WebP cho ảnh chụp, xem chữ trên banner, màu da và chi tiết sản phẩm ở kích thước người dùng thực sự nhìn. Nếu chữ nhòe, tăng chất lượng hoặc chuyển sang PNG/WebP không mất dữ liệu. Không có một mức KB hoặc “quality 80” áp dụng đúng cho mọi ảnh: đo theo bố cục, thiết bị và mục đích sử dụng.
3. Giữ riêng file gốc và file web. TIFF, PNG lớn hoặc file thiết kế vẫn có ích cho sửa lại sau này. Bản web nên được resize, nén, đặt tên rõ và bỏ metadata không cần thiết, nhất là thông tin vị trí GPS trong ảnh chụp. Không ghi đè file gốc.
4. Ưu tiên ảnh đầu trang. Nếu hero là thành phần lớn nhất người xem nhìn thấy đầu tiên, đừng gắn loading="lazy" cho nó. Các ảnh dưới màn hình đầu có thể lazy-load. Người làm website có thể dùng fetchpriority="high" cho ảnh LCP phù hợp, nhưng vẫn phải đo bằng PageSpeed Insights hoặc dữ liệu người dùng thật; chỉ tối ưu file không tự giải quyết mọi nguyên nhân chậm.[3]
Ví dụ ngắn cho người vibe coding: hãy yêu cầu AI tạo <img> có src thật, srcset, sizes, width, height và alt; ảnh đầu trang không lazy-load, ảnh bên dưới mới dùng loading="lazy". Sau đó mở HTML đã render để kiểm tra, đừng tin mỗi đoạn code AI trả về. Google có thể tìm URL trong src của thẻ <img>, nhưng không lập chỉ mục ảnh chỉ được gắn làm CSS background.[1]
Ảnh 2: Resize, nén, viết alt text và kiểm tra sau khi đăng.
Tên file, alt và thuộc tính nào giúp ảnh thân thiện tìm kiếm?
- Tên file: Ngắn, mô tả đúng ảnh, chẳng hạn
lop-hoc-thiet-ke-website-kstudy.webpthay vìIMG_8421.webp. Dùng chữ thường, không dấu và gạch nối giúp đội vận hành nhất quán; Google coi tên file là gợi ý nhẹ, không phải “mẹo” tăng hạng.[1] - Alt text: Viết một câu ngắn mô tả điều ảnh đóng góp cho bài. Ví dụ ảnh minh họa có bốn nhóm định dạng: “Sơ đồ chọn WebP/JPEG cho ảnh chụp, SVG cho logo, PNG cho đồ họa có chữ và WebP động cho chuyển động.” Không chèn từ khóa không xuất hiện trong ảnh. Ảnh chỉ để trang trí và đã được diễn đạt đầy đủ ở văn bản cạnh bên có thể dùng
alt="".[1][4] - Văn bản quanh ảnh và caption: Đặt ảnh cạnh đoạn nó giải thích; chú thích khi cần thêm ngữ cảnh hoặc nguồn ảnh. Với sơ đồ phức tạp, viết lại thông tin chính bằng chữ, đừng bắt độc giả phải đọc chữ bé trong ảnh.[1][4]
- `src`, `srcset`, `sizes`:
srclà URL ảnh dự phòng để công cụ tìm kiếm tìm thấy; hai thuộc tính còn lại giúp chọn bản phù hợp với thiết bị. Không chỉ đặt ảnh trong CSS background rồi kỳ vọng Google Images tìm được.[1] - `width` và `height`: Khai báo tỷ lệ để trình duyệt giữ chỗ khi tải, giảm xô lệch bố cục. `loading`: lazy cho ảnh dưới màn hình đầu, không lazy cho hero/LCP. `fetchpriority`: chỉ tăng ưu tiên cho ảnh thực sự quan trọng, không gắn cho mọi ảnh.[3]
- Ảnh đại diện chia sẻ: Chọn ảnh lớn, đúng bài; khai báo
og:imagehoặc structured data khi hệ thống hỗ trợ. Với Google Discover, hướng dẫn hiện hành khuyến nghị ảnh rộng tối thiểu 1200 px, không quá nhiều chữ vàmax-image-preview:large; đây là điều kiện tăng cơ hội hiển thị ảnh lớn, không phải cam kết lên Discover.[5]
Nếu ảnh không mở được cho người ngoài, bị chặn crawler, chỉ xuất hiện sau thao tác JavaScript hoặc URL tạm thời hết hạn, tên file và alt hay đến đâu cũng không cứu được. Hãy thử mở ảnh ở cửa sổ ẩn danh và kiểm tra trang sau khi publish.[1]
Quy trình 5 phút cho đội marketing, sale và truyền thông
- Chọn 1 ảnh thực sự giúp người đọc hiểu đoạn nội dung, kiểm tra quyền sử dụng và che thông tin riêng tư trong screenshot.
- Tạo bản web đúng tỷ lệ hiển thị, thử WebP/JPEG cho ảnh chụp, PNG/WebP cho ảnh nhiều chữ, SVG cho icon/sơ đồ có nguồn sạch.
- Xem thử trên điện thoại: ảnh còn nét, chữ đọc được, dung lượng hợp lý so với phần còn lại của trang.
- Đổi tên file có nghĩa, viết alt theo nội dung thật, đặt ảnh gần đoạn liên quan; với hình thuần trang trí dùng alt rỗng.
- Đăng thử và đo: ảnh hiện trên trang, link ảnh mở được, PageSpeed Insights không báo hero bị lazy-load hoặc ảnh tải quá lớn. Sửa theo kết quả đo, không theo một “mức KB chuẩn SEO” tưởng tượng.
Nếu làm thường xuyên trên Mac, có thể đọc thêm hướng dẫn dùng PixSEO để resize, crop và đặt tên ảnh trước khi tải lên web. Công cụ giúp rút bớt thao tác; người đăng vẫn phải tự kiểm tra nội dung ảnh, alt text và kết quả sau khi lên trang.
Câu hỏi thường gặp
Có cần đổi toàn bộ JPG sang WebP không? Không. Ưu tiên ảnh lớn gây chậm trang, thử xuất WebP rồi so sánh chất lượng và dung lượng. Giữ JPG khi hệ thống hoặc kênh dùng ảnh cần tương thích rộng.
Ảnh bao nhiêu KB là chuẩn SEO? Không có một ngưỡng KB chung cho mọi ảnh. Hãy xuất đúng kích thước, nén đến khi vẫn đủ nét và đo tốc độ tải trên trang thực tế.
PNG có kém SEO hơn WebP không? Không mặc định. PNG có thể là lựa chọn tốt cho screenshot hoặc đồ họa cần sắc nét; WebP thường đáng thử để giảm dung lượng. Điều quan trọng là ảnh phù hợp nội dung và tải hiệu quả.
Alt có phải lặp từ khóa chính của bài không? Không. Alt mô tả nội dung và chức năng của ảnh trong ngữ cảnh bài. Lặp một chuỗi từ khóa vào mọi ảnh vừa khó đọc vừa không giúp người dùng.[1][4]
