2010-10-30 352 views
12

Digamos que te dan http://nytimes.com ¿Cómo sacarías la imagen "principal"?¿Cómo se encuentra la imagen "principal" de un sitio web, dada la URL?

La razón por la que estoy preguntando es porque Flipboard puede tomar la imagen principal de un sitio web, simplemente usando la URL.

Puede analizar todas las etiquetas de imagen. ¿Pero entonces, qué?

+2

"Imagen principal" no tiene sentido. ¿Estás hablando de la imagen más grande? ¿Cuál consideraría la imagen "principal" en [StackOverflow.com] (http://stackoverflow.com/)? – meagar

+0

¿te refieres a logo? – Vamsi

+6

No tiene sentido - Flipboard se da como ejemplo. Otros servicios que muestran imágenes "principales" de las URL incluyen Summify, Percolate, Facebook y Twitter. –

Respuesta

3

Realmente no hay nada que se considere la imagen "principal" en una página web, nada en HTML o de otra manera para distinguirlo. Sin mencionar que probablemente tendrías que leer todas las imágenes en CSS (o más bien las imágenes de fondo, etc.). Pero si tuviera que hacer esto, esto es lo que haría:

  1. Primero decidiría un tamaño de imagen adecuado, digamos un mínimo de 400x400. (No quiero elegir ninguna imagen anterior, algo muy pequeño probablemente se escalaría horriblemente)
  2. Me gustaría iterar a través de cada imagen en la página.2.
  3. Para cada imagen que encontré, verificaría el tamaño de it3. Si fuera 400x400 (mi tamaño predefinido) o más grande, usaría esta imagen. Si no fuera así, comprobaría que es la imagen más grande que he encontrado hasta ahora y, de ser así, mantendría su información almacenada a un lado.
  4. Una vez que había llegado a un número predefinido de imágenes He comprobado

    (para el argumento digamos 10, pero sin duda lo que probablemente vaya mucho más alto) que haría uso de la imagen más grande que he encontrado (almacenado a un lado) porque no me gustaría escanear la página indefinidamente en busca de imágenes!

+3

Si solo busca la imagen más grande, es probable que termine con un anuncio grande, como una clasificación (728x90) o un rascacielos (120x600) – kijin

+1

Eso es muy cierto. Así que puedes restringir el tamaño máximo también. – pinkfloydx33

+4

La mayoría de los anuncios se cargan a través de iframes para que no sean parte de la página. Pero si eso es una preocupación, simplemente podría ignorar cualquier tamaño estándar de IAB. – gabrielk

0

Facebook permite al usuario elegir una de varias imágenes que ha considerado una imagen "principal". En cuanto a la determinación automática de una imagen "principal", la juzgaría según la posición de la página, el tamaño, la relación con el texto y (si usted quería ser más sofisticado) su contenido visual.

Por ejemplo, puede usar un programa de detección de rostros simple o ver las averías de color para determinar si la imagen era "interesante" para usted o no.

EDITAR: En el caso de www.nytimes.com, probablemente solo miraría la estructura de la página, porque un gran carrusel de imágenes se encuentra justo debajo de una etiqueta H1.

13

No creo que haya un método estándar. Puede comenzar buscando una etiqueta de imagen Open Graph Protocol. Facebook los utiliza para seleccionar imágenes para las URL publicadas en las actualizaciones de estado y comentarios.

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> 

Si estás dispuesto a utilizar a un tercero, Embedly ofrecen como un servicio de pago.

Embedly proporciona una API potente para convertir las direcciones URL estándar en vídeos incrustados, imágenes y ricos vistas previas de artículos a partir de 218 proveedores principales.

+1

+ para incrustado. Gracias por su sugerencia. –

+0

Más información sobre el marcado de Open Graph https://developers.facebook.com/docs/sharing/webmasters – binaryfunt

10

Hay muchas estrategias para determinar cuál es la imagen "principal" de una URL:

  • muchos sitios web ahora declaran lo que la imagen principal es (por Facebook Open Graph o Twitter Cards)
  • veces , la imagen se puede adivinar desde la URL o haciendo una llamada API (especialmente cierto para sitios web de alojamiento de imágenes como Instagram)
  • la imagen principal también se puede determinar analizando la página web con técnicas de extracción de contenido (Legibilidad). Es posible que desee eliminar el "ruido" para eliminar los píxeles de seguimiento o los anuncios.
  • si fallan todas estas técnicas, puede descargar todas las imágenes y asumir que las imágenes más grandes son las más interesantes.

He creado una biblioteca de JavaScript que utiliza la mayoría de estas técnicas para determinar la imagen "principal" de una URL: ImageResolver.

+0

Gracias Maurice: esto realmente funciona muy bien, solo lo probé muy bien y la única pequeña inexactitud que encontré fue que trajo respalde la segunda imagen en este artículo: http://www.bbc.com/news/uk-35781613. Aparte de eso, coincidía perfectamente con mi propia definición de imagen "principal" – d3wannabe

Cuestiones relacionadas