Las imagenes para la web

Las imágenes para la web

Las imágenes de una web son muy importantes a la hora de conseguir una apariencia profesional, atractiva y de calidad. Son un factor determinante en la primera impresión que tendrán las visitas de tu web.

Las imágenes deben ser de calidad, pero hay que buscar el equilibrio calidad-peso, ya que los kb que ocupan las imágenes afectan directamente a la velocidad de carga de la web. Cuanto más ocupen, más lenta irá la web a abrirse, y eso puede marcar la diferencia entre que las visitas a la web se queden o no lleguen ni a entrar a mirar la primera página.

Por otro lado, Google también tiene muy en cuenta la velocidad de carga de las páginas web para posicionarlas en los primeros lugares del buscador. Así que el tratamiento de las imágenes también determina el SEO de tu página.

Y por último, y hablando de SEO, también tienes que pensar en las palabras importantes de tu negocio cuando pongas nombre a las imágenes. Ya que también por este canal pueden llegar visitas a tu web.

En este post te cuento como debes tratar las imágenes de tu web teniendo en cuenta estos factores: la calidad, la velocidad de carga y el SEO.

La calidad de las imágenes a utilizar

Puedes utilizar fotos propias o de un banco de imágenes.

Imágenes Propias 

Aunque no utilices imágenes propias en toda tu web, es importante utilizar imágenes propias cuando hables de ti, de tu equipo y de tu producto.

Estas imágenes deben ser de calidad, estén o no hechas por un fotógrafo profesional, ya que explican a tu visitante quien eres y como eres, y te ayudarán a transmitir confianza y credibilidad.

Nunca utilices fotografías de un banco de imágenes para ilustrar tu «Sobre mí» o «Sobre nosotros» si pones fotos de tu equipo, deben ser de tu equipo. Si pones fotos de tu local, deben ser de tu local.

Bancos de Imágenes

Si tienes un blog, necesitarás muchas imágenes para ilustrarlo, y no siempre podrán ser hechas exclusivamente para tu web. En este caso, una buena solución es recurrir a fotografías de bancos de imágenes.

Cuando utilices fotografías que no son tus debes asegurarte de sus condiciones de uso. Esto depende del tipo de licencia Crative Commons que tengan.

Los diferentes tipos de licencias de CC – Creative Commons son:

CC0 Imágenes sin ningún tipo de restricción. Puedes: utilizarlas para fines comerciales, modificarlas.

CC BY Puedes utilizarlas para uso comercial y modificarlas pero tienes que mencionar y enlazar al autor.

CC BY-SA Como el anterior, pero si las quieres redistribuir lo tienes que hacer bajo el mismo tipo de licencia CC.

CC BY-ND Se ha de mencionar al autor, se pueden utilizar para uso comercial pero no se pueden modificar.

CC BY: NC Se debe mencionar el autor y se pueden modificar, pero NO se puede hacer uso comercial.

CC BY-NC-SA Como el anterior, pero si las quieres redistribuir lo tienes que hacer bajo el mismo tipo de licencia CC.

CC BY-NC-ND Se ha de mencionar al autor. No se puede hacer uso comercial ni modificar.

A continuación te dejo los enlaces a bancos de imágenes donde puedes descargar fotografías.

Bancos de imágenes Gratuitos

Bancos de imágenes de Pago

Recuerda siempre de leer las condiciones de uso de las imágenes y de la plataforma donde las descargues antes de utilizarlas.

Optimización de las imágenes

Para lograr una buena velocidad de carga de la web, es muy importante optimizar el peso de las imágenes, ya que las imágenes con un peso muy elevado ralentizan el tiempo de apertura de la web.

Una web lenta es perjudicial por dos motivos. Por un lado, los usuarios se van antes de entrar si una web tarda más de 3-4 segundos en cargarse. Por otra parte, Google penaliza la velocidad de carga lenta a la hora de posicionar las webs en los resultados del buscador.

Tienes que saber que:

  • La resolución de una pantalla de ordenador es de 72 píxeles por pulgada. Cuando hacemos una fotografía tiene una resolución de 300 píxeles por pulgada porque está pensada para imprimirse y esto repercute en el peso de la imagen. Por lo tanto deberás reducir la resolución de todas las fotografías a 72 ppp antes de ponerlas en la web para conseguir un resultado óptimo.
  • La tamaño de una pantalla de ordenador normal, tiene 1400 píxeles de ancho. Sólo tienes que adaptar el tamaño de tus imágenes a esta anchura cuando te interese que ocupen toda la pantalla, por ejemplo en la imagen de portada de la web. Pero el resto de imágenes, normalmente, serán más pequeñas y deberás adaptar el tamaño en cada caso, pero una anchura de 800 píxeles es un buen tamaño
  • Si la imagen es de 1400 píxeles no debería pesar más de 100 KB. El peso del resto de imágenes deberá ser de 50-60 Kb.

Herramientas para optimización de las imágenes.

Photoshop – Con Photoshop puedes optimizar el tamaño y la resolución de las imágenes en el mismo momento.

Web Resizer –Herramienta online y gratuita que te permite modificar el tamaño de las imágenes.

Tinyjpg – Herramienta online y gratuita para comprimir las imágenes.

El nombre de la imagen y el SEO

El nombre que se ponga a la imagen también es importante al momento de posicionar la web en los buscadores.

Google indexa las imágenes y a través de ellas también llegan visitas a la web. Por eso hay que pensar bien el nombre que tenga el archivo y rehuir de dejar el típico IMG_0680.jpg o Foto1.jpg, ya que este tipo de nombre no dicen nada de tu negocio.

Utiliza las Palabras Clave para tu negocio al poner nombre a tus imágenes.

También es importante rellenar todos los campos que definen la imagen al subirlas a la web, ya que Google tiene en cuenta toda esta información a la hora de valorar la importancia del sitio web.

Los campos a definir de cada imagen a WordPress son los siguientes:

Nombre

Este es el nombre de la imagen con extensión nombre-foto.jpg. A ser un nombre que defina la imagen y si se debe considerar el uso de palabras clave que interesen para tu negocio. Hay visitas que llegarán a tu web desde una fotografía.

Leyenda

Se el texto que se mostrará en el pie de la foto en tu web. En la leyenda puedes hacer una descripción un poco más detallada del nombre de la imagen.

Texto ALT o Texto Alternativo

Este campo es el más importante y esencial en buenas prácticas. Este texto es el que los navegadores utilizarán para leer lo que aparece en la imagen en los ordenadores configurados para discapacitados visuales.

También es el texto que aparecerá cuando los navegadores tengan desactivadas las imágenes al navegar.

Este texto a ser conciso y descriptivo y tener en cuenta la palabra clave que te interese.

Descripción

En la descripción tienes la oportunidad de profundizar más en el contenido de la fotografía. Esta descripción no se ve en tu web, pero ayuda a Google a saber de qué trata tu imagen. Utiliza también la palabra clave en esta descripción.

Guía breve de optimización de las imágenes para WordPress

Como resumen o conclusión de este post, cuando prepares las imágenes para tu web piensa en lo siguiente:

  1. Usar imágenes de calidad y con los permisos adecuados
  2. El tamaño de las imágenes: inferior a 1400 píxeles por la principal y a 800 píxeles en el resto
  3. La resolución de las imágenes: 72 píxeles por pulgada
  4. Peso de las imágenes: siempre inferior a 100 Kb, mejor si pesan 60-50 Kb
  5. Pon el nombre de las imágenes pensando en las palabras clave
  6. Rellena todos los campos de texto al poner las imágenes en WordPress

Espero que te haya sido útil y que tengas en cuenta estos consejos cuando prepares las imágenes para tu web.

Y si necesitas saber algo más, pregúntalo en los comentarios o ponte en contacto conmigo.

Imágen destacada de Adil Ansari on Unsplash

Share on facebook
Share on twitter
Share on google
Share on linkedin
Share on pinterest
Share on whatsapp

Recibe las nuevas publicaciones en tu email!

Al introducir tu email aceptas la política de privacidad

Otras entradas al blog

Marta

Marta

Ayudo a emprendedores y profesionales a crear su imagen en internet con el Diseño de su página WEB y a ampliar su visibilidad orientándoles en su Estrategia Digital. Especializada en WordPress.

1 comentario en “Las imágenes para la web”

Deja un comentario