Die beste Möglichkeit, ein Bild aus HTML zu wählen, um es als Thumbnail/Vorschau der Seite

Angenommen, es gibt keine og: image oder link rel img_source, hat jemand irgendwelche praktische Erfahrungen oder Ratschläge für besser als Zufalls-Techniken ein Bild auswählen, das am besten eine Webseite repräsentiert?Die beste Möglichkeit, ein Bild aus HTML zu wählen, um es als Thumbnail/Vorschau der Seite

Update: Alle Antworten sind gut, so upvoted sie alle und ausgewählt, obwohl es scheint, gibt es keine gute Möglichkeit, dies zu tun. Ich werde mit dem größten Bild und Screenshot experimentieren, was es auf einem Low-Res-Client haben möchte. Danke allen!

PS: Ich finde, dass ziemlich viele Seiten haben Og: image oder Link rel img_source sowieso. Mehr als ich erwartet hatte

Quelle

2012-07-10 Harry Mexican

Möchten Sie das Bild ["Google Instant Preview"] (http://www.google.com/landing/instantpreviews/#a) oder ein anderes Bild erstellen? – Kiril

Sofortige Vorschau (d. H. Screenshot) Typ ist OK als Backup, aber ich erstelle ziemlich kleine Miniaturen (etwa 100 Pixel breit), so dass ein Foto besser funktionieren würde. –

Ich würde für das größte Bild auf der Seite gehen, da es wahrscheinlich am wichtigsten/relevant auf der Seite sein wird. Könnte nicht auf jeder Seite wahr sein, sollte aber die meiste Zeit wahr sein. Sie können javascript/jquery verwenden, um die Breite/Höhe jedes Bildes zu erhalten. –

Einen Screenshot der Website in ihrer kleinstmöglichen Form zu erstellen, wie sie auf einem Notebook-Laptop oder sogar einem Handy aussehen würde (aber nicht die mobile Site-Version), wäre ein nicht zufälliger Ansatz.

Die meisten guten Webdesigner werden versuchen, sicherzustellen, dass Benutzer unmittelbar nach dem Laden sehen können, worum es auf der Seite geht, und die wichtigsten und relevantesten Informationen "oberhalb des Falts" enthalten, wie sie sagen.

Quelle

2012-07-18 22:45:12 Dom

Wählen Sie das Logo Ihrer Seite als og: image. Auf diese Weise wird Ihre Marke mit all Ihren Beiträgen verknüpft, ohne dass Sie sich darum kümmern müssen, welches Bild die einzelnen Seiten am besten definiert.

Für andere Seiten können Sie nicht kontrollieren, was Bild, das sie haben.

Sie könnten untersuchen, wie sharer.php funktioniert, aber ansonsten gibt es kein Wunder, wie das Bild für eine Webseite, die kein definierbares Bild hat, zu wählen.

Quelle

2012-07-10 05:31:53 phwd

Ich meinte nicht meine eigenen Seiten, sondern die Seiten anderer Leute. Tut mir leid, wenn das nicht klar war. –

@HarryMexican siehe bearbeiten oben – phwd

Hey pwhd. Der Facebook-Algorithmus scheint ziemlich gut zu sein, aber ich konnte keine Ressourcen finden, die genau beschreiben, wie es funktioniert :( –

Ich habe keine Erfahrung mit Facebook Opengraph, aber ein Trick, den ich zuvor verwendet habe, ist es, Favicons von Websites, die ich verlinkt habe, zu greifen und sie als Link-Button-Symbole zu verwenden ... Sie sind klein und sind in der Regel immer mit dem Firmennamen und/oder Logo verbunden, und sie sind ziemlich universell auf den meisten professionellen Websites. Und der normalerweise universelle Dateiname favicon.ico macht es sehr einfach, den HTML-Code auszuwählen (oder die Linkattribute, wenn sie den Dateinamen ändern).

Könnte das eine Chance geben, wenn das in das, was Sie versuchen, angepasst werden könnte. Wenn Sie das nicht zu gut aussehen, können Sie versuchen, eine mehr "Web 2.0" nehmen und überprüfen Sie für iPhone/iPad-Schaltfläche Apple-Touch-Symbol PNG-Bilder (wahrscheinlich nur finden sie auf großen Namen Websites)

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

Quelle

2012-07-18 08:41:43 WebChemist

I würde normalerweise vorschlagen, dass Sie einfach die Seite von img Tags schaben. Heutzutage werden CSS-Hintergrundbilder jedoch häufig auf h1/header/div/a/etc. Angewendet. Tags zum Anzeigen von Logos anstelle von Text.

Eine mögliche Lösung ist es, alle Elemente mit ‚logo‘ in ihren ID/Klassennamen greifen:

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

Wenn das/enthält einen img Tag, die Chancen sind Sie die Site Logo. Andernfalls, wenn es sich um eine div oder anderen solchen Behälter ist, müssen Sie in die untergeordneten Elemente CSS-Eigenschaften graben, um zu sehen, ob sie ein Hintergrundbild haben.

Daraus können Sie eine Reihe von Kandidatenbildern erstellen, die in Kombination mit einer Heuristik, die beispielsweise auf Bilddimensionen basiert, hoffentlich jedes Mal ein Logo ausspucken.

Ich hoffe das hilft dir auf deinem Weg!

Quelle

2012-07-18 09:50:32

Für das Logo ist in der Regel der falsche Weg. Wenn ich es von einem Nutzer Ihrer Website aus gesehen habe, möchte ich kein Bild mehr als ein Logo haben. Dies ist das gleiche wie in Google+ oder Facebook-Links. Zeige nur Bilder, wenn es wirklich Sinn macht.

Das Finden des entsprechenden Bildes ist jedoch möglicherweise nicht immer trivial, wenn kein og:image oder rel="image_source" zur Verfügung gestellt wird.

Ein Artikel hat normalerweise einen Titel, der als <h1> oder <h2> Tag dargestellt wird. Das nächste Bild kann das richtige sein. Allerdings kann der nächste auch ein Logo sein, damit das schief geht.

Ich würde das sehr pragmatisch tun. Ich würde das wahrscheinlichste Bild zuerst holen und die gegebenen EXIF Daten lesen, wenn das ein wirkliches Bild ist, werden Informationen zur Verfügung gestellt. Wenn dies nur ein Logo, Spacer oder eine andere Art von Layoutgrafik ist, hat es keine EXIF-Daten und ist daher nicht relevant. Wenn das erste Bild nicht das richtige ist, würde ich das nächste holen und so weiter.

Ein weiterer Hinweis ist möglicherweise das HTML5 <article> Tag, das normalerweise das entsprechende Bild zum Post geschachtelt hat.

Dennoch gibt es mehrere Webdesigners nicht mit Standards und ihre Webseite angebotenen schön nicht Gleichnis sein.

Quelle

2012-07-19 13:13:06 fdomig

Die beste Möglichkeit, ein Bild aus HTML zu wählen, um es als Thumbnail/Vorschau der Seite

Antwort

Verwandte Themen