从 HTML 中选择图像以用作页面缩略图/预览的最佳方式答案

【问题标题】：Best way to choose an image from HTML to use as a thumbnail/preview of the page从 HTML 中选择图像以用作页面缩略图/预览的最佳方式
【发布时间】：2012-07-09 11:10:23
【问题描述】：

假设没有 og:image 或 link rel img_source，有没有人有任何关于优于随机技术的实际经验或建议来选择最能代表网页的图像？

更新：所有答案都很好，因此全部投票并选择了一个，尽管似乎没有很好的方法来做到这一点。我将在低分辨率客户端上尝试最大的图片和屏幕截图。谢谢大家！

PS：我发现很多页面似乎都有 og:image 或 link rel img_source。超出我的预期

【问题讨论】：

您想要"Google instant preview"-style 图像还是其他图像？
即时预览（即屏幕截图）类型的东西可以作为备份，但我正在创建相当小的缩略图（大约 100 像素宽），这样照片效果会更好。
我会选择页面上最大的图像，因为它可能是页面上最重要/最相关的。可能并非在每一页都是正确的，但在很多时候都应该是正确的。您可以使用 javascript/jquery 来获取每个图像的宽度/高度。

标签： html web-crawler thumbnails facebook-opengraph

【解决方案1】：

以可能的最小形式截取网站的屏幕截图，看看它在笔记本电脑甚至移动设备（但不是移动网站版本）上的外观，将是一种非随机方法。

大多数优秀的网页设计师都会尝试确保用户能够在加载后立即看到页面内容，并按照他们所说的“首屏”包含最重要和最相关的信息。

【讨论】：

【解决方案2】：

选择您页面的徽标作为 og:image。这样一来，您的品牌就会与您的所有帖子相关联，而不必担心哪个图片最能定义每个单独的页面。

对于其他页面，您无法控制它们拥有什么图像。

您可以调查sharer.php 的工作原理，但除此之外，没有灵丹妙药可以为没有可定义图像的网页选择哪个图像。

【讨论】：

我不是说我自己的页面，而是分析别人的页面。抱歉，如果不清楚。
嘿，密码。 facebook 算法似乎相当不错，但我无法找到任何详细说明其工作原理的资源:(

【解决方案3】：

我对 Facebook opengraph 没有任何经验，但我以前使用过的一个技巧是抓取我链接到的网站的图标并将它们用作链接按钮图标...它们很小，通常始终与公司名称和/或徽标相关联，并且它们在大多数专业网站中都非常普遍。通常通用的文件名 favicon.ico 使得从 html 中挑选出来（或链接属性，如果它们更改文件名）变得非常容易。

如果可以适应您正在尝试做的事情，可能会试一试。如果您发现这看起来不太好，您可以尝试更“web 2.0”并检查 iPhone/iPad 按钮 apple-touch-icon png 图像（虽然可能只能在大牌网站上找到它们）
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

【讨论】：

【解决方案4】：

我会通常建议你简单地抓取img标签的页面。但是，这些天来，CSS背景图像经常应用于h1/header/div/a/等。标记以代替文本显示徽标。

一种可能的解决方案是获取 ID/类名中带有“logo”的所有元素：

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

如果这是/包含img 标签，您很可能拥有该网站的徽标。否则，如果它是 div 或其他类似容器，则需要深入研究子元素的 CSS 属性以查看它们是否具有背景图像。

据此，您可以构建一组候选图像，当结合基于（例如）图像尺寸的启发式算法时，应该希望每次都能吐出一个徽标。

希望这对您有所帮助！

【讨论】：

【解决方案5】：

追求徽标通常是错误的方式。从您网站的用户的角度来看，我一直宁愿没有图像而不是徽标。这与 Google+ 或 Facebook 链接中的相同。仅在确实有意义时才显示图像。

但是，如果没有提供og:image 或rel="image_source"，找到相应的图像可能并不总是那么简单。

一篇文章的标题通常显示为<h1> 或<h2> 标签。最近的图像可能是正确的图像。然而，最近的也可能是一个标志，所以这可能会出错。

我会这样做非常务实。我会首先获取最有可能的图像并读取给定的EXIF 数据，如果这是真实图像，则提供信息。如果这只是一个标志、间隔或其他类型的布局图形，它没有 EXIF 数据，因此不相关。如果第一张照片不合适，我会拿下一张，依此类推。

另一个线索可能是 HTML5 <article> 标签，它通常嵌套了帖子的对应图像。

尽管如此，有几个网页设计师没有使用标准，他们的网页可能不是很好的比喻。

【讨论】：