Tối ưu ảnh website: chọn đúng kích thước, định dạng

Một tấm ảnh chụp từ điện thoại đời mới thường ra file rộng 3000 – 4000px, nặng 3 – 8MB. Đưa thẳng file đó lên website rồi để trình duyệt co lại còn vài trăm px hiển thị là lỗi phổ biến nhất khi chuẩn bị ảnh cho web: khách phải tải nguyên dung lượng gốc cho một ô hình nhỏ hơn gốc cả chục lần. Tối ưu ảnh website giải quyết đúng khoảng lệch đó, bằng cách chọn khổ theo chỗ dùng, đổi định dạng và nén trước khi tải lên, thay vì bắt trình duyệt tự co ảnh lúc khách đang chờ trang mở. Nếu website đang triển khai qua dịch vụ thiết kế website chuẩn SEO, phần này thường nằm sẵn trong quy trình bàn giao.

Vì sao ảnh là thứ đầu tiên làm website tải chậm

Ảnh thường chiếm phần dung lượng lớn nhất trên một trang, nặng hơn hẳn HTML, CSS và JavaScript cộng lại. Trang chủ có vài chục ảnh sản phẩm, mỗi ảnh 1 – 2MB thì tổng dung lượng đã vượt xa những gì kết nối di động ở Việt Nam tải kịp trong vài giây đầu.

Cái làm chậm không phải bản thân việc có ảnh, mà là ảnh sai khổ và sai định dạng. Một ảnh nền chụp máy ảnh full-frame, chưa qua xử lý, đặt lên khối banner rộng 1600px vẫn giữ nguyên 4000px và định dạng PNG thì có thể nặng gấp mười lần bản đã chuẩn bị đúng cách, trong khi hiển thị ra màn hình giống hệt nhau.

Tối ưu ảnh website bắt đầu từ việc chọn đúng khổ theo chỗ dùng

Tối ưu ảnh website không phải nén cho nhỏ nhất có thể, mà là khớp khổ ảnh với khổ hiển thị thật của nó trên trang. Ảnh nền toàn màn hình cần khổ khác ảnh trong bài viết, ảnh trong bài viết lại khác ảnh đại diện chia sẻ mạng xã hội.

Quy tắc chung: xuất ảnh ở khổ gấp khoảng 1,5 – 2 lần khổ hiển thị lớn nhất trên màn hình Retina, không hơn. Xuất khổ 4000px cho một ô hiển thị 800px là thừa hoàn toàn, phần thừa đó khách vẫn phải tải về nhưng mắt không nhìn ra khác biệt so với bản đúng khổ.

Ảnh nền, ảnh trong bài, ảnh sản phẩm và ảnh chia sẻ mạng xã hội cần khổ bao nhiêu

Mỗi vị trí trên trang có một khổ chuẩn riêng, không dùng chung một cỡ ảnh cho mọi chỗ. Bảng dưới đây liệt kê khổ và dung lượng mục tiêu cho từng loại ảnh thường gặp trên một website doanh nghiệp hoặc website bán hàng.

Khổ 1200 x 630px cho ảnh chia sẻ không phải số tuỳ chọn, đó là khổ Facebook và Zalo dùng để dựng thẻ xem trước khi dán link. Đặt sai tỷ lệ, ảnh bị cắt xén lúc hiển thị trên khung chat. Ảnh không đúng khổ cũng là một trong những nguyên nhân gây ra lỗi hiển thị trên điện thoại, vì ảnh dựng cho màn hình desktop bị co ép sai tỷ lệ khi xuống màn hình nhỏ.

Đổi ảnh sang WebP và nén ở mức nào là hợp lý

WebP là định dạng ảnh Google phát triển riêng cho web, cho ảnh nhẹ hơn JPEG hoặc PNG ở cùng mức chất lượng nhìn bằng mắt thường. Theo tài liệu WebP của Google, ảnh WebP nhỏ hơn khoảng 25 – 34% so với JPEG cùng chất lượng, và nhỏ hơn nhiều so với PNG khi ảnh có nhiều màu chuyển sắc.

Mức nén hợp lý cho ảnh chụp là chất lượng 75 – 82%. Dưới ngưỡng đó ảnh bắt đầu vỡ khối ở vùng chuyển màu mượt như bầu trời hay da người, trên ngưỡng đó dung lượng tăng nhanh mà mắt không phân biệt thêm được gì. Ảnh có chữ hoặc đường viền sắc nét, như banner có text hay ảnh chụp màn hình, nên xuất WebP không mất dữ liệu để chữ không bị mờ nhoè.

Ảnh dựng bằng công cụ AI cũng cần qua đúng bước xử lý này trước khi đăng, không phải cứ tải về là dùng được ngay. Xem thêm bài dùng AI tạo ảnh cho website để biết những lỗi hay gặp khi lấy ảnh AI lên web.

Đặt sẵn kích thước ảnh để trang không nhảy khi ảnh tải xong

Thẻ ảnh thiếu thuộc tính width và height khiến trình duyệt không biết chừa chỗ trước, đến lúc ảnh tải xong nội dung bên dưới bị đẩy dịch xuống đột ngột. Người đọc đang định bấm vào một nút thì bấm nhầm chỗ khác vì trang vừa nhảy ngay dưới ngón tay.

Cách sửa đơn giản: khai báo width và height, hoặc thuộc tính CSS aspect-ratio, đúng tỷ lệ ảnh gốc ngay trong thẻ ảnh. Trình duyệt dựa vào đó chừa đúng khoảng trống từ đầu, ảnh tải xong lấp vào chỗ đã chừa, trang không xê dịch. Đây là phần việc nên làm ngay lúc chuẩn bị ảnh, không phải để CMS tự lo sau khi đăng bài.

Ảnh nào nên tải lười, ảnh nào không nên đụng tới tải lười

Tải lười (lazy load) hoãn việc tải ảnh nằm dưới màn hình đầu tiên cho tới khi người đọc cuộn gần tới đó, giúp trang mở nhanh hơn vì trình duyệt không phải tải hết vài chục ảnh cùng lúc. Ảnh trong danh sách sản phẩm ở nửa dưới trang, ảnh minh hoạ giữa và cuối bài viết là nơi tải lười phát huy tác dụng rõ nhất. Nghi ngờ trang chậm vì lý do khác ngoài ảnh thì đọc thêm bài nguyên nhân website tải chậm.

Ảnh lớn nằm ngay đầu trang, phần hiển thị đầu tiên khi trang vừa mở, thì không nên gắn tải lười. Đó chính là ảnh trình duyệt cần tải sớm nhất, cũng thường là phần tử Core Web Vitals dùng để đo tốc độ hiển thị trên phần lớn trang giới thiệu doanh nghiệp và trang bán hàng. Theo tài liệu Web Vitals của Google, chỉ số LCP, tức thời gian phần tử lớn nhất hiển thị xong, đạt mức tốt khi dưới hai phẩy năm giây; chỉ số CLS, tức mức xê dịch bố cục, đạt mức tốt khi dưới không phẩy một; còn chỉ số INP, tức thời gian phản hồi thao tác, đạt mức tốt khi dưới hai trăm mili giây. Gắn tải lười cho ảnh đầu trang vô tình bắt trình duyệt chờ thêm một nhịp trước khi bắt đầu tải, kéo chỉ số LCP chậm lại đúng ở chỗ cần nhanh nhất.

Trước khi giao website cho đơn vị thiết kế, chuẩn bị sẵn bộ ảnh đã chọn lọc và tối ưu ảnh website theo từng vị trí giúp rút ngắn thời gian dựng trang, thay vì bên thiết kế phải xử lý lại toàn bộ từ đầu. Dịch vụ thiết kế website chuẩn SEO của BizMaC nhận cả phần này trong quy trình bàn giao, gồm chọn khổ, đổi định dạng và khai báo kích thước cho toàn bộ ảnh trên trang.

Câu hỏi thường gặp khi xử lý ảnh cho website

Ghi nhanh

• Xuất ảnh đúng khổ theo vị trí: hero 1600 – 1920px, ảnh trong bài tối đa 800px, ảnh sản phẩm 600 – 1200px, ảnh chia sẻ 1200 x 630px.
• Đổi sang WebP, nén chất lượng 75 – 82% cho ảnh chụp, giữ lossless cho ảnh có chữ.
• Khai báo width, height hoặc aspect-ratio cho mọi ảnh để tránh trang nhảy.
• Tải lười cho ảnh dưới màn hình đầu, không gắn cho ảnh lớn đầu trang vì đó là phần tử Core Web Vitals đo tốc độ hiển thị.