Cách tìm và sửa ảnh bị hỏng trên website

Ảnh không hiển thị có thể làm gián đoạn trải nghiệm đọc, giảm độ tin cậy của trang và khiến nội dung khó hiểu hơn. Cách tìm và sửa ảnh bị hỏng trên website hiệu quả là xác định phạm vi lỗi, kiểm tra yêu cầu tải ảnh, đối chiếu đường dẫn trong mã nguồn rồi xử lý đúng nguyên nhân thay vì chỉ tải lại tệp.

Trang hiện ghi nhận 3 phiên với tỷ lệ tương tác 66,67%. Mẫu này còn nhỏ nên chưa đủ để kết luận về hành vi người dùng, nhưng việc hoàn thiện quy trình chẩn đoán sẽ giúp nội dung đáp ứng tốt hơn nhu cầu xử lý lỗi thực tế.

Ảnh bị hỏng trên website là gì?

Ảnh bị hỏng là trường hợp trình duyệt không thể tải hoặc hiển thị tài nguyên hình ảnh như dự kiến. Biểu hiện thường gặp gồm:

Xuất hiện biểu tượng ảnh lỗi hoặc vùng trống.
Ảnh chỉ hiển thị trên máy quản trị nhưng không hiển thị với người truy cập.
Ảnh tải được trên máy tính nhưng lỗi trên thiết bị di động.
Một kích thước ảnh hiển thị bình thường, kích thước khác trong srcset lại lỗi.
Ảnh nền CSS biến mất dù thẻ <img> vẫn hoạt động.
Ảnh tải chậm rồi trả về lỗi 404, 403 hoặc 5xx.
Trang HTTPS chặn ảnh được gọi qua HTTP.

Cần phân biệt ảnh bị hỏng với ảnh tải chậm, ảnh mờ, sai tỷ lệ hoặc thiếu văn bản thay thế. Đây là các vấn đề liên quan nhưng nguyên nhân và cách xử lý không giống nhau. Sau khi khôi phục khả năng hiển thị, nên tiếp tục kiểm tra kích thước ảnh phù hợp cho landing page để tránh dùng tệp quá lớn hoặc làm ảnh bị kéo giãn.

Quy trình tìm ảnh bị hỏng trên website

Ảnh minh hoạ: Cách tìm và sửa ảnh bị hỏng trên website

1. Xác định phạm vi lỗi

Trước khi chỉnh sửa, hãy kiểm tra ảnh lỗi xuất hiện ở đâu:

Chỉ trên một URL hay trên nhiều trang?
Chỉ một ảnh hay tất cả ảnh trong cùng thư mục?
Có tập trung ở một mẫu trang, bài viết, danh mục hoặc landing page không?
Người dùng chưa đăng nhập có gặp lỗi không?
Lỗi xảy ra trên mọi trình duyệt hay chỉ một thiết bị?
Ảnh gốc lỗi hay chỉ biến thể thu nhỏ do CMS tạo ra bị lỗi?

Nếu cùng một ảnh hỏng trên nhiều trang, nguyên nhân thường nằm ở URL tài nguyên, máy chủ ảnh, CDN hoặc quyền truy cập. Nếu nhiều ảnh chỉ lỗi trên một trang, nên kiểm tra HTML, trình tạo trang, thuộc tính tải chậm và cấu trúc đường dẫn của trang đó.

Có thể dùng quy trình kiểm tra và sửa ảnh lỗi như một danh sách đối chiếu khi rà soát từng nhóm trang.

2. Mở trực tiếp URL của ảnh

Nhấp chuột phải vào vùng ảnh, chọn mở ảnh trong tab mới hoặc sao chép địa chỉ ảnh. Nếu không lấy được URL theo cách này, mở công cụ dành cho nhà phát triển của trình duyệt và kiểm tra thuộc tính src, srcset hoặc CSS background-image.

Kết quả khi mở trực tiếp URL giúp thu hẹp nguyên nhân:

URL trả về 404: tệp không tồn tại hoặc đường dẫn sai.
URL trả về 403: máy chủ, CDN hoặc cơ chế chống liên kết nóng đang từ chối truy cập.
URL trả về 5xx: máy chủ hoặc dịch vụ xử lý ảnh gặp sự cố.
URL chuyển hướng nhiều lần: cấu hình tên miền, CDN hoặc quy tắc chuyển hướng cần được kiểm tra.
URL tải về một tệp nhưng trình duyệt không hiển thị: định dạng, dữ liệu tệp hoặc kiểu nội dung có thể không hợp lệ.
URL ảnh hoạt động nhưng ảnh vẫn không xuất hiện trong trang: lỗi có thể nằm ở HTML, CSS, JavaScript, tải chậm hoặc chính sách bảo mật.

3. Kiểm tra cả ảnh mặc định và ảnh đáp ứng

Một thẻ ảnh hiện đại có thể chứa nhiều nguồn:

<img
  src="/uploads/banner.jpg"
  srcset="/uploads/banner-768.jpg 768w, /uploads/banner-1440.jpg 1440w"
  alt="Mô tả nội dung ảnh"
>

Trình duyệt không nhất thiết tải URL trong src; nó có thể chọn một tệp trong srcset dựa trên kích thước màn hình và mật độ điểm ảnh. Vì vậy, ảnh có thể hiển thị trên máy tính này nhưng hỏng trên điện thoại hoặc màn hình khác.

Với phần tử <picture>, cần kiểm tra từng thẻ <source>, điều kiện media, thuộc tính type và ảnh dự phòng trong <img>. Với ảnh nền, kiểm tra URL trong tệp CSS, mã CSS nội tuyến và các quy tắc thay đổi theo breakpoint.

4. Kiểm tra cơ chế tải chậm

Một số website lưu URL thật trong các thuộc tính như data-src hoặc data-srcset, sau đó dùng JavaScript để gán URL vào thẻ ảnh. Nếu tập lệnh không chạy, ảnh có thể không được tải.

Hãy kiểm tra:

Thuộc tính src có chứa ảnh thật hay chỉ là ảnh giữ chỗ.
Console có báo lỗi JavaScript trước khi ảnh được khởi tạo không.
Ảnh có tải khi tắt tạm cơ chế lazy loading không.
Phần tử có bị giữ trạng thái ẩn bởi class hoặc CSS không.
Thuộc tính loading="lazy" có được áp dụng hợp lý hay không.

Không nên kết luận rằng lazy loading là nguyên nhân chỉ vì ảnh nằm ngoài màn hình. Cần xem tab Network để xác nhận trình duyệt có gửi yêu cầu tải ảnh hay chưa.

Cách chẩn đoán nguyên nhân bằng trình duyệt

Kiểm tra trong tab Network

Mở công cụ dành cho nhà phát triển, chọn Network, lọc theo Img rồi tải lại trang. Các trường quan trọng gồm:

Status: mã phản hồi HTTP như 200, 301, 404, 403 hoặc 500.
Request URL: URL thực tế mà trình duyệt yêu cầu.
Initiator: HTML, CSS hoặc JavaScript đã gọi ảnh.
Content-Type: kiểu nội dung máy chủ trả về, chẳng hạn image/jpeg, image/png hoặc image/webp.
Transferred/Size: cho biết tệp có thực sự được tải hay được lấy từ bộ nhớ đệm.
Timing: giúp nhận biết yêu cầu bị chậm, chờ máy chủ lâu hoặc không hoàn tất.

Nếu phản hồi có trạng thái 200 nhưng nội dung thực tế là trang HTML báo lỗi, ảnh vẫn không hiển thị đúng. Trường hợp này thường xuất hiện khi máy chủ chuyển mọi URL không tồn tại về một trang thông báo nhưng vẫn trả mã 200.

Kiểm tra trong Console

Console có thể hiển thị các cảnh báo về:

Nội dung không an toàn trên trang HTTPS.
Chính sách bảo mật nội dung chặn nguồn ảnh.
JavaScript tải chậm gặp lỗi.
URL không hợp lệ hoặc không thể giải mã.
Tài nguyên bị tiện ích trình duyệt hay chính sách mạng chặn.

Nếu trang HTTPS gọi ảnh qua HTTP, hãy xử lý theo hướng dẫn về kiểm tra và khắc phục mixed content. Không nên chỉ ẩn cảnh báo vì trình duyệt vẫn có thể chặn tài nguyên.

Kiểm tra mã nguồn và DOM sau khi tải

“View Source” cho biết HTML máy chủ gửi ban đầu, còn tab Elements hiển thị DOM sau khi JavaScript đã xử lý. So sánh hai nơi này giúp phát hiện trường hợp:

Trình tạo trang xuất sai đường dẫn.
JavaScript thay đổi src thành URL không tồn tại.
Plugin tối ưu ảnh thêm hậu tố kích thước nhưng chưa tạo tệp tương ứng.
Tên miền CDN được thay thế không đầy đủ.
Thẻ <base> làm thay đổi cách trình duyệt diễn giải đường dẫn tương đối.

Cách sửa ảnh bị hỏng theo từng nguyên nhân

Đường dẫn ảnh sai hoặc tệp đã bị di chuyển

Đối chiếu URL trong HTML với vị trí thực tế của tệp. Kiểm tra kỹ:

Tên tệp và phần mở rộng.
Chữ hoa, chữ thường trên máy chủ có phân biệt ký tự.
Dấu cách, ký tự tiếng Việt và ký tự được mã hóa trong URL.
Đường dẫn tương đối sau khi chuyển trang sang thư mục khác.
Tên miền hoặc tên miền phụ chứa ảnh.

Nếu ảnh đã được chuyển sang URL mới, lựa chọn ưu tiên là cập nhật URL trong nội dung và mẫu trang. Khi URL cũ đã được sử dụng rộng rãi, có thể cấu hình chuyển hướng phù hợp từ tệp cũ sang tệp mới tương ứng. Không nên chuyển mọi ảnh lỗi về trang chủ hoặc một ảnh không liên quan.

Tệp ảnh không tồn tại

Khôi phục đúng tệp từ bản sao lưu hoặc tải lại ảnh vào vị trí mà nội dung đang tham chiếu. Nếu CMS tạo nhiều kích thước ảnh, có thể cần tạo lại các biến thể để khớp với srcset.

Trước khi tải lại, cần xác nhận tệp có quyền sử dụng hợp lệ và thực sự thuộc nội dung của trang. Không thay ảnh lỗi bằng một hình ngẫu nhiên chỉ để xóa trạng thái 404.

Máy chủ trả về 403

Lỗi 403 thường liên quan đến quyền tệp, quyền thư mục, quy tắc máy chủ, CDN, tường lửa hoặc cơ chế chống hotlink. Cần kiểm tra cấu hình thay vì đặt quyền truy cập quá rộng.

Nếu ảnh hiển thị khi quản trị viên đăng nhập nhưng lỗi ở cửa sổ ẩn danh, hãy xem lại yêu cầu xác thực, cookie và quyền truy cập công khai. Hình ảnh phục vụ nội dung công khai không nên phụ thuộc vào phiên đăng nhập của quản trị viên.

Ảnh bị chặn do HTTP trên trang HTTPS

Cập nhật URL ảnh sang HTTPS nếu máy chủ ảnh hỗ trợ kết nối an toàn. Đồng thời kiểm tra chứng chỉ của tên miền chứa ảnh và các URL được tạo từ CMS, CSS, JavaScript hoặc cơ sở dữ liệu.

Không nên thay chuỗi hàng loạt trong cơ sở dữ liệu khi chưa sao lưu và chưa hiểu dữ liệu tuần tự hóa. Việc thay sai có thể làm hỏng cấu hình hoặc nội dung khác.

CDN hoặc bộ nhớ đệm lưu phiên bản cũ

Sau khi thay ảnh, CDN và bộ nhớ đệm có thể tiếp tục phục vụ phản hồi 404 hoặc tệp cũ. Hãy:

Xác nhận ảnh hoạt động trực tiếp trên máy chủ gốc.
Xóa bộ nhớ đệm đúng URL hoặc nhóm tài nguyên liên quan.
Kiểm tra lại bằng cửa sổ ẩn danh.
Quan sát phản hồi để biết nội dung đến từ CDN hay máy chủ gốc.
Tránh xóa toàn bộ bộ nhớ đệm nếu chỉ một tệp gặp lỗi và hệ thống hỗ trợ xóa theo URL.

Nếu dùng URL có phiên bản, hãy bảo đảm HTML, CSS và CDN cùng tham chiếu tới phiên bản hiện hành.

Tệp hỏng, sai định dạng hoặc sai Content-Type

Một tệp mang đuôi .jpg không có nghĩa dữ liệu bên trong chắc chắn là JPEG. Hãy mở tệp bằng phần mềm xử lý ảnh đáng tin cậy, xuất lại đúng định dạng rồi tải lên.

Máy chủ cũng cần trả về kiểu nội dung phù hợp. Nếu URL ảnh trả về HTML, JSON hoặc tệp rỗng, cần sửa ứng dụng hay cấu hình máy chủ thay vì chỉ đổi phần mở rộng.

CSS làm ảnh không nhìn thấy

Ảnh có thể tải thành công nhưng bị ẩn bởi giao diện. Kiểm tra các thuộc tính như:

display: none
visibility: hidden
opacity: 0
Chiều rộng hoặc chiều cao bằng 0
overflow: hidden
Lớp phủ có z-index cao hơn
Màu nền hoặc hiệu ứng khiến ảnh bị che
Quy tắc responsive áp dụng sai breakpoint

Trong trường hợp này, mã HTTP 200 không đồng nghĩa với việc người dùng nhìn thấy ảnh.

Thiếu văn bản thay thế

Thuộc tính alt không sửa được URL ảnh hỏng, nhưng cung cấp ngữ cảnh cho người dùng trình đọc màn hình và có thể hiển thị thay thế trong một số tình huống. Sau khi sửa khả năng tải ảnh, nên tiếp tục tìm và bổ sung văn bản thay thế còn thiếu dựa trên chức năng thực tế của từng ảnh.

Ảnh trang trí thường nên có alt=""; ảnh mang thông tin cần mô tả ngắn gọn, đúng nội dung. Không nhồi từ khóa vào thuộc tính này.

Kiểm tra toàn website để tránh bỏ sót

Sửa một ảnh nhìn thấy trên trang chưa chắc đã giải quyết toàn bộ vấn đề. Website có thể còn URL ảnh lỗi trong bài cũ, mẫu trang, CSS, menu, dữ liệu có cấu trúc hoặc phiên bản di động.

Quy trình rà soát toàn site nên bao gồm:

Thu thập các URL nội bộ có thể truy cập.
Trích xuất tài nguyên từ src, srcset, <source> và CSS.
Gửi yêu cầu tới từng URL ảnh.
Phân nhóm theo mã phản hồi và mẫu đường dẫn.
Ưu tiên ảnh xuất hiện trên trang quan trọng hoặc dùng chung trên nhiều URL.
Sửa ở nguồn tạo lỗi, chẳng hạn mẫu giao diện hoặc cấu hình CDN, thay vì chỉnh từng trang nếu cùng một nguyên nhân.

Không phải mọi URL trả về lỗi đều là ảnh đang được người dùng nhìn thấy. Cần kiểm tra trang nguồn và phần tử gọi ảnh trước khi xóa hoặc chuyển hướng. Nếu quá trình rà soát phát hiện cả URL điều hướng bị lỗi, có thể áp dụng riêng quy trình tìm và sửa liên kết hỏng trên website.

Xác minh sau khi sửa ảnh

Sau khi xử lý, hãy kiểm tra lại theo thứ tự sau:

Mở trực tiếp URL ảnh và xác nhận phản hồi thành công.
Tải lại trang sau khi tắt bộ nhớ đệm trong công cụ trình duyệt.
Kiểm tra bằng cửa sổ ẩn danh để loại trừ phiên đăng nhập.
Thử trên màn hình máy tính và thiết bị di động.
Kiểm tra các nguồn trong srcset và <picture>.
Xác nhận Console không còn cảnh báo liên quan.
Kiểm tra trang qua HTTP và HTTPS nếu website vẫn có chuyển hướng giao thức.
Rà soát các trang dùng chung cùng ảnh hoặc cùng mẫu giao diện.
Xác nhận ảnh không bị méo, cắt sai nội dung hoặc tải tệp lớn không cần thiết.

Nếu đã thay URL ảnh, cần kiểm tra cả liên kết cũ. URL cũ nên trả về trạng thái phù hợp hoặc chuyển hướng đến đúng tài nguyên tương ứng; không nên tồn tại phản hồi gây hiểu nhầm.

Cách hạn chế lỗi ảnh tái diễn

Dùng quy tắc đặt tên tệp nhất quán, tránh đổi tên tùy tiện sau khi xuất bản.
Không xóa ảnh khỏi thư viện khi chưa kiểm tra nơi đang sử dụng.
Sao lưu tệp và cơ sở dữ liệu trước khi chuyển máy chủ hoặc thay tên miền.
Kiểm thử srcset, ảnh WebP hoặc định dạng thay thế trên nhiều kích thước màn hình.
Kiểm tra URL ảnh sau mỗi lần thay cấu hình CDN, HTTPS hoặc thư mục tải lên.
Theo dõi phản hồi 404 của tài nguyên tĩnh để phát hiện lỗi mới.
Kiểm tra trang quan trọng sau khi cập nhật giao diện, plugin hoặc cơ chế tối ưu ảnh.
Giữ ảnh gốc để có thể tạo lại các kích thước mà CMS cần.
Không chặn thư mục ảnh công khai bằng quy tắc truy cập ngoài ý muốn.

Câu hỏi thường gặp

Ảnh mở trực tiếp được nhưng không hiển thị trên trang, vì sao?

Nguyên nhân có thể là CSS đang ẩn ảnh, JavaScript tải chậm không hoạt động, trang dùng một URL khác trong srcset, chính sách bảo mật chặn tài nguyên hoặc ảnh bị lớp giao diện khác che phủ. Hãy kiểm tra Network, Console và DOM sau khi trang tải xong.

Lỗi 404 của ảnh có nên chuyển hướng về trang chủ không?

Không. Trang chủ không phải tài nguyên thay thế tương đương cho một tệp ảnh. Nếu có ảnh mới cùng nội dung, có thể chuyển URL cũ đến ảnh đó. Nếu không còn tài nguyên phù hợp, hãy cập nhật trang đang gọi ảnh và xử lý URL cũ bằng trạng thái phản hồi đúng với thực tế.

Đổi đuôi tệp có sửa được ảnh hỏng không?

Không nhất thiết. Đổi .png thành .jpg không chuyển đổi dữ liệu bên trong tệp. Cần mở và xuất lại ảnh bằng đúng định dạng, đồng thời bảo đảm máy chủ trả về Content-Type tương ứng.

Vì sao ảnh chỉ hỏng trên điện thoại?

Trang có thể dùng tệp khác trong srcset, nguồn khác trong <picture>, quy tắc CSS theo breakpoint hoặc cơ chế lazy loading riêng cho thiết bị di động. Kiểm tra URL mà trình duyệt di động thực sự yêu cầu thay vì chỉ xem thuộc tính src.

Ảnh hiển thị bình thường thì có cần kiểm tra SEO nữa không?

Có. Ảnh hiển thị được vẫn có thể quá nặng, sai kích thước, thiếu alt, không phù hợp nội dung hoặc bị hạn chế khả năng thu thập. Tuy nhiên, các vấn đề này nên được xử lý theo mục tiêu riêng, không đánh đồng với lỗi ảnh không tải được.

Cách tìm và sửa ảnh bị hỏng trên website

Ảnh bị hỏng trên website là gì?