Tối ưu ảnh website: web nhẹ hơn, lên Google nhanh hơn

Tối ưu ảnh website là một trong những việc cho hiệu quả cao nhất mà lại ít người chịu làm. Mười năm làm nghề, mình nhận giúp xem không biết bao nhiêu web chậm rì, và gần như lần nào cũng vậy: mở ra là thấy một đống ảnh nặng trịch, mỗi tấm vài MB, up thẳng lên không qua xử lý gì. Chỉ riêng dọn đống ảnh đó thôi đã đủ kéo một web từ ì ạch thành nhanh hẳn, mà chẳng cần đụng tới một dòng code.

Bài này mình viết cho người không rành kỹ thuật. Mình sẽ đi qua từng việc cụ thể: nén ảnh cho nhẹ, đổi sang định dạng mới cho gọn, chọn kích thước đúng để khỏi phí, đặt tên file và phần mô tả ảnh sao cho Google hiểu, rồi cách để ảnh chỉ tải khi cần. Làm xong mấy việc này, web bạn vừa nhanh hơn cho khách, vừa có thêm cửa lên Google Images (mục tìm hình ảnh của Google) kéo khách về.

Vì sao ảnh quyết định web nhanh hay chậm

Trên một web bình thường, ảnh thường là thứ chiếm dung lượng lớn nhất — nặng hơn cả chữ nghĩa và mã nguồn cộng lại. Một trang chủ có dăm bảy tấm ảnh chưa tối ưu dễ dàng nặng tới chục MB, trong khi cũng trang đó nếu xử lý ảnh tử tế chỉ còn một hai MB. Khác biệt nằm gần như trọn vẹn ở khâu ảnh.

Cái khổ là mắt thường nhìn trên màn hình không phân biệt nổi một tấm ảnh 4MB với một tấm 200KB — trông y hệt nhau. Nhưng máy thì phải tải đủ từng byte. Khách ngồi nhìn ảnh hiện ra từng mảng một, chờ vài giây không thấy gì là họ thoát ra, quay về Google bấm sang web khác nhanh hơn. Bạn mất một người khách mà còn chẳng biết mình vừa mất.

Chuyện không dừng ở đó. Google cũng chấm điểm trải nghiệm trang qua một bộ thước đo gọi là Core Web Vitals (các chỉ số sức khoẻ cốt lõi của trang — đo tốc độ hiện nội dung, độ mượt và độ ổn định khi tải). Ảnh nặng kéo tụt các chỉ số này, nên web ảnh xấu vừa mất khách vừa khó lên top. Mình có nói kỹ hơn về chuyện này trong bài tốc độ tải website nếu bạn muốn hiểu sâu phần nền tảng.

Nhưng ảnh không chỉ là gánh nặng. Làm đúng cách, nó còn là một mỏ khách. Mỗi tấm ảnh được đặt tên và mô tả chuẩn là một cơ hội xuất hiện trên Google Images, nơi nhiều người tìm sản phẩm bằng cách xem hình trước. Vậy nên tối ưu ảnh là việc một công đôi chuyện: vừa làm web nhanh, vừa mở thêm một lối kéo khách.

Nén ảnh: việc dễ nhất mà hiệu quả nhất

Nếu chỉ làm được một việc duy nhất cho web nhẹ hơn, mình khuyên bạn nén ảnh. Đây là việc dễ nhất, rẻ nhất, mà hiệu quả thấy ngay.

Nén ảnh nghĩa là giảm dung lượng tấm ảnh xuống, bằng cách bỏ đi những chi tiết thừa mà mắt người gần như không nhận ra. Một tấm ảnh chụp từ điện thoại đời mới thường nặng 4 đến 6MB, trong đó phần lớn là dữ liệu dư khi đưa lên web. Nén lại một cách hợp lý, tấm ảnh đó còn vài trăm KB mà nhìn trên màn hình vẫn đẹp y nguyên.

Cách làm rất đơn giản, không cần phần mềm đắt tiền. Trên mạng có nhiều công cụ nén ảnh miễn phí, bạn chỉ cần kéo ảnh vào, chờ vài giây rồi tải bản nhẹ về up lên web thay cho bản gốc. Một số tên quen thuộc dễ tìm là TinyPNG, Squoosh hay iLoveIMG — bạn gõ tên lên Google là ra ngay, dùng trực tiếp trên trình duyệt, không cần cài đặt gì.

Về mức nén, mình hay khuyên cố giữ mỗi tấm ảnh dưới khoảng 200KB cho ảnh thường, ảnh nền lớn đầu trang thì có thể nhỉnh hơn một chút nhưng đừng quá 500KB. Đừng tham nén quá tay tới mức ảnh bị bệt màu, rạn vỡ — như vậy lại phản tác dụng, web nhẹ mà nhìn rẻ tiền. Cứ nén tới mức mắt thường vẫn thấy đẹp là dừng, đó là điểm cân bằng tốt nhất.

Định dạng WebP: nhẹ hơn mà vẫn nét

Sau khi nén, việc tiếp theo đáng làm là đổi định dạng ảnh sang WebP. Nghe có vẻ kỹ thuật nhưng thật ra rất đơn giản, và đây là một trong những thay đổi cho hiệu quả rõ nhất.

Định dạng ảnh là kiểu file mà tấm ảnh được lưu. Lâu nay ai cũng quen với JPG và PNG — đó là hai định dạng cũ, ra đời từ rất lâu. WebP là định dạng mới hơn do Google phát triển, có khả năng nén tốt hơn hẳn: cùng một tấm ảnh, bản WebP thường nhẹ hơn bản JPG khoảng một phần ba tới một nửa, mà chất lượng nhìn không khác gì. Nghĩa là bạn được web nhẹ hơn mà chẳng phải hy sinh độ đẹp.

Có người lo WebP là định dạng lạ, máy khách không xem được. Yên tâm, chuyện đó đã là quá khứ. Mọi trình duyệt phổ biến hiện nay — Chrome, Safari, Cốc Cốc, Edge — đều hiển thị WebP bình thường. Đây giờ là lựa chọn mặc định của dân làm web, không còn là thứ thử nghiệm nữa.

Cách đổi sang WebP cũng dễ. Công cụ Squoosh mình nhắc ở trên cho phép bạn vừa nén vừa xuất thẳng ra WebP trong một lần. Nếu web bạn chạy trên WordPress (nền tảng làm web phổ biến), có những tiện ích cài thêm tự động chuyển toàn bộ ảnh sang WebP mà bạn không phải làm thủ công từng tấm. Còn nếu bên mình dựng web cho bạn thì việc này được lo sẵn ngay từ đầu, ảnh đẩy lên là tự thành WebP, bạn khỏi bận tâm.

Kích thước đúng: đừng dùng ảnh to gấp mấy lần cần

Đây là lỗi mình gặp rất nhiều và ít người để ý. Người ta lấy nguyên tấm ảnh gốc từ điện thoại — thường rộng tới 4000 hay 5000 điểm ảnh (pixel — đơn vị đo độ rộng ảnh) — rồi up thẳng lên một vị trí trên web mà chỗ đó thực ra chỉ hiển thị rộng chừng 800 điểm ảnh. Phần dư thừa kia chẳng giúp ảnh đẹp hơn chút nào, mà chỉ khiến file nặng gấp mấy lần vô ích.

Hãy hình dung thế này. Bạn cần treo một tấm ảnh khổ A4 lên tường, nhưng lại đi rửa một tấm ảnh khổ tấm bảng quảng cáo ngoài đường rồi gấp lại nhét vào khung A4. Tốn giấy, tốn mực, mà nhìn vẫn chỉ bằng cái khung A4 đó. Up ảnh quá khổ lên web y hệt vậy — máy phải tải cả tấm khổng lồ rồi thu nhỏ lại để hiển thị, phí công vô ích.

Nguyên tắc đơn giản: ảnh nên có bề ngang xấp xỉ chỗ nó sẽ hiển thị, cùng lắm gấp đôi để vẫn nét trên màn hình độ phân giải cao. Cụ thể dễ nhớ thì ảnh sản phẩm hay ảnh trong bài viết để rộng khoảng 800 đến 1200 điểm ảnh là vừa đẹp; ảnh nền lớn trải ngang đầu trang thì khoảng 1600 đến 1920 điểm ảnh là đủ; ảnh nhỏ như logo hay biểu tượng thì chỉ vài trăm điểm ảnh. Bạn chỉnh kích thước này ngay trong công cụ nén ảnh, trước khi up lên.

Làm đúng khâu kích thước, kết hợp với nén và WebP, là bạn đã giải quyết gần trọn phần dung lượng ảnh. Ba việc này đi cùng nhau, mỗi việc bồi thêm một chút, cộng lại thành khác biệt rất lớn cho tốc độ web.

Đặt tên file và alt: để Google hiểu ảnh của bạn

Tới đây là phần ít người làm nhất nhưng lại mở ra cơ hội kéo khách miễn phí. Google không có mắt để nhìn một tấm ảnh như con người. Nó đoán nội dung ảnh chủ yếu qua hai thứ: tên file ảnh và phần mô tả ảnh gọi là alt. Bạn cung cấp hai thứ này rõ ràng thì Google mới hiểu ảnh chụp gì, từ đó mới đem ảnh bạn ra trả cho người đang tìm.

Trước hết là tên file ảnh. Phần lớn ảnh từ điện thoại có tên kiểu IMG_2024.jpg hay DSC00123.jpg — vô nghĩa hoàn toàn với Google. Trước khi up lên, bạn nên đổi tên file thành chữ không dấu, mô tả đúng ảnh chụp gì, các chữ nối nhau bằng dấu gạch ngang. Ví dụ một tấm chụp bàn ăn gỗ sồi thì đặt là ban-an-go-soi-6-ghe.webp, đẹp hơn nhiều so với IMG_2024.webp. Lưu ý đặt tên không dấu, vì tên file có dấu tiếng Việt dễ lỗi khi đưa lên web.

Thứ hai, quan trọng hơn, là thẻ alt (chữ mô tả thay thế — đoạn chữ ngắn tả nội dung ảnh). Đây là một câu ngắn bạn ghi vào mỗi ảnh khi đưa lên web, nói rõ ảnh đang chụp gì. Alt phục vụ hai mục đích cùng lúc: giúp Google hiểu ảnh để xếp lên Google Images, và giúp người khiếm thị dùng phần mềm đọc màn hình "nghe" được trên web bạn có ảnh gì. Cách viết alt tốt là tả thật, tự nhiên, như đang kể cho người không nhìn thấy: "Bộ bàn ăn gỗ sồi sáu ghế màu nâu sáng đặt trong phòng bếp". Đừng nhồi từ khoá một cách gượng gạo, cứ tả đúng ảnh là chuẩn nhất.

Một mẹo cho web bán hàng: alt của ảnh sản phẩm nên có tên sản phẩm cụ thể, vì rất nhiều người tìm mua đồ bằng cách xem ảnh trên Google trước rồi mới bấm vào web. Mỗi tấm ảnh sản phẩm được đặt tên và mô tả tử tế là một cái móc câu thả ra ngoài Google Images, kéo về những khách mà bạn không phải trả đồng quảng cáo nào.

Tải lười: để ảnh chỉ hiện khi cần

Việc cuối cùng trong bộ tối ưu ảnh là tải lười, tiếng Anh gọi là lazy loading (tải trì hoãn — ảnh chỉ tải khi sắp lọt vào tầm nhìn). Nghe tên có vẻ phức tạp nhưng ý tưởng rất đời thường.

Hãy tưởng tượng một trang dài có hai chục tấm ảnh. Bình thường khi khách vừa mở trang, trình duyệt cố tải hết cả hai chục tấm cùng lúc, kể cả những tấm nằm tít dưới cuối mà khách chưa cuộn tới. Phần lớn công sức đó là phí, vì biết đâu khách xem mấy dòng đầu rồi rời đi, đâu có cuộn xuống dưới. Tải lười sửa đúng chỗ này: trang chỉ tải trước những ảnh đang hiện trên màn hình, còn ảnh phía dưới thì để đó, khi nào khách cuộn gần tới mới tải. Nhờ vậy trang mở ra nhẹ và nhanh hơn hẳn ngay từ giây đầu.

Tin vui là việc này gần như không phải làm thủ công. Các trình duyệt hiện đại và phần lớn nền tảng làm web đã hỗ trợ tải lười sẵn, nhiều khi chỉ cần bật một công tắc. Web bên mình dựng có sẵn tính năng này ngay từ đầu, nên bạn không phải lo. Mình nhắc ở đây để bạn biết mà hỏi đơn vị làm web của mình rằng web có bật tải lười chưa — nếu chưa thì nên bật, vì nó miễn phí mà cải thiện thấy rõ, nhất là với trang nhiều ảnh.

Một lưu ý nhỏ: ảnh nằm ngay phần đầu trang, khu vực khách nhìn thấy đầu tiên, thì không nên để tải lười, mà nên tải ngay để khách thấy liền. Tải lười chỉ dành cho những ảnh nằm bên dưới, chỗ phải cuộn mới thấy. Chuyện này hơi kỹ thuật một chút, nhưng người dựng web tử tế sẽ tự biết phân biệt, bạn không cần bận tâm sâu.

Tối ưu ảnh giúp lên Google Images thế nào

Mình muốn nói rõ thêm phần này vì nhiều người chưa hình dung Google Images mang lại khách thật ra sao. Google Images là mục tìm hình ảnh của Google — khi ai đó gõ tìm một thứ, bên cạnh kết quả chữ thường, họ có thể bấm sang tab hình ảnh để xem trực tiếp các tấm ảnh. Với những ngành mà người mua quyết định bằng mắt — nội thất, thời trang, ẩm thực, làm đẹp, xây dựng — đây là một nguồn khách rất đáng giá mà ít đối thủ chịu chăm chút.

Để ảnh của bạn xuất hiện ở đó, Google cần ba thứ, và bài này đã đi qua đủ cả ba. Một là ảnh phải tải nhanh, tức đã nén, đúng kích thước, định dạng WebP — Google ngại đẩy lên những ảnh nặng làm khách chờ lâu. Hai là Google phải hiểu ảnh chụp gì, tức nhờ tên file và thẻ alt rõ ràng. Ba là ảnh nên nằm trong một trang có nội dung chữ liên quan xung quanh, vì Google đọc cả ngữ cảnh chữ bao quanh để đoán ảnh nói về điều gì.

Điều cuối này quan trọng nên mình nhấn mạnh: ảnh chỉ phát huy khi đi cùng chữ tử tế. Một tấm ảnh đẹp nằm trơ trọi không có nội dung xung quanh thì Google cũng khó hiểu và khó xếp hạng. Đặt ảnh trong một bài viết hay một trang sản phẩm có mô tả đầy đủ, ảnh và chữ bồi cho nhau, cả hai cùng lên. Nếu bạn quan tâm cách viết phần chữ cho chuẩn, có thể đọc thêm bài viết bài chuẩn SEO để ảnh và nội dung cùng hỗ trợ nhau lên top.

Nói cho công bằng, ảnh đẹp và tối ưu tốt không bảo đảm bạn lên đầu Google Images ngay — còn tuỳ ngành cạnh tranh tới đâu, web bạn uy tín thế nào. Nhưng không làm gì cả thì gần như chắc chắn không có cửa. Bỏ ra chút công đặt tên và viết alt cho mỗi ảnh là mở ra một lối kéo khách miễn phí mà phần đông web ngoài kia đang bỏ trống.

Tóm lại và một lời thật lòng

Gom hết lại cho dễ nhớ, tối ưu ảnh website gồm năm việc đi cùng nhau: nén cho nhẹ, đổi sang WebP cho gọn, chỉnh đúng kích thước kẻo phí, đặt tên file và viết alt để Google hiểu, và bật tải lười để ảnh chỉ hiện khi cần. Ba việc đầu lo phần tốc độ, hai việc sau mở thêm cửa lên Google Images. Không việc nào khó, và phần lớn bạn tự làm được bằng công cụ miễn phí, không cần biết code.

Lời thật lòng sau ngần ấy năm: tối ưu ảnh là loại việc "nhỏ mà có võ" — ít người làm, nhưng ai chịu làm thì web nhẹ hẳn, khách ở lại lâu hơn, và có thêm một dòng khách tự tìm tới qua hình ảnh. Nếu bạn đang tự quản web, cứ thử bắt đầu từ việc dễ nhất là nén ảnh, rồi nâng dần lên. Mỗi bước một chút, web bạn sẽ khác đi trông thấy. Bạn cũng có thể xem thêm cách quản trị website để chủ động hơn trong việc chăm web hằng ngày.

Còn nếu bạn ngại đụng vào phần kỹ thuật, hoặc muốn làm web mới mà ảnh được lo tối ưu sẵn ngay từ đầu, cứ ghé xem bảng giá thiết kế web trọn gói bên mình: gói Cơ bản từ 1.990.000đ, gói Pro 3.990.000đ, gói VIP từ 7.990.000đ. Mọi gói đều dựng nền tối ưu sẵn cho tốc độ — ảnh tự chuyển WebP, bật tải lười, đặt sẵn cấu trúc cho Google đọc — kèm tặng tên miền, hosting và chứng chỉ bảo mật SSL năm đầu, bàn giao trong khoảng 3 đến 7 ngày. Bạn xem bên mình làm web ra sao hoặc để lại lời nhắn — gọi hay nhắn Zalo 0777 716 863, email lienhe@thietkewebgiare.dev, mình tư vấn miễn phí và xem giúp đống ảnh web bạn đang vướng ở đâu.