Cách tốt nhất để chọn hình ảnh từ HTML để sử dụng làm hình thu nhỏ/bản xem trước của trang

Question

Giả sử không có hình ảnh hoặc liên kết img_source nào, có ai có kinh nghiệm thực tế hoặc tư vấn về kỹ thuật tốt hơn ngẫu nhiên hay không để chọn hình ảnh thể hiện tốt nhất một trang web?

Cập nhật: Tất cả các câu trả lời đều tốt, vì vậy hãy bình chọn tất cả và lựa chọn, mặc dù có vẻ như không có cách nào tuyệt vời để thực hiện việc này. Tôi sẽ thử nghiệm với hình ảnh lớn nhất và ảnh chụp màn hình của những gì nó muốn trên một khách hàng có độ phân giải thấp. Cảm ơn tất cả!

PS: Tôi nhận thấy rằng có một vài trang dường như có img_source liên quan đến hình ảnh hoặc liên kết. Nhiều hơn tôi mong đợi

Answer 1

Chụp ảnh màn hình của trang web ở dạng nhỏ nhất có thể, cách hiển thị trên máy tính xách tay hoặc thậm chí là phiên bản trang web dành cho thiết bị di động, không phải ngẫu nhiên.

Hầu hết các nhà thiết kế web tốt sẽ cố gắng đảm bảo người dùng có thể xem những gì các trang là về ngay khi tải và bao gồm các thông tin quan trọng nhất và có liên quan 'ở trên nếp gấp' như họ nói.

Answer 2

Chọn biểu trưng của trang của bạn làm og: hình ảnh. Bằng cách đó, thương hiệu của bạn sẽ được liên kết với tất cả các bài đăng của bạn mà không phải lo lắng về hình ảnh nào xác định rõ nhất từng trang riêng lẻ.

Đối với các trang khác, bạn không thể kiểm soát hình ảnh của chúng.

Bạn có thể điều tra cách hoạt động của sharer.php nhưng ngoài việc không có dấu đầu dòng bạc để chọn hình ảnh cho trang web không có hình ảnh xác định.

Answer 3

Tôi không có kinh nghiệm với công cụ hiển thị Facebook, nhưng một mẹo mà tôi đã sử dụng trước đây là lấy các trang web tôi đã liên kết và sử dụng chúng làm biểu tượng nút liên kết ... thường luôn gắn liền với tên và/hoặc logo của công ty và chúng khá phổ biến trên hầu hết các trang web chuyên nghiệp. Và tên tập tin phổ biến nhất favicon.ico làm cho nó rất dễ dàng để chọn ra khỏi html (hoặc các thuộc tính liên kết nếu họ thay đổi tên tập tin).

Có thể cho bức ảnh đó nếu điều đó có thể được điều chỉnh theo những gì bạn đang cố gắng làm. Nếu bạn thấy rằng không quá tốt, bạn có thể thử thêm "web 2.0" và kiểm tra iPhone/iPad nút hình ảnh png của Apple-touch-icon (có thể chỉ tìm thấy chúng trên các trang web tên lớn)

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 4

I sẽ thường khuyên bạn chỉ cần vuốt trang img. Tuy nhiên, những ngày này, hình nền CSS thường được áp dụng cho h1/header/div/a/v.v. thẻ để hiển thị biểu trưng thay cho văn bản.

Một giải pháp khả thi là để lấy tất cả các yếu tố với 'biểu tượng' trong tên ID/lớp học của họ:

var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]'); 

Nếu đây là/chứa thẻ img, rất có thể là bạn có logo của trang web. Nếu không, nếu đó là div hoặc vùng chứa khác như vậy, bạn sẽ cần phải khai thác các thuộc tính CSS của các phần tử con để xem chúng có hình nền hay không.

Từ đây bạn có thể xây dựng một tập hợp các hình ảnh ứng cử viên, khi kết hợp với một heuristic dựa trên (ví dụ) kích thước hình ảnh, hy vọng sẽ nhổ ra một biểu tượng mỗi lần.

Tôi hy vọng điều này sẽ giúp bạn trên con đường của bạn!

Answer 5

Đi cho logo thường là một cách sai lầm. Nhìn thấy nó từ một người sử dụng quan điểm của trang web của bạn xem tôi thà muốn không có hình ảnh hơn một logo tất cả các thời gian. Điều này giống như trong các liên kết Google+ hoặc Facebook. Chỉ hiển thị hình ảnh khi nó thực sự có ý nghĩa.

Tuy nhiên việc tìm hình ảnh tương ứng có thể không phải lúc nào cũng tầm thường nếu không có og:image hoặc rel="image_source" được cung cấp.

Một bài viết thường có tiêu đề được hiển thị là <h1> hoặc <h2> thẻ. Hình ảnh gần nhất có thể là hình ảnh phù hợp nhất. Tuy nhiên gần nhất cũng có thể là một logo để điều này có thể đi sai.

tôi sẽ làm điều đó rất thực dụng. Tôi sẽ lấy hình ảnh có khả năng nhất đầu tiên và đọc dữ liệu EXIF nhất định, nếu đây là một hình ảnh thực sự có thông tin được cung cấp. Nếu đây chỉ là biểu tượng, miếng đệm hoặc một số loại đồ họa bố cục khác thì nó không có dữ liệu EXIF ​​và do đó không có liên quan. Nếu hình ảnh đầu tiên không phải là khó khăn đúng, tôi sẽ lấy một hình tiếp theo và vân vân.

đầu mối khác có thể là HTML5 <article> thẻ mà thường có các hình ảnh tương ứng với bài lồng nhau.

Tuy nhiên, có một số nhà thiết kế web không sử dụng các tiêu chuẩn và trang web của chúng có thể không có ngôn ngữ độc đáo.