PRODUCTOS DE APRENDIZAJE:
Identificar
y comprender el uso del imágenes al diseñar
una página Web.
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 o página web,
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.
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 perjuiciobrutal 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:
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:
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:
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 ó página web., texto de las leyendas, etc. Verás que así
ganas bastante tiempo.
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 probableque 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.
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.
El tweet anterior con la
información enriquecida de Twitter Cards.
¿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.
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 textoporque
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:
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.
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
|
jueves, 1 de febrero de 2018
uso de imágenes
Suscribirse a:
Comentarios de la entrada (Atom)
No hay comentarios.:
Publicar un comentario