5 consejos que te ayudarán a elegir las mejores imágenes para páginas web

elegir-las-mejores-imagenes-para-paginas-web

¿Utilizas imágenes para tu página web? Seguro que sí, vaya pregunta la mía. De manera más o menos consciente todos sabemos de la importancia del contenido audiovisual para cualquier tipo de web.

¿Te imaginas que estás navegando por internet y das con un sitio sin imágenes, videos ni ningún tipo de iconos? Solo texto de principio a fin. 

Resulta complicado, ¿verdad? Necesitamos las imágenes porque nos ayudan a entender más rápido el mensaje, acompañan a los textos y permiten que el diseño respire y sea más amigable. Por eso, dentro del contenido web, las imágenes juegan un papel clave. 

Aquí van una serie de preguntas rápidas. Si contestas que no a por lo menos una de ellas, te recomiendo que sigas leyendo porque lo resolvemos a lo largo de este artículo.

  • ¿Tienes localizados diferentes bancos de imágenes gratuitos?
  • ¿Conoces más de tres tipos de imágenes para páginas web?
  • ¿Sabes cómo optimizar las imágenes para SEO?
  • ¿Diferencias los formatos de imágenes para web? 
  • ¿Sabes cuál es más recomendable y por qué?

¿Cómo ha ido? ¿Te quedas? Pues vamos allá.

¿Qué opciones tienes para añadir material gráfico a tu web? 

Cuando empiezo un proyecto de diseño web, una de las principales cosas que necesito antes de ponerme manos a la obra es el contenido. Y elegir las imágenes para la web no es tarea sencilla. Sobre todo porque cada caso es diferente. Si tienes una marca personal no necesitarás el mismo material que si tienes un e-commerce o un porfolio. Aun así, estas son las tres fuentes básicas para conseguir imágenes de calidad.

  • Bancos de imágenes: algunos de los más conocidos son Pixabay, Freepik o 123rf, aunque hay muchos más. Cada web tiene su propio funcionamiento con alternativas gratuitas o de pago. La principal ventaja de usar estos bancos de imágenes es la gran variedad de la que dispones, ya que se encuentran no solo fotografías, sino ilustraciones y vectores. Eso sí, ten en cuenta que usar solo fotos de archivo puede acabar quitando personalidad a tu marca, por lo que es recomendable combinarlas con las siguientes opciones que te indico a continuación.
  • Fotografías o ilustraciones propias: tener fotos tuyas exclusivas pensadas para tu marca y para tus productos o servicios es, sin duda, una gran ventaja. Te permite personalizar y mostrar algo único que solo tú ofreces. Para conseguir un buen resultado puedes contratar una sesión profesional o contar con un buen ilustrador. Es más caro sí, pero tendrás fotos que transmitirán el valor añadido de tu marca y denotarán una mayor profesionalidad.
  • Imágenes personalizadas: ni tanto ni tan poco, ¿por qué no coger imágenes de stock y darles un toque personal con algún editor como Photoshop o incluso Canva? Es un recurso muy efectivo con el que gastar menos dinero y seguir manteniendo la originalidad y la diferenciación.

5 consejos sobre cómo utilizar las imágenes para páginas web

Ahora que ya tienes tus imágenes seleccionadas, pon en práctica estos 5 consejos para optimizarlas en tu web.

Elige el formato de la imagen

Es un tema en el que mucha gente no se fija. Pero los pequeños detalles son los que marcan la diferencia. Así que tenlos en cuenta.

Elegir el formato adecuado determinará la calidad de la imagen, la profundidad y los colores y, además, posibilitará optimizar mejor el peso de la foto. 

Los tres formatos principales con los que nos encontramos más a menudo son PNG, JPG, y GIF. Sin entrar en demasiados detalles técnicos (si te interesa el tema prepararé un contenido sobre esto), te recomiendo diferenciarlos según su uso:

PNG: estas imágenes suelen ser más pesadas por lo que solo las uso para fotos o iconos con fondo transparente.

JPG: es el formato perfecto para imágenes de fondo grandes.

GIF: sácale partido a las animaciones (las mismas que mandas por WhatsApp cuando un emoticono no hace justicia a tu alegría) pero sin pasarse para que no quede recargado.

Cuida el tamaño de la imagen

La semana pasada hablábamos de cómo mejorar la velocidad de carga de una web. Pues bien, las imágenes juegan un papel importantísimo para conseguir una web ágil y rápida. Si no las optimizas bien, enseguida empezarás a notar la velocidad de carga más lenta y es que si te descuidas puede colarse alguna foto de más de un Mb (lo que es una locura para tu web). Lo recomendable es que siempre pesen menos de 100 Kb. Para conseguirlo, lo primero y más importante es fijarse en lo que subimos. Pásalas por un programa para disminuir el tamaño como Tiny.png o Resizer o instala algún plugin (WP Smush por ejemplo) que reduce el tamaño de todas las imágenes que subes a la galería.

Truco para subir las imágenes como un profesional: 

1. Mide el hueco donde irá la imagen con una extensión de Chrome (Page Ruler Redux).

2. Crea un nuevo documento en Photoshop con las medidas que has sacado de Page Ruler. 

3. Pon la imagen en la nueva mesa de trabajo y céntrala bien.

4. Finalmente expórtala con la opción de «guardar para web» y ajusta la calidad a un 60% para reducir el peso.

Optimiza la imagen para SEO

Es un recurso al que no se le suele hacer demasiado caso, pero no cuesta nada y puede ayudar mucho. Al igual que lo haces con tus textos, optimiza las imágenes. Cada vez que añadas una nueva, pon la descripción, el título y el texto alternativo incorporando siempre la palabra clave. Tardarás dos minutos y de esta manera conseguirás que te encuentren gracias a tus imágenes.

Cómo-elegir-imágenes-página-web

Respeta los derechos de autor

Del mismo modo que no te gustaría que copiaran tus textos o ideas, la mejor manera de respetar el trabajo de los demás es siguiendo sus indicaciones. En algunos casos hay personas que ponen sus fotografías para su libre uso a cambio de que se mencione al autor. Puedes hacerlo al pie de la foto o al final del artículo

Mantén la identidad visual del negocio

Decidas lo que decidas, no te olvides de lo más importante: coherencia de marca. Es vital que siempre vaya en consonancia con tu identidad visual. Por mucho que te guste una imagen, si no encaja con tu estilo, evita añadirla. Creará confusión y es algo que definitivamente no queremos.

Y hasta aquí por hoy con el contenido visual. ¿Te ha quedado alguna duda sobre cómo elegir e introducir las imágenes para tu página web? Pregúntame en comentarios y seguimos hablando. 

Curso de diseño web personalizado.

Deja de sufrir por tu sitio web: gana tiempo y diseña webs profesionales con Elementor. Rápido y gratuito.

Responsable » EI Pierre Lacoste
Finalidad de la recogida y tratamiento de los datos personales » enviarte comunicaciones comerciales y Newsletter informativo.
Legitimación » Consentimiento.
Destinatarios » No se ceden a terceros. Se pueden producir transferencias. Los datos están ubicados en los servidores de Siteground (proveedor de hosting de www.beatrizcalvo.com) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/aviso-legal.htm)
Derechos » Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en (hola@beatrizcalvo.com) así como el derecho a presentar una reclamación ante una autoridad de control.
Información adicional: En https://beatrizcalvo.com/politica-de-privacidad,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

Sigue leyendo:

stripe-que-es-y-como-usarlo
Negocios online

Stripe qué es y cómo usarlo: Guía 2024

Stripe es una plataforma de pagos en línea que permite a las empresas aceptar pagos de manera segura y eficiente. Se destaca por su facilidad de uso y por su amplia gama de características que facilitan la gestión de transacciones.

La plataforma de pagos Stripe ha sido creada para simplificar la aceptación de pagos en internet de manera segura. Además, con una amplia gama de características, se adapta a las necesidades de negocios de todos los tamaños, desde pequeñas startups hasta grandes empresas.

En esencia, Stripe permite a las empresas gestionar pagos online. Facilita la transferencia de dinero de clientes a comerciantes de manera segura.

Leer más »
Portales-de-WeTransfer
Marketing digital

[Guía 2024] Cómo usar los Portales de WeTransfer: Tutorial y Características

En esta guía de 2024, exploraremos en detalle qué son los Portales de WeTransfer y cómo utilizarlos para simplificar el proceso de envío de archivos a clientes. Aprende a configurar y sacar el máximo provecho de esta herramienta esencial para diseñadores, fotógrafos y más.

Este post ha sido generado a través de las peticiones de los usuarios que leyeron el artículo de WeTransfer: qué es y cómo usarlo.

¿Qué tipo de archivos necesitaremos compartir con el cliente para revisar?

Como sabes este blog está centrado en el diseño web, así que si eres diseñador web, diseñador gráfico, copywriter, etc. podrás hacer uso de los Portales de WeTransfer de forma gratuita.

Imaginemos que, por ejemplo, necesitas enviar los archivos generados para una identidad visual o después de una sesión fotográfica necesitas enviar las imágenes de la página web o incluso los documentos del contenido que has escrito para la web.

Leer más »
que-poner-en-la-pagina-de-inicio-de-una-web
Blog

[2024] Qué poner en la página de Inicio de una web

La página de Inicio es el elemento más importante de toda la web y juega un papel fundamental. Si no sabes qué poner en la página de Inicio de tu web o estás cometiendo los errores más comunes del diseño web, mal vamos.

Una de las únicas oportunidades que tienes para conseguir nuevos y más clientes (incluso para captar más leads) por Internet es a través de la página de Inicio o Home de tu web.

En ella, aparte de elegir los mejores colores, puedes aplicar estrategias de captación de leads que te permitirán generar visitas a la web.

Leer más »
tutorial-draw-io-herramienta-diagramas
Blog

[2024] Tutorial sobre Draw.io – La mejor herramienta para diseñar diagramas online

Hoy veremos un tutorial de Draw.io, la herramienta para hacer diagramas online de forma gratuita.

Por lo general, cuando necesitas hacer un diagrama, por inercia tiendes a coger papel y boli para ponerte a dibujarlo. Es normal, esto nos pasa a todos.

En mi caso coge papel y boli para todo, hasta para crear un funnel de ventas estilo flywheel.

Y lo que pasa es que al final es una pérdida de tiempo y por qué no decirlo, un malgasto de papel.

Que si te equivocas, que si le das otra vuelta, que si toca hacer tachones y al final tirar el diagrama o el funnel a la basura para volver a comenzar desde el principio.

Por eso, para ahorrar tiempo y papel, vamos a ver a fondo una herramienta gratuita y online llamada Draw.io.

Leer más »
captacion-de-leads
Blog

Técnicas infalibles para la captación de leads

¿Sabes de qué va la captación de leads? Ya hemos hablado de la importancia de generar visitas a tu web y de tener un sitio estupendo por dentro y por fuera. Pero nos falta algo importantísimo que hoy resolvemos. 

La famosa, imprescindible y deseada lista de suscriptores. Saber captar el nombre y correo electrónico de nuestros potenciales clientes, clasificarlos y conducirlos, es uno de los factores esenciales para aumentar las ventas. 

Demos un recorrido por el arte de atraerlos a todos, o lo que es lo mismo, captar leads para alimentar tu embudo de ventas

Leer más »
wetransfer-que-es-como-usar
Blog

[Guía 2024] Wetransfer: Qué es y cómo usarlo

En este tutorial de WeTransfer, vamos a ver qué es y cómo usarlo.

Imaginemos que estás pensando en crear una web en WordPress.

Cuando contratas el tipo de diseñador web que se ajusta a tus necesidades, la identidad visual y los textos e imágenes de la página web que quieras publicar, por lo general, debes facilitárselos tú.

Para ello, puedes utilizar WeTransfer, la herramienta que te facilitará la vida a la hora de enviar archivos.

Por cierto, si eres diseñador, quizá te interese aprender a usar los Portales de WeTransfer, de forma que compartir archivos con tus clientes sea pan comido.

Si quieres ampliar la información sobre qué documentación deberías enviar a tu diseñador web a través de WeTransfer, puedes leer este artículo sobre qué poner en la página de inicio de tu web, este otro sobre las diferentes partes de una web y, para terminar, este en el que te hablo del contenido de nuestra web.

P.D: Quédate hasta el final porque te contaré 2 trucos que puedes aplicar para ahorrarte adquirir la versión PRO a la hora de enviar archivos.

Leer más »

Curso de
diseño web
personalizado.

Deja de sufrir por tu sitio web: gana tiempo y diseña webs profesionales con Elementor. Rápido y gratuito.

Responsable » EI Pierre Lacoste
Finalidad de la recogida y tratamiento de los datos personales » enviarte comunicaciones comerciales y Newsletter informativo.
Legitimación » Consentimiento.
Destinatarios » No se ceden a terceros. Se pueden producir transferencias. Los datos están ubicados en los servidores de Siteground (proveedor de hosting de www.beatrizcalvo.com) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/aviso-legal.htm)
Derechos » Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en (hola@beatrizcalvo.com) así como el derecho a presentar una reclamación ante una autoridad de control.
Información adicional: En https://beatrizcalvo.com/politica-de-privacidad,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

Comparte: