7 Técnicas para usar fotos e imágenes en páginas web bien. Mi favorita, la Nº5

En el post de hoy quiero tocar de nuevo un “clásico” del blogging: cómo usar fotos e imágenes  en una página web bien.

usar imagenes en paginas web

Imagen de Shutterstock - © jakkapan

Puede parecer que sobre este tema ya está todo dicho, pero como verás en este post esto ni mucho menos es así. Es más, es casi seguro que estés desaprovechando notablemente su potencial.

Simplemente hay que echar un vistazo un poco más de cerca a cualquier blog o página web para ver que prácticamente la totalidad de ellos (incluido el nuestro…), o bien, apenas usan imágenes, o bien, no hacen lo que deberían hacer con sus imágenes para aprovechar al 100% su potencial, que es muchísimo como verás en el post.

Así que hoy te hablaré de 7 técnicas claves que todo blogger o autor de cualquier otro tipo de página web debería utilizar con sus imágenes.

Estoy seguro de que disfrutarás especialmente con este post porque verás que son cosas muy “accionables”, con resultados inmediatos y, además, sé de buena tinta que éste es uno de los temas que más interesa a nuestros lectores que tratemos en este blog.

Usar imágenes en tu sitio web le sentará muy bien

Si tienes un blog o una página web, las imágenes son un recurso necesario e imprescindible para conseguir mantener la atención del público y evitar aburrirlos.

Además, usar imágenes mejora sensiblemente la estética del sitio y tiene beneficios colaterales que no son nada obvios, pero muy importantes como, por ejemplo, el hecho de mejorar el posicionamiento de la página si se saben utilizar el potencial que las imágenes tienen para el SEO.

Sin embargo, la mayoría de los autores, o bien por desconocimiento, o bien por descuido (y falta de tiempo) no las usan o, al menos, no las usan adecuadamente.

7 Técnicas imprescindibles que debes aplicar con las fotos e imágenes de tu página web o tu blog

Así que la primera técnica, o primer consejo, en realidad debería ser el consejo de que efectivamente uses fotos e imágenes en tu blog, por los menos 2 o 3 en cada publicación, y que le dediques esos 10-15 minutos que te llevará leer este post para aprender cómo hacerlo bien.

1. Usa la resolución adecuada

Obviamente tiene que haber también algún inconveniente y, efectivamente, los hay. Aparte de que obviamente el uso de buenas imágenes añade algo más de esfuerzo a la creación del contenido, tiene también el inconveniente de que hace tus páginas más pesadas y con ello tu web más lenta. Pero no te preocupes porque esto tiene solución.

Primero, esto se relativiza mucho si usas un buen ancho de banda para tu servidor web (es decir, un buen hosting), cosa que deberías estar haciendo de todos modos. Así el servidor no se resentirá fácilmente con páginas de algo más de tamaño. Por otra parte, las imágenes que subas deberían estar optimizadas para tener el mínimo tamaño posible, sin pérdidas de calidad apreciables.

La optimización más básica y eficaz es adecuar la resolución de la imagen a su uso en una web.

captura-ajustes-medios-wordpress

El “tamaño grande” de WordPress lo hemos ajustado para que coincida con el tamaño máximo de las imágenes de ancho completo. Así evitamos pérdidas de calidad por transformaciones de WordPress para ajustar el tamaño de la imagen.

Por ejemplo: la columna principal de este blog tiene un ancho de 700 pixeles.

¿Qué sentido tiene entonces usar una imagen con un ancho de 3.000 o 4.000 pixeles? Ninguno, ¿verdad?

De hecho, en este blog usamos la norma general de limitar las imágenes de ancho completo a 650 pixeles.

Sin embargo, una imagen en alta resolución, por ejemplo, “a pelo” desde tu móvil, supone un perjuicio brutal en la optimización de tu página, una diferencia que en muchos casos es fácilmente de un factor mayor de 10 pasando, por ejemplo, de una imagen de 1Mbyte (muy excesivo) de peso a 100Kbytes (muy razonable). Incluso he visto webs con imágenes de 5 o 6 Mbytes, una auténtica burrada con la que literalmente matas a tu web.

Como regla general, te recomendaría no subir nunca imágenes con un ancho mayor al ancho en pixeles del área del contenido principal de tu web. Generalmente esto querrá decir, no más de 600-800 pixeles de ancho. Excepcionalmente puede tener sentido subir imágenes en alta resolución si de lo que se trata es precisamente de que el usuario las pueda ver en alta resolución. Pero en un uso normal te recomiendo encarecidamente seguir la anterior pauta.

En el caso concreto de usar WordPress, al subirlas se redimensionan automáticamente y con ello lo “gordo” lo tienes resuelto automáticamente. Ya es un alivio importante del problema, pero aun así el problema es que el redimensionado por defecto de WordPress no es óptimo: no suele conseguir el tamaño mínimo que sería posible con otras herramientas y las imágenes reducidas suelen ser más borrosas de lo que podrías ser de reducirse con otras herramientas.

Por eso motivo, en este blog preferimos tratarlas fuera de WordPress como se describe en el punto 3 para subirlas con los tamaños exactos que se pueden configurar en el menú de “Herramientas/Ajustes”. Esto evita que la imagen sea tratada por WordPress para esas dimensiones.

2. Usa el formato adecuado

Una cosa que observo que prácticamente la totalidad de los bloggers hace mal es no usar el formato de imagen más adecuado según el uso al que se quiera destinar esa imagen.

Hay tres formatos principales que representan prácticamente al 100% de los formatos usados en la web y que son los formatos JPG, PNG y GIF.

Por ejemplo, para una captura de pantalla, el formato JPG no es una buena opción. Se adapta mejor el formato PNG por dar resultados con un mayor equilibro de tamaño/calidad.

En este post te contamos para qué sirve cada formato y cómo usarlos bien:

Los formatos más importantes para fotos e imágenes digitales

3. Optimiza la imagen (colores, nitidez, etc.)

Optimizar una imagen no consiste solamente reducir sus dimensiones, sino también en aplicar algoritmos inteligentes para (p.e. para conseguir una nitidez óptima de las imágenes reducidas), escoger el formato adecuado como he comentado arriba y reducir su paleta de colores.

En este post se explica un poco más en detalle:

Cómo reducir el tamaño de las fotos y optimizar imágenes

Para ello resultan imprescindibles unas buenas herramientas especializadas. Personalmente, mi favorita es FastStone Photo Resizer, aunque también es una muy buena alternativa RIOT (Radical Image Optimization Tool). Además, en el blog del gran @Manz tienes un excelente tutorial de optimización que se basa en esta última herramienta:

La guía definitiva para optimizar imágenes

captura-faststone

FastStone Photo Resizer dispone de un montón de opciones para el redimensionado de las imágenes. Además, permite trabajar por lotes (procesar varias imágenes a la vez).

La herramienta de FastStone hace todo lo que se necesita, optimiza muy bien y, además, permite trabajar por lotes lo que me lleva a un consejo importantísimo: Trabaja siempre por bloques.

Es decir, si creas un post con 4 o 5 imágenes no trabajes en cada una conforme llegas a esa parte del contenido, déjalas para el final y una vez redactado el post, realiza todo el trabajo relacionado con las imágenes de una tacada: la optimización,  su subida al blog, texto de las leyendas, etc. Verás que así ganas bastante tiempo.

En general, y aunque sea un comentario algo “off-topic”, te recomiendo que cuides mucho tus hábitos como blogger para ser lo más productivo posible, para ello te recomiendo esta lectura:

12 Ideas de cómo escribir en un blog y tardar la mitad

Si eres usuario de WordPress, estás de suerte porque para WordPress existe el magnífico plugin WP Smush.it que realiza este proceso automáticamente dentro de WordPress cada vez que subas una imagen.

Los resultados son muy buenos, aunque si quieres hilar muy muy fino (por ejemplo para conseguir una nitidez máxima de una imagen reducida) es mejor hacerlo fuera de WordPress con las herramientas arriba descritas. Quizás lo más razonable sea hacerlo por norma general de manera automática con Smush.it y en casos puntuales “a mano”.

Echa también un vistazo a nuestra lista de plugins recomendados ya que, junto con WP Smush.it, encontrarás también otros plugins muy interesantes para optimizar el uso de imágenes dentro de WordPress como, por ejemplo, el plugin Lazy Load.

Multiplica el Nº de clics en tus contenidos

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
  • Vale para todo: blogs, tiendas online, redes sociales, etc.

Obtén tu eBook aquí

Apúntate a nuestra Zona VIP y descárgate tu eBook ya

Es 100% gratis 🙂

4. Usa las imágenes para estimular al lector

Vista la parte más técnica de cómo usar correctamente las imágenes en un sitio web, hablemos de cómo usarlas para aumentar la afluencia de lectores a tu sitio.

No se puede insistir lo suficiente en el gran potencial que tienen las imágenes para estimular al lector y captar su atención, muy pocos blogs lo aprovechan. En este mismo blog aún tenemos tarea por delante porque ciertamente tampoco es una cosa que se implementa de un día para otro y requiere tener claro cómo hacerlo que es lo que voy a detallar en los siguientes puntos.

Pero lo más importante es que entiendas que un sitio web que no use imágenes o que las use mal no tiene parangón con uno que lo haga bien y, como decía, son pocos los que realmente lo hacen bien. Así que aprovéchate de ello porque este hecho es una oportunidad magnífica para destacar sobre los demás en tu nicho.

5. Multiplica el impacto en las redes sociales

Así que vamos a empezar por unas técnicas que aún muy poco gente utiliza pero, sin embargo, son extraordinariamente eficaces si las sabes implementar bien. Y es que en los últimos años han aparecido una serie de nuevas funcionalidades en las redes sociales que permiten aprovechar mucho mejor el potencial inherente a las imágenes para captar la atención del lector en estos medios.

Enriquece tus contenidos sociales con meta etiquetas

Me refiero, sobre todo, a tres “inventos” que resultan de lo más útiles:

  • Las Twitter Cards: Las Twitter Cards o tarjetas de twitter son un formato enriquecido para los tweets que logra darles un aspecto visual mucho más llamativo y atractivo al embeber en el mismo una vista resumen con título, resumen, autor e imagen, etc. Además, incluyen herramientas de análisis muy interesantes para optimizar el impacto de tus tweets, de modo que puedes probar diferentes formatos y fórmulas para quedarte con lo que mejor te funcione en tu caso.
  • Facebook Open Graph: Open Graph es un protocolo de Facebook que le permite a una aplicación interactuar con la información social de Facebook (personas, relaciones, etc.). Una parte de este protocolo implementa una funcionalidad similar a las Twitter Cards lo que en la práctica significa que puedes controlar el aspecto de tus posts compartidos en Facebook.
  • Botones de ‘Pin it’ de Pinterest integrados: Esta idea es muy simple, pero eficaz. Consiste en integrar el típico botón “Pint it” en las propias imágenes de modo que al mover el cursor del ratón encima de la imagen aparece el botón invitando al usuario a “pinearla” en Pinterest. Tener el botón tan a mano hace que simplemente sea bastante más probable que el lector se anime a utilizarlo. Eso sí, obviamente no es eficaz con todas las imágenes, sino sólo con aquellas que sean de por sí susceptibles de ser compartidas en Pinterest (moda, recetas, infografías, etc.).

Según cuenta en su blog Neil Patel, uno de los expertos en optimizaciones de tráfico y conversiones en sitios web más reconocido del mundo, logró aumentar el tráfico de su página de Facebook en un 174% gracias al uso de las etiquetas de Facebook Open Graph que le permiten determinar con exactitud cómo deben las entradas de su timeline.

captura tweet sin twitter card

Aspecto de un tweet “normal” sin la información enriquecida de Twitter Cards.

Probablemente este éxito no haya que tomárselo como referencia general, pero desde luego es de sentido común que un mayor atractivo visual de un contenido compartido en las redes sociales tiene un impacto notable en los clics recibidos. Y lo mejor del todo es que el esfuerzo en implementar es pequeño porque una vez más existen múltiples opciones gratuitas para implementar esta funcionalidad en tu sitio.

captura tweet con twitter card

El tweet anterior con la información enriquecida de Twitter Cards.

En el caso de un blog WordPress, por ejemplo, dispones de muchos plugins que te facilitan este trabajo, por ejemplo:

  • WordPress SEO: Incluye la funcionalidad necesaria para integrar las etiquetas de las Twitter Cards y Facebook Open Graph.
  • WordPress Social Sharing Optimization: Un plugin especializado en la integración de meta etiquetas, soporta las etiqutas de Google+, LinkedIn, Facebook Open Graph, Pinterest Rich Pin, y Twitter Card.
  • jQuery Pin It Button For Images: Este plugin para Pinterest sobrepone un botón de “Pin it” a las imágenes al pasar con el ratón por encima de ellas.

En el caso de que tu web no esté hecha con WordPress, echa un vistazo a las referencias al final del post en las que encontrarás posts dónde se explica cómo implementar esto “a mano” en cualquier página web.

El truco de las imágenes con texto

captura imagen con texto en Facebook

Los posts compartidos con imágenes con texto y logotipo destacan mucho sobre las demás entradas en las redes sociales. En este caso se ha utilizado Facebook, pero se podría hacer lo mismo en Twitter con imágenes adjuntas.

Uno de los mejores trucos que he visto en los últimos años para llamar la atención y destacar con ello en las redes sociales que funciona especialmente bien en Facebook y que tenemos una ganas locas de implementar en este blog, es el que comenta el gran Gary Vaynerchuk en su libro “Jab, Jab, Jab, Right Hook” y que consiste en tres pasos:

  • Usar imágenes de gran tamaño y de alta calidad al compartir, destacan sobre las demás y atraen la atención del lector.
  • Incrustar en ellas el título del contenido compartido. Aprovecha lo anterior para que el lector vea realmente el título del contenido compartido y aumenta su atractivo (gracias a estética combinada con la imagen).
  • Incrustar  también el logo (si lo tiene) de tu sitio web para hacer un poco de “branding” de tu marca.

Por cierto, te recomiendo muchísimo este libro porque analiza en detalle qué se puede hacer en cada una de ellas para destacar frente a los demás. Es una excelente recopilación de ideas y gente de la reputación de Pat Flynn avala que realmente funcionan con sus propios resultados. No en vano, Gary Vaynerchuck tiene la reputación de ser en este momento una de las personas más competentes a nivel mundial en todo lo relativo al marketing en redes sociales.

Es cierto que lleva algo de trabajo adicional crear este tipo de imágenes, pero con un poco de habilidad y práctica se puede reducir con el tiempo a minutos.

Por otra parte, piensa que de un principio general del blogging y la publicación de contenidos en general en cualquier sitio web es que el trabajo en tu post no acaba con le das al botón de publicar, en realidad es cuando empieza. Si después de echar horas en crear un contenido no haces también un esfuerzo para promocionarlo estás haciendo un pan con unas tortas.

¿Para qué invertir tanto en un trabajo si luego no encuentra los lectores que se merece?

6. Aprovecha las imágenes para el SEO

Mucha gente no es consciente de que no sólo se posiciona el contenido, sino también las imágenes. De hecho, Google considera entre sus 200 factores de posicionamiento también aquellos relacionados con las imágenes.

captura-jab-jab-jab-right-hook

El libro “Jab, Jab, Jab , Right Hook” de Gary Vaynerchuk es una lectura obligatoria si quieres aprender cómo sacarle partido de verdad a las redes sociales para el marketing online.

Por otra parte, si quieres hacer las cosas bien como blogger, deberías adquirir, al menos, los conocimientos básicos para hacer un buen SEO On Page de aquellos contenidos que tengan potencial de posicionamiento para las búsquedas de Google y los demás buscadores.

Pues bien, he aquí un truco de SEO que es secreto a voces:

Posicionar en Google imágenes es mucho más fácil que hacerlo a través con el contenido de texto porque mucho menos gente lo hace, así que aprovecha esto para posicionar indirectamente tus contenidos. Lo bueno de esto es, además, que si ya has hecho un trabajo SEO On Page para tu página, lo puedes “reciclar” también para las imágenes y sacarle así más partido a tu blog.

Una facete de esto que me gusta especialmente es que te permitirá posicionar en búsquedas (nichos) en las que por su nivel de competencia te resulta imposible posicionarte por la vía “convencional” del contenido de texto. Por la vía de imágenes no vas a conseguir un tráfico orgánico espectacular, pero es un plus de tráfico que se agradece.

Para ello, una buena técnica que seguimos también aquí (desde hace poco por no habernos puesto las pilas antes) consiste en escoger una imagen característica del post (típicamente la de cabecera) para posicionarla con las mismas palabras clave que las del post. Para ello debes usar las palabras clave en:

  • El nombre de fichero de la imagen.
  • El atributo “alt” de la imagen, “texto alternativo” en WordPress.
  • El atributo “title” de la imagen “título” en WordPress. Hay algo de debate si este atributo realmente posiciona o no, pero daño no va a causar, no cuesta nada hacerlo y le da un toque adicional de profesionalidad al sitio (hace que al posicionar el ratón encima de la imagen salga ese texto como etiqueta de la imagen).
  • Procura usar las palabras clave (y/o de sinónimos de esas palabras clave) cerca de la imagen, incluida la leyenda.

Por último, te dejo aquí una lectura que te vendrá muy bien para todo esto:

Por qué buscar nichos y palabras clave en Google es vital para tu blog

Qué es el ‘Long Tail SEO’ y cómo aprovecharlo para tu blog

7. Usa fuentes de calidad y respeta los derechos de autor

La última técnica, o mejor dicho, principio en este caso es que cuides mucho la calidad de tus imágenes. Si aplicas las técnicas anteriores con imágenes de baja calidad éstas perderán gran parte de su eficacia o incluso la perderán por completo.

Calidad quiere decir que la imagen sea buena, creativa, capaz de llamar la atención (positivamente), etc. y tenga un buen acabo (se vea nítida, etc.)

Lo mejor que puedes hacer es utilizar un banco de imágenes, nosotros por ejemplo, trabajamos con Shutterstock y Fotolia que han sido para nosotros son los mejores proveedores (sobre todo, Shutterstock) suman más de 100 millones de imágenes de excelente calidad entre las que buscar.

De todos modos, en nuestra página de recursos puedes encontrar también bancos de imágenes gratuitos que en ocasiones también usamos. Aunque lo cierto es que hoy por hoy hay solamente muy pocas imágenes gratuitas que se vean realmente de calidad profesional.

De esto modo evitarás también caer en una violación de derechos de autor que podría tener consecuencias ya que las imágenes no se pueden coger simplemente de Google sin más para usarlas en tu web tal como hace la enorme mayoría de la gente y, además, tirando de recursos gratuitos o de pago como los mencionados no tienes ninguna necesidad de caer en este error.

Por otra parte, usar una herramienta de búsqueda inversa de imágenes como Tiny Eye para trazar el origen de una imagen te permitirá arrojar luz adicional sobre su situación en cuanto a derechos de autor.

Los mejores recursos para blogs & bloggers (sección de imágenes)

¿Existen derechos sobre las imágenes de Internet?

Conclusiones

Si estás “infrautilizando” las imágenes en tu sitio web, deberías reservar un hueco en tu agenda para dedicarte intensivamente a darle una vuelta a este tema porque un buen trabajo puede tener un impacto muy positivo para tu sitio.

Internet sufre una grave infotoxicación, es un sitio lleno de ruido el cual resulta cada vez más difícil de penetrar para hacer llegar tus contenidos al usuario.

Lo que te hace falta para conseguirlo es diferenciarte de la masa. Una manera muy eficaz de hacerlo es a través del uso de imágenes aderezado con un toque de creatividad, algo en lo que te ayudarán mucho las técnicas que te he contado aquí.

Pero recuerda: la condición sine qua non para el éxito de tu sitio sigue siendo la calidad de sus contenidos. Todos los truquitos que te he contado aquí simplemente no te servirán de nada si al final del camino el lector se encuentra con algo que no está a la altura.

Referencias

  1. La guía definitiva para optimizar imágenes
  2. Optimización de imágenes para mejorar la velocidad de carga de una web
  3. 7 Cosas que deberías saber si usas imágenes en tu blog
  4. 4 ideas básicas para posicionar con imágenes tu web o blog
  5. Cómo poner el botón de ‘Pin it’ en tus imágenes (en Blogger)
  6. Los 200 factores que Google tiene en cuenta para posicionar tu página
  7. Qué son las Twitter Cards y Cómo Crearlas para tu Web o Blog
  8. Twitter Cards, pónselo más fácil a tus lectores
  9. Social Media Meta Tags: How to Use Open Graph and Cards
  10. Must-Have Social Meta Tags for Twitter, Google+, Facebook and More (Moz)
  11. Todo lo que debe saber de Open Graph para publicar contenido en Facebook
  12. ¿Existen derechos sobre las imágenes de Internet?

Acerca del autor: Berto López

Soy autor y cofundador de este blog, e Ingeniero en Informática de formación.

He sido tanto empleado como empresario, esto último durante casi una década en la que he trabajando en la implantación de proyectos tecnológicos en sectores con grandes carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

Lo que he vivido en esta experiencia ha sido la inspiración para crear el blog: divulgar las enormes oportunidades que esconde la web 2.0 y el marketing online y que la mayoría de las personas, en especial pequeños profesionales y empresarios, no están aprovechando.

En este blog quiero concienciarles, motivarles y ayudarles a desarrollar su verdadero potencial y descubrir que, además, puedes pasarlo muy bien haciéndolo :)


Comentarios

  1. Gracias, se que la palabra gracias en este momento para ti no tiene la connotacion que le quiero dar, si hubiera otra palabra mas grande para decirte gracias, quizas lo entendieras, GRACIAS, estoy infinitamente agadecida de ti Berto, porque sin conocerme me has enseñado todo lo que siempre he querido saber y he andado por diferentes lugares sin lograr mi objetivo, “aprender” , tu lo haces de forma sencilla y amena… Bendiciones, larga vida llena de salud , amor y dinero
    Ivonne Gonzalez Benavides

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L., cuya finalidad es el envío de información y formación sobre blogging y marketing online, con la legitimación de tu consentimiento otorgado en el formulario.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).

*

 

Accede al training de pro-blogging

Aprenderás paso a paso y desde cero las mejores técnicas, trucos y secretos de los top bloggers

Y todo 100% gratis :)