Cả hai đều giúp đỡ và làm tổn thương SEO.
Tôi có một trang web mà tôi sử dụng hình ảnh URI dữ liệu. Những hình ảnh đều nhỏ. Hầu hết khách truy cập chỉ xem một trang duy nhất. Tôi đã nội tuyến JavaScript, CSS và hình ảnh của chúng (sử dụng URI dữ liệu). Bây giờ mỗi trang chỉ là một yêu cầu duy nhất cho máy chủ và sự kiện tải trang sẽ kích hoạt trong 400ms kể từ khi yêu cầu được bắt đầu. Trước khi tôi vạch ra mọi thứ, nó đã hơn một giây.
Cải thiện hiệu suất và thời gian tải trang
Ưu điểm lớn nhất là chúng có thể được nhúng trực tiếp vào HTML hoặc CSS. Điều này cắt giảm số lượng yêu cầu cần phải được thực hiện cho máy chủ để hiển thị trang. Giảm số lượng yêu cầu có thể cải thiện đáng kể hiệu suất cho người dùng. Các trang web hiệu suất cao hơn có một lợi thế SEO.
Sử dụng "họa tiết" hoặc nhiều hình ảnh nhỏ được đặt cạnh nhau trong một tệp hình ảnh lớn hơn và sử dụng CSS để chỉ hiển thị phần có liên quan của hình ảnh là một kỹ thuật khác trong cùng một hướng. Bạn cũng nên điều tra xem liệu các sprite có thể thay thế cho data-uri hay không vì chúng không có nhiều nhược điểm.
Kích thước trang tăng dẫn đến tốc độ thu thập dữ liệu thấp hơn
Ban đầu tôi đã cho tất cả các bot hình ảnh URI dữ liệu. Khi tôi làm như vậy, tôi nhận thấy rằng Công cụ quản trị trang web đã báo cáo rằng kích thước trang của tôi tăng lên đáng kể và Googlebot bắt đầu thu thập ít trang hơn trên trang web của tôi vì nó. Sau đó, tôi đã thay đổi thử nghiệm tác nhân người dùng để xử lý tất cả các bot như các phiên bản IE cũ hơn. Bây giờ các bot và các trình duyệt cũ hơn có được các liên kết hình ảnh và các trình duyệt hiện đại có được URI dữ liệu.
Nếu bạn triển khai URI dữ liệu cho hình ảnh của mình, hãy kiểm tra tốc độ thu thập dữ liệu của bạn trong Công cụ quản trị trang web của Google sau đó. Đảm bảo rằng Googlebot vẫn đang thu thập đủ các trang trên trang web của bạn để nó có thể theo kịp các thay đổi bạn thực hiện cho trang web của mình.
Phục vụ nhiều byte hơn
Mã hóa Base64 tăng 25% kích thước của hình ảnh. Mã hóa truyền Gzip giúp một số, nhưng bạn vẫn đang phục vụ nhiều byte hơn là phục vụ hình ảnh trực tiếp.
Khả năng lưu trữ hình ảnh bị hạn chế
Nếu bạn bao gồm các hình ảnh trong HTML, bạn phải phân phát lại chúng như một phần của mỗi trang tiếp theo. Ngược lại, các yêu cầu tệp hình ảnh thường được trình duyệt lưu vào bộ đệm giữa các yêu cầu trang.
Sử dụng hình ảnh URI dữ liệu trong các tệp CSS của bạn có thể tốt về vấn đề này vì toàn bộ tệp CSS có thể được lưu trữ.
Hỗ trợ trình duyệt hạn chế
Hỗ trợ trình duyệt là tốt, nhưng không hoàn hảo. Tất cả các trình duyệt hiện đại đều hỗ trợ URI dữ liệu, nhưng các phiên bản Internet Explorer cũ hơn (7 trở về trước) thì không. Khoảng 1% khách truy cập của tôi sử dụng các trình duyệt IE cũ này lần trước tôi đã kiểm tra.
Như vậy, tôi đưa vào các thử nghiệm tác nhân người dùng để xác định xem các trình duyệt có hỗ trợ URI dữ liệu hay không. Tôi chỉ phục vụ URI dữ liệu cho các trình duyệt hỗ trợ nó.
Không thể được sử dụng cho hình ảnh lớn
Một số trình duyệt có giới hạn về cách URI dữ liệu lớn có thể. Tôi nghĩ rằng nó là khoảng 4k hoặc hơn. Bạn chỉ có thể sử dụng URI dữ liệu với hình ảnh tương đối nhỏ.
Hình ảnh sẽ không xuất hiện trong tìm kiếm hình ảnh
Google sẽ không lập chỉ mục hình ảnh URI dữ liệu cho tìm kiếm hình ảnh. Các hình ảnh nhỏ phù hợp với URI dữ liệu thường không đủ chất lượng để xếp hạng trong tìm kiếm hình ảnh.
Nếu bạn có một hình ảnh được xếp hạng tốt trong tìm kiếm hình ảnh, đừng chuyển đổi nó thành URI dữ liệu.