4 cách xử lý hình ảnh bị thiếu trên trang web (Hướng dẫn cho người mới bắt đầu)

Chưa được phân loại

Nếu bạn có một trang web nơi bạn thường xuyên thêm nội dung, có khả năng theo thời gian, một số hình ảnh trên trang web của bạn sẽ bị thiếu. Bài đăng này sẽ giúp bạn xử lý hình ảnh bị thiếu để tránh ảnh hưởng tiêu cực đến trải nghiệm người dùng trên trang web của bạn.

Tại sao hình ảnh có thể bị thiếu trên trang web của bạn? Có thể có một số lý do cho việc này:

  • Có thể hình ảnh bị xóa khỏi vị trí ban đầu của chúng
  • Theo thời gian, hình ảnh có thể đã được đổi tên hoặc di chuyển đến một vị trí khác
  • Hình ảnh cũng có thể bị hỏng, điều này ngăn chúng hiển thị chính xác trên trình duyệt
  • Họ có thể trải qua những thay đổi trong Quyền: ví dụ: việc xem có thể bị giới hạn ở một số lượng hoặc danh mục người dùng nhất định

Nếu bất kỳ điều nào trong số đó xảy ra, khách truy cập sẽ gặp sự cố bất cứ khi nào họ cố gắng xem nội dung có chứa hình ảnh bị thiếu.

Để giúp giảm thiểu hậu quả tiêu cực của hình ảnh bị hỏng, tôi sẽ chia sẻ 4 cách khác nhau để xử lý tốt hơn những hình ảnh bị thiếu trên trang web của bạn.

Hình ảnh bị thiếu trông như thế nào trong trình duyệt web

Xử lý hình ảnh bị thiếu trên Chrome 70

Ví dụ về hình ảnh bị thiếu trong Chrome (ở bên phải)

Mặc dù mỗi trình duyệt xử lý mọi thứ hơi khác nhau, các trình duyệt thường hiển thị một số loại biểu tượng hình ảnh bị hỏng.

Ngoài việc nhìn chung trông xấu, hình ảnh bị hỏng này cũng có thể làm rối bố cục trang của bạn vì biểu tượng hình ảnh bị hỏng thường nhỏ hơn hình ảnh gốc của bạn.

Nếu hình ảnh bị thiếu là nền của một phần tử, cấu trúc của trang không nên được thay đổi. Tuy nhiên, một hình nền bị thiếu có thể dẫn đến giảm độ tương phản hoặc khả năng hiển thị của văn bản tiền cảnh và các yếu tố khác, do đó dẫn đến sự bất tiện cho khách truy cập và làm tổn thương khả năng truy cập trang web của bạn.

Bốn cách để xử lý tốt hơn những hình ảnh bị thiếu trên trang web của bạn

Mặc dù bạn có thể chưa bao giờ có ý định đưa hình ảnh bị thiếu vào nội dung trang web của mình, nhưng điều đó gần như chắc chắn sẽ xảy ra vào lúc này hay lúc khác do những lý do được liệt kê ở trên.

Để giúp giảm thiểu những hậu quả tiêu cực của việc đó xảy ra, có một vài chiến lược khác nhau mà bạn có thể sử dụng, mà tôi sẽ đề cập dưới đây.

1. Sử dụng alttitle thuộc tính trong <img> thẻ

Một vấn đề lớn với hình ảnh bị thiếu là người đọc không biết hình ảnh bị thiếu được cho là gì để giao tiếp, điều này có thể dẫn đến các vấn đề về hiểu trên trang web của bạn. Một cách khắc phục đơn giản cho việc này là sử dụng các thuộc tính hình ảnh cho văn bản thay thế và tiêu đề.

Văn bản thay thế hình ảnh có hai chức năng chính:

  • Nó sẽ hiển thị nếu hình ảnh bị thiếu (như ví dụ được hiển thị ở trên) hoặc nếu trình duyệt của người dùng được đặt thành không hiển thị hình ảnh.
  • Nếu ai đó khiếm thị và sử dụng trình đọc màn hình, trình đọc màn hình sẽ đọc to văn bản thay thế.

Vì vậy, ngay cả khi khách truy cập không thể nhìn thấy hình ảnh của bạn, họ vẫn có thể biết chính xác ý nghĩa của việc giao tiếp nếu bạn sử dụng văn bản thay thế mô tả.

Ngoài việc thêm văn bản thay thế hình ảnh, bạn nên đặt văn bản có liên quan vào title thuộc tính cũng vậy. Nếu một người di chuột qua một hình ảnh, trình duyệt của họ sẽ hiển thị văn bản trong title thuộc tính trong chú giải công cụ. Trong hầu hết các trường hợp, cả hai thuộc tính này sẽ có cùng một nội dung văn bản.

Để thêm hoặc chỉnh sửa thuộc tính title và văn bản thay thế hình ảnh trên WordPress, bạn có thể sử dụng Chi tiết đính kèm thanh bên trong Thư viện phương tiện WordPress:

Sử dụng màn hình chỉnh sửa hình ảnh để thêm văn bản thay thế hình ảnh

2. Sử dụng onerror thuộc tính trong <img> thẻ

Ngoài việc thêm văn bản, một điều khác mà bạn có thể muốn làm là hiển thị hình ảnh giữ chỗ trong trường hợp hình ảnh bị thiếu. Để làm điều đó, bạn có thể sử dụng giải pháp một dòng mà bạn có thể triển khai trong HTML cho hình ảnh của mình bằng onerror thuộc tính.

<img src="https://themeisle.com/blog/missing-images-on-website/original-image.jpg"
   onerror="this.onerror=null;this.src="default-image.jpg";"
>

Trong trường hợp hình ảnh gốc không thể truy cập được và gây ra lỗi, mã trongonerror thuộc tính thay đổi src của hình ảnh với vị trí của hình ảnh mặc định.

Phương pháp này chỉ hoạt động cho các hình ảnh thông thường trong nội dung của bạn và sẽ không làm việc cho hình nền.

Nếu bạn đang sử dụng WordPress, bạn sẽ cần phải thêm thủ công onerror thuộc tính sử dụng chức năng chỉnh sửa mã của trình chỉnh sửa WordPress:

  • Trình chỉnh sửa cổ điển – sử dụng Nhắn tin Tab.
  • Chặn trình chỉnh sửa (AKA Gutenberg) – sử dụng menu thả xuống ở trên cùng bên phải để truy cập Trình chỉnh sửa mã.

Thêm thuộc tính onerror

Để sử dụng mã này, hãy thay thế default-image.jpg với liên kết đến hình ảnh thực tế mà bạn muốn sử dụng (ví dụ: hình ảnh chỗ dành sẵn mặc định).

3. Sử dụng dịch vụ của bên thứ ba

Vài dịch vụ tối ưu hóa hình ảnh có tùy chọn để phân phát hình ảnh mặc định trong trường hợp hình ảnh bị thiếu.

Chẳng hạn Bộ công cụ ImageKit có một giải pháp đơn giản để phục vụ hình ảnh mặc định trong trường hợp hình ảnh gốc không tồn tại. Điều này hoạt động rất giống như onerror phương pháp thuộc tính từ trên cao.

Với ImageKit, biểu tượng di- tham số cho phép bạn chỉ định một hình ảnh giữ chỗ sẽ được phân phối trong trường hợp hình ảnh gốc không có sẵn.

Tuy nhiên, không giống như onerror , bạn sẽ thêm di- tham số trực tiếp đến hình ảnh src="". Đây là những gì nó trông giống như:

<!-- Specifying the default image to be displayed in the URL -->
<img src="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

Giống như onerror thuộc tính, điều này sẽ không tuy nhiên, làm việc cho hình nền.

Dịch vụ của bên thứ ba cũng có thể giúp bạn ngăn chặn việc thiếu hình ảnh ngay từ đầu bằng cách giúp bạn cung cấp hình ảnh đáng tin cậy hơn. Ví dụ: Optimole WordPress plugin tối ưu hóa hình ảnh phục vụ hình ảnh thông qua hình ảnh của riêng mình mạng phân phối nội dung (CDN), có thể đáng tin cậy hơn máy chủ lưu trữ của bạn.

4. Phục vụ hình ảnh mặc định thông qua máy chủ của bạn cho hình ảnh bị thiếu

Bây giờ chúng ta hãy xem xét một giải pháp có khả năng thay thế bất kỳ hình ảnh nào bằng hình ảnh mặc định bằng cách sử dụng tệp .htaccess của trang web của bạn.

Phương pháp này sẽ chỉ hoạt động nếu bạn lưu trữ và phục vụ hình ảnh từ máy chủ của riêng bạn (nghĩa là, bạn không sử dụng dịch vụ tối ưu hóa hình ảnh của bên thứ ba để phân phối hình ảnh cho bạn).

Phương pháp này nâng cao hơn một chút, vì vậy chúng tôi không khuyên bạn nên làm điều này trừ khi bạn có một số kiến thức kỹ thuật.

Về cơ bản, bạn cần phải:

  • Tạo một .htaccess trên thư mục gốc của máy chủ web của bạn, nếu nó chưa tồn tại.
  • Kiểm tra các yêu cầu hình ảnh, thường kết thúc bằng phần mở rộng tập tin hình ảnh (bạn có thể thêm nhiều tiện ích mở rộng hơn nếu được yêu cầu).
  • Phục vụ hình ảnh mặc định nếu tệp được yêu cầu không tồn tại.

⚠️ Bất cứ khi nào bạn chỉnh sửa tệp htaccess của trang web, bạn phải luôn luôn tạo một bản sao lưu đầu tiên.

Dưới đây là ví dụ về đoạn mã mà bạn sẽ cần thêm vào .htaccess tệp. Thay thế /default-image.jpg với URL thực tế đến hình ảnh chỗ dành sẵn mà bạn muốn sử dụng:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]
RewriteRule .* /default-image.jpg [L]

Nếu bạn không chắc chắn về cách chỉnh sửa .htaccess , bạn có thể làm theo các bước trong hướng dẫn của chúng tôi trên làm thế nào để ngăn chặn liên kết nóng của hình ảnh.

Lời kết

Mặc dù bạn chưa bao giờ đặt ra mục tiêu thiếu hình ảnh trên trang web của mình, nhưng chúng vẫn có thể xảy ra vì nhiều lý do. Bốn cách tiếp cận ở trên có thể giúp đảm bảo khách truy cập trang web của bạn vẫn có kinh nghiệm tốt ngay cả khi họ gặp phải những hình ảnh bị thiếu.

Không có vấn đề gì, bạn phải luôn thêm văn bản thay thế hình ảnh và tiêu đề. Ngoài việc đảm bảo có văn bản dự phòng, điều này cũng làm cho trang web của bạn dễ tiếp cận hơn với khách truy cập khiếm thị, đó là một điều tốt.

Sau đó, bạn cũng có thể cân nhắc sử dụng onerror để chỉ định hình ảnh dự phòng. Một số dịch vụ tối ưu hóa hình ảnh của bên thứ ba – như ImageKit – cũng cho phép bạn chỉ định hình ảnh dự phòng theo cách tương tự.

Hoặc, nếu bạn cảm thấy thoải mái khi chỉnh sửa trang web của mình .htaccess , bạn có thể chỉ định hình ảnh giữ chỗ toàn cầu cho các hình ảnh bị thiếu ở cấp máy chủ. Tuy nhiên, một lần nữa, chúng tôi không khuyên bạn nên sử dụng phương pháp này để hoàn thành người mới bắt đầu.

Ngoài các phương pháp cụ thể này, bạn cũng nên làm theo một số phương pháp hay nhất để giảm thiểu khả năng khách truy cập gặp phải hình ảnh bị thiếu ngay từ đầu. Các phương pháp hay nhất như…

  • Kiểm tra bài đăng của bạn thường xuyên và dọn dẹp hình ảnh không tồn tại.
  • Kiểm tra xem bạn có di chuyển bất kỳ hình ảnh hoặc nhóm hình ảnh nào đến một vị trí khác trên máy chủ của mình hay không.
  • Sử dụng đường dẫn tương đối đến hình ảnh trên máy chủ của bạn.
  • Kiểm tra xem máy chủ web có quyền phù hợp để xem hình ảnh hay không.

Bạn có bất kỳ câu hỏi nào khác về cách khắc phục hình ảnh bị thiếu trên trang web của mình không? Hãy cho chúng tôi biết trong phần bình luận và chúng tôi sẽ cố gắng giúp đỡ!

Hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc độ
Trang web WordPress của bạn

Giảm lo lắng của bạnthời gian quảng cáo thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.