Inicio Diseño web Consejos para el uso de imágenes en Páginas Web

Consejos para el uso de imágenes en Páginas Web

por o10media
18 minutos de lectura
Uso de imágenes en páginas web

La imagen es un arma poderosa para cualquier tipo de negocio y más en el entorno online. Probablemente, ya lo sepas, aunque sea solo por tu experiencia como usuario.

Cuando entras en una página web que tiene unas imágenes cuidadas y que encajan perfectamente con el estilo del sitio web, el sabor que te deja es muy distinto a otra página web con imágenes de mala calidad, ¡o incluso sin imágenes!

Una página web que use, de forma correcta, las imágenes tiene mucho que ganar. Da un toque de profesionalidad y mejora enormemente la usabilidad. Ya sea en una página de aterrizaje, como en un artículo, las imágenes nos sirven para que el usuario descanse entre tanto texto, ¿no creéis?

Además, ciertos recursos gráficos nos ayudan a hacer comprender mejor lo que queremos comunicar, mejorando la impresión que pueda tener el usuario hacia nosotros. En definitiva, aumenta notablemente el potencial de nuestra página web.

Si estáis pensando en el diseño de vuestra página web o de vuestro blog, dedicadle buena parte del tiempo a las imágenes, ¡el resultado no tiene color!

Desde aquí, os queremos dar una serie de consejos para que tengáis claro cómo las podéis incorporar al diseño web, desde cómo obtener las imágenes a cómo usarlas y sacarles el máximo partido.

¿De dónde obtengo las imágenes para mi Página Web?

Dónde obtener imágenes para páginas webUna de las preguntas del millón. Se trata de algo que siempre nos preguntan muchos de nuestros clientes y, en todos los casos, se encuentra una buena solución.

Vamos a repasar las diferentes fuentes por las que obtener imágenes para nuestra página web, así como sus pros y contras.

De hecho, no pienses solo en una fuente para la obtención de imágenes y fotografías, una combinación puede ser la solución perfecta, dependiendo de la sección de la página que estemos diseñando.

Imágenes Propias

Imágenes propiasProbablemente las que más valor aporten para una página web, por muchas razones. Ya sean fotografías nuestras o imágenes vectoriales creadas por nosotros mismos, la mayor de las virtudes reside en que son nuestras y, por lo tanto, originales.

Si tienes una página web de un negocio y las fotos son de tu equipo trabajando, la apariencia es de una empresa transparente, mucho más cercana con el usuario. Esto genera un alto valor añadido, como es el de generar confianza. Das una imagen de empresa real, lo que te ayudará en buena medida a captar nuevos clientes.

Ahora bien, va a depender del objetivo de lo que se quiera transmitir hacia el usuario, así como la calidad de las imágenes que vayamos a obtener.

Hace unos años, la diferencia de la calidad  de la imagen era uno de los principales problemas para el uso de imágenes propias. Eso sí, hoy en día la mayoría de personas tienen móviles con las que obtener fotografías de buena calidad y existen programas gratuitos para editar fácilmente imágenes, por lo que esta diferencia ya no es tan notoria.

Esta es la forma más fácil de tener imágenes propias y gratuitas. Lo único es que tendrás que dedicar parte de tu tiempo para hacerlo. Otra opción, mucho más cara pero de gran resultado, es la de contratar a un fotógrafo profesional que se desplace a tu negocio para realizar imágenes de alta calidad.

¿Cuándo no es recomendable usar imágenes propias? Pueden existir diferentes motivos por los que sea mejor optar por adquirir imágenes compradas o de otras fuentes, si pensamos en qué es lo que queremos transmitir en nuestra página web. ¡Veámoslo con un ejemplo concreto!

Imaginemos, por un momento, que tenemos una agencia de viajes. Decorado con más o con menos gusto, una oficina de una agencia de viajes se suele caracterizar por sus mesas, ordenadores y multitud de ofertas en el escaparate, como es natural, ¿verdad? Ahora, pensemos en qué es lo que busca el usuario: viajar.

Es obvio, que en la página web, lo que se necesita es mostrar fotografías de destinos atractivas. Por lo tanto, las imágenes tienen que ser de alta calidad, con colores vivos que inviten al usuario a desear viajar. Por suerte para las agencias, los proveedores de los viajes tienen unos bancos de imágenes impresionantes que pueden cederle, pero ya no son imágenes propias.

Como veis, el tipo de negocio puede ser determinante para que sea más conveniente obtener imágenes propias o no.

Bancos de Imágenes de Pago

Bancos de imágenes de pagoSi, por el motivo que sea, no utilizamos imágenes propias, otra de las alternativas es seleccionarlas dentro de diferentes bancos de imágenes de pago, como podría ser Shutterstock.

En este sentido, una de las mayores ventajas que obtienes es un amplio catálogo de fotografías e imágenes profesionales por un precio bastante económico. Imágenes que funcionan a la perfección en las páginas principales de un sitio web, dado sus colores atractivos y de calidad, lo que ayuda en aquellas páginas de destino que tengan un mensaje más comercial.

Normalmente, se contratan por un paquete de imágenes a descargar durante un tiempo estipulado. Por ejemplo, podemos comprar y descargar 150 fotos en un mes y por un precio de 120€. Evidentemente, este es un precio ficticio, ya que puede variar en cuanto a la plataforma elegida.

Este precio va a depender de cuántas imágenes vas a necesitar para tu proyecto. Estas plataformas te permiten pagar con contrato de un año y una tarifa mensual menor que si solo contratamos durante un mes. Es decir, contratar de una forma puntual nos saldrá más caro que si somos asiduos.

Así, si solo necesitamos imágenes para crear una página web, con establecer un único pago puede ser más que suficiente, mientras que si tenemos un blog que actualizamos con mucha frecuencia y que necesita de una gran cantidad de imágenes, el pago mensual y constante puede ser la mejor opción.

En principio, se trata de una elección bastante razonable, a no ser que contemos con un presupuesto muy reducido. ¿Y qué otras desventajas puede tener? Si bien es cierto que las imágenes son de una excelente calidad pueden no mostrar, de forma fidedigna, la imagen de la empresa.

Uno de los problemas es que la mayoría de estas imágenes son tomadas por personas de otros y en otros países, con el choque cultural que ello puede producir.

Seguro que os lo que vamos a contar os suena de algo. ¿Cuántas veces habéis visto páginas web de negocios de ámbito local y con fotografías de personas altas, rubias y de ojos azules en su puesto de trabajo? En definitiva, provenientes de países nórdicos.

Con los bancos de imágenes, aun siendo de pago, si no elegimos bien podemos dar una imagen hermética de la empresa, en el caso de no elegir de forma muy certera, ¡lo que también lleva su tiempo!

Este tipo de páginas de negocios, salvo que sean grandes corporaciones o que se muevan en el ámbito internacional, no generan la misma confianza que otras en las que se utilizan imágenes propias del negocio.

Bancos de Imágenes Gratis

Bancos de imágenes gratisSi no tenemos una buena recopilación de imágenes propias o no contamos con presupuesto para comprar imágenes de uso comercial para nuestro proyecto online, tenemos una opción todavía más económica: los bancos de imágenes de descarga gratuita.

Tenemos en la red, y a nuestra disposición, numerosas páginas web donde poder descargar imágenes de buena calidad y que pueden tratar temas genéricos. Portales como Pixabay o Pexels son algunos de los sitos donde puedes obtener las imágenes para tu página web totalmente gratis.

Si bien es cierto que es la opción más económica, presenta muchas desventajas frente a los bancos de imágenes de pago. Así, es evidente que contienen una cantidad inferior de imágenes a elegir.

Esto significa que, salvo que sea para cuestiones muy genéricas, es bastante probable que no encontremos fotos de lo que mejor encaja con lo que estemos contando en nuestra página web o en nuestro blog.

Si en los bancos de imágenes de pago, puede que haya dificultad para encontrar la imagen que mejor encaje, en este supuesto lo tendremos todavía más complicado.

De igual manera, hay que tener en cuenta que, ante la reducción de opciones, la selección final muestre imágenes muy diferentes entre sí. Así, pueden ser de gran calidad, pero pueden ser de diferente estilo, debido al filtro concreto que utilice cada fotógrafo, por ejemplo.

Esto lleva a mostrar finalmente una página web con un estilo irregular, dando una imagen del negocio no tan profesional como nos gustaría, ¡ni tampoco cercana! En este sentido, este tipo de plataformas nos pueden ser de gran utilidad para nuestro blog, siempre y cuando tratemos temas abstractos y que se puedan asociar de forma genérica.

Como podéis ver, hay diferentes métodos para la obtención de imágenes de nuestro sitio web. Efectivamente, el entorno en el que nos movamos, así como el tipo de servicios que ofrezcamos, serán claves para elegir entre todas estas alternativas.

Técnicas para el correcto uso de imágenes

Técnicas para el uso correcto de imágenes en páginas webVale, ahora que ya nos queda claro cómo de importantes son las imágenes para una página web y de dónde se pueden obtener, os vamos a dar una serie de consejos para su correcta implementación dentro de nuestro sitio y de las ventajas que podemos obtener.

Estilo de imagen y recursos gráficos

Estilos de imagen y recursos gráficosYa hemos comentado, muy por encima, que entre las ventajas y desventajas de la adquisición de las imágenes está en mantener el mismo estilo. A este respecto, y con el objetivo de ser lo más profesionales, hay que ser coherentes.

En este sentido, hay que saber qué tipo de recursos nos pueden convenir en cada parte de la página web. Así, las fotografías pueden tener un componente persuasivo o comercial de gran interés, mientras que si estamos explicando algo, las imágenes vectoriales pueden ser nuestro mejor aliado.

En cuanto a las fotografías, lo mejor es optar por imágenes que tengan similares características, en cuestiones como el brillo de la imagen o su contraste, así como la tonalidad de la misma.

En cuanto a otros recursos, como infografías o imágenes vectoriales, hay que ser rigurosos con el uso de colores, acorde con la identidad corporativa del negocio.

Armonía entre contenido e Imagen

Ta tenemos claro cuáles son las imágenes de las que disponemos, de dónde las vamos a obtener y cuál va ser su estilo, ¡ahora tiene que encajar en el diseño de nuestra página web!

De nada sirve tener unas fotografías espectaculares y de un estilo definido, si no se distribuyen de forma adecuada.

Una maquetación cuidada, con la correcta disposición de cada uno de los recursos con los que contamos y un correcto ajuste con los bloques de texto, hará que pasemos de tener una web normalita a una página web increíble.

Os recordamos que, en o10media, somos expertos en diseño web, por lo que si tú también deseas una web de calidad, ¡consúltanos!

Optimización de las Imágenes

Optimización de imágenes para páginas webUna de las cuestiones más importantes, a tener en cuenta, en todo proyecto web es la velocidad de carga. Un tiempo de carga más lento implica principalmente dos problemas vinculados entre sí.

Por un lado, la experiencia del usuario es mucho peor. A nadie le gusta esperar a que cargue una página web. Cada segundo que pasa sin cargar, aumenta la probabilidad de que el usuario desista y decida irse. La consecuencia directa de esto es un aumento de la tasa de rebote y  un peor posicionamiento orgánico.

En este sentido, las imágenes juegan un papel fundamental en el peso de la página. Si las imágenes no se comprimen de forma adecuada, la página web se ralentiza. Por eso, es necesario adaptar el tamaño a la anchura de nuestra página web, así como una resolución adecuada para página web, ¡veremos ahora por qué!

Conceptos de Calidad de Imagen

Antes de ver cómo optimizar imágenes, vamos a ver los conceptos que hacen que pesen más o menos.

Tamaño en Píxeles

Los píxeles determinan el tamaño de la imagen. Es decir, el ancho y el alto. Para que lo veamos mejor, en tamaño real cada centímetro implica 32 píxeles. Por lo tanto, a más píxeles, el tamaño y peso son mayores, evidentemente.

Pongamos un ejemplo. Tenemos una imagen de 3600 px. de ancho, el tamaño de una fotografía que de una cámara réflex. Pues bien, el ancho de la imagen es de 112,5 cm., ¡un tamaño excesivo  para el ancho de una página web y para cualquier monitor!

Resolución

La otra parte que determina el peso de una imagen es la resolución. En otras palabras, la calidad, la cual viene predispuesta por los píxeles por pulgada.

Sin embargo, conviene recordar que no es igual una imagen para una revista, por ejemplo que para una página web, puesto que la resolución de las propias pantallas del ordenador o móvil no llegan a captar tanta nitidez. De hecho, para páginas web esta resolución suele ser de 72 puntos por pulgada, mientras que para impresión es de 300 ppp.

Con estos dos conceptos, queda claro que la reducción en tamaño y adaptarla al máximo que nos ofrecen las pantallas, así como una resolución más adecuada, el peso de la imagen se reduce drásticamente.

Formatos de Imagen

Hay muchos formatos de imágenes. La cuestión, es elegir el adecuado. Para las páginas web, se destacan hasta tres formatos que se suelen utilizar: .jpg, .png y .gif.

Cada uno de ellos tiene una funcionalidad diferente. El formato .jpg es el más utilizado porque, sin perder demasiada calidad en pantalla, pesa menos. Por otro lado, el .png pesa más, pero tiene la virtud de que tiene la opción de diseñar una imagen con fondo transparente y se adapta a cualquier color, ideal para logos. De modo que si nuestra imagen no va a tener transparencia, no tiene sentido que usemos este formato. Por último, se encuentra el .gif que es una secuencia animada de imágenes y pesa obviamente mucho más.

¿Cómo comprimir imágenes?

Cómo comprimir imágenesQueda claro que la modificación del formato, en caso de que fuera necesario, así como la optimización de la imagen, en cuanto a tamaño y resolución, es fundamental. ¿Cómo hacerlo de forma eficaz?

Herramientas para Comprimir Imágenes

Tenemos a nuestra disposición diferentes herramientas para comprimir imágenes, tanto programas, como plataformas online, para conseguirlo.

Recuerda que es necesario comprimir la imagen antes de subirla. No vale con adaptarla posteriormente, como se puede hacer desde Wordpress, ya que estaremos sobrecargando innecesariamente el servidor.

Adobe Photoshop

Logo PhotoshopPrograma por excelencia para diseñadores gráficos, Adobe Photoshop nos permite una correcta optimización de la imagen. Una vez abierto el documento, puedes definir el tamaño y resolución de la imagen (ir a “Tamaño de Imagen” o utilizar el acceso “Alt + Ctrl + I”), así como especificar la calidad de la imagen y formato,  ya sea con “Guardar para web” o con la combinación “Mayús + Ctrl + Alt + S”, nos aparecerá una ventana donde podremos calibar la calidad del .jpg y su relación de peso en Kilobytes.

Gimp

Logo GimpGimp siempre ha sido una de las alternativas gratuitas a Adobe Photoshop. Para ello, simplemente hay que abrir el apartado de imagen e ir a “Escalar Imagen”, donde se nos abre un menú con los detalles de anchura, altura y resolución.

TinyPng

Logo TinyPngSi quieres hacer un trabajo de optimización de imágenes rápido, sin utilizar programas instalados previamente en tu ordenador, una de las mejores opciones es TinyPng.

Consiste en un conversor online específico para imágenes en formato .png, el formato más utilizado para imágenes con transparencia. Imágenes cuya compresión no es posible directamente en programas como Photoshop, lo que provoca que la imagen tenga un peso excesivo; especialmente si es de grandes dimensiones.

TinyPng es perfecto para comprimir imágenes con transparencia sin pérdida de calidad. Simplemente, tienes que volcar un conjunto de imágenes, ya adaptadas al tamaño deseado, y “el panda” las comprimirá, ¡listas para ser usadas!

FastStone Photo Resizer

Logo FaststoneFastStone Photo Resizer es un programa disponible para Windows donde se muestran dos ventanas. Una con las imágenes que queremos optimizar, desplazándolas a la parte derecha, pudiendo indicar la calidad y el tamaño de la imagen. La virtud está en su fácil manejo y en que puedes enviar grandes bloques de imágenes, ¡incluso carpetas enteras!

Etiquetado de las imágenes

Etiquetado de imágenesLas imágenes no son solo un recurso gráfico para nuestra página web, también nos pueden ayudar a captar tráfico de calidad, a través de los motores de búsqueda, ¿cómo? Por un lado, puede atraer visitas gracias al apartado específico de imágenes, como podría ser Google Images.

Por el otro, puede aportar información extra que apoye al contenido y que fortalezca su posicionamiento en resultados orgánicos. ¿Cómo conseguirlo? Se puede optimizar el propio contenido que el buscador leerá sobre la imagen.

Entre los pasos que hay que seguir para conseguir que el etiquetado de la imagen nos sirva como estimulo para Google y otros buscadores, tenemos los siguientes.

  1. Guardar la imagen con las palabras clave, separadas por guión medio. Será la url que se genere posteriormente.
  2. Completar el etiquetado “Alt”. Es el equivalente al texto que lee el motor de búsqueda, por lo que hay que añadir las palabras clave de interés.
  3. Completar Title. El título de la imagen, el cual podemos ver al desplazar el cursor sobre la imagen, es también información relevante para Google. En este caso, debe de ser una breve descripción adicional.

Como podéis ver, el proceso para conseguir unas imágenes adecuadas para nuestro sitio web puede parecer complejo, desde la obtención de las mismas hasta el momento de subirlas. Si te parece tedioso o necesitas ayuda con tu proyecto online, ¡háznoslo saber!

Ahora bien, siguiendo todos estos pasos, conseguirás una página web mucho más atractiva para el usuario y potencial cliente, además de conseguir mayor visibilidad para Google y otros buscadores de Internet. Merece la pena el esfuerzo, ¿verdad?

 

También te puede interesar

Deja un comentario

Este sitio web utiliza cookies para mejorar su experiencia. Asumiremos que está de acuerdo con esto, pero puede optar por no participar si lo desea. Aceptar Leer más