Cómo elegir las imágenes para tu página Web
Compártelo para que otros se beneficien:
Un diseño web atractivo es un factor determinante a la hora de mantener usuarios en nuestra web. Y evidentemente uno de los elementos visuales más importantes son las imágenes, pero, ¿Cómo elegir las imágenes para tu página web y que cumplan con su objetivo?
Como diseñadores web minimalistas esto es aún más cierto para nosotros. Ya que sólo elementos relevantes a lo que queremos transmitir tienen cabida en nuestro diseño, las imágenes han de ser cuidadosamente seleccionadas.
Por eso es que estas imágenes tienen que ser de la mayor calidad y optimizadas. E incluso, cuyos colores hagan match con nuestra paleta de branding.
Tabla de Contenido
Imágenes de calidad para tu web
Cuando se trata de tu web, no escatimes en cuanto a calidad de imágenes.
No hay nada mejor para arruinar un buen diseño que uno imagen pobre, oscura, borrosa, mal recortada.
He viso en webs “profesionales” la imagen del emprendedor o empresario detrás del negocio, pero con los pies cortados o un pésimo trabajo de eliminación de background, que hace que la imagen –y la web entera– se vean amateur.
Esta no es una buena señal para enviar a tus visitantes y potenciales clientes.
Otro error frecuente es el de colocar imágenes con poca resolución, pero que deben cubrir un área mayor a su propio tamaño. ¿El resultado? Una mala imagen que luce un tanto pixelada.
Por otra parte, tenemos que las imágenes no optimizadas son las responsables de hasta el 80% de los problemas de carga lenta de una web.
Repositorios de Imágenes para tu web
Con el poder del internet a nuestro alcance, afortunadamente tenemos a nuestra disposición repositorios de imágenes tanto gratuitos como de pago con literalmente millones de imágenes de excelente calidad de las que puedes escoger para tu proyecto web.
Nosotros recomendamos entre los repositorios gratuitos:
En cuanto a repositorios de pago, estos suelen ofrecer planes gratuitos, reservando sus mejores imágenes para los planes pagados.
Realmente, hay una diferencia entre imágenes gratuitas (que, aunque de calidad, suelen ser un tanto genéricas) y las imágenes premium que son más “personalizadas”.
Entre las premium podemos recomendar:
Canva (disponible en versión pro)
En Canva puedes encontrar una gran variedad imágenes, tanto gratis como de pago. Además de su propio repositorio, tiene integración con Pixabay, Pexel y apps que te permiten personalizar la fotografía con filtros, recortar fondos y efectos, todo en una misma plataforma.
Sin embargo, si lo que buscas son imágenes únicas, no dudes en contratar los servicios de un profesional de la fotografía, es una inversión que bien vale la pena y que hace una diferencia.
Optimizando las imágenes de la web
El poder de una imagen de calidad y buena resolución viene a un precio: el “peso” de la misma.
Ese “peso” de más afecta capacidad del servidor de nuestro hosting para presentar la imagen. Por tanto, afecta negativamente la experiencia del usuario y el SEO de nuestra web.
Cuando nuestro navegador entra a una web, realiza una serie de peticiones al servidor donde está alojada esta web. Las peticiones que más tardan en cargarse y el factor que más contribuye a la lentitud de la velocidad de carga es el tamaño o peso de las imágenes.
Como sabes, una web que carga lento puede ser penalizada por los motores de búsqueda como Google, presentándola al final de los resultados de búsqueda. Muy malo para el SEO, además que esa lentitud va en detrimento de la experiencia de nuestros usuarios, quienes ante una lentitud de carga, tienden a abandonar la navegación de la web.
Afortunadamente, es algo que tiene fácil solución con diversas herramientas de compresión de imágenes gratuitas.
TinyPng
Nosotros usamos regularmente tinypng.com.
Cuando selecciones tus imágenes de alta resolución .png o .jpg, descárgalas a tu disco duro y súbelas a TinyPng.
Simplemente arrastra y suelta tu imagen y allí obtendrás una compresión de hasta 80% de tu imagen, sin perder resolución.
Una vez hecho esto, descárgala y súbela a tu web.
El sitio te permite hasta 20 compresiones al día con un máximo de 5 Mb cada una.
Para usuarios de WordPress, TinyPNG tiene también un plugin. Este plugin comprime automáticamente la imagen mientras la carga en tu sitio web. Puedes comprimir con la versión gratuita hasta 500 imágenes mensuales y puedes hacer compresiones en masa de tu Biblioteca de Medios.
Optimole
Otra opción excelente para WordPress con una aproximación diferente es Optimole.
Optimole es un servicio de compresión que carga las imágenes de tu web en los servidores de Optimole, de tal manera que cuando alguien accede a tu web, las imágenes son cargadas desde Optimole, ya comprimidas, y no desde el servidor de tu web.
Esto ahorra valiosos recursos a tu hosting. Optimole viene también en forma de plugin.
Photoshop
Photoshop es otra opción para reducir el peso de la imagen sin perder calidad. Este completo programa de diseño cuenta con la opción de optimización de imágenes. Las fotos editadas suelen quedar más pesadas que las originales, por lo que es un absoluto deber comprimirlas.
Tu imagen en tu web
Como emprendedor y dueño de tu web, sabes que es esencial que haya imágenes tuyas para ponerle un rostro a la empresa.
Lo ideal es contratar un fotógrafo profesional y discutir con ella o él lo que necesitamos transmitir a través de nuestras imágenes.
Pero para quienes no dispongan de recursos para contratar uno y quieran lograr sus propias imágenes, habrá que tomar en cuenta ciertos tips para obtener la mejor imagen posible.
Imágenes con buena iluminación
Asegúrate de que tus imágenes cuenten con buena iluminación, especialmente el rostro. Es recomendable fabricar una superficie reflejante, como un cartón envuelto en papel de aluminio nuevo, para iluminar áreas oscuras de tu rostro. Obviamente, alguien debería ayudarte en esto.
Tamaño adecuado
Es buena idea conocer bien tu cámara o la cámara de tu celular. Asegúrate de que las fotos sean de alta resolución. Que cuando las insertes en áreas grandes de tu web, como la imagen inicial o “hero”, no se vea en modo alguno pixelada.
Para imágenes en el tope de la página de inicio, recomendamos un ancho de 2400 pixeles. Para otras imágenes, 700 u 800 pixeles estaría bien. Recuerda que siempre se pueden escalar las imágenes hacia abajo, pero nunca hacia arriba, lo que origina terribles imágenes pixeladas.
Vestido para vender
Por favor, no salgas en shorts y camiseta sin mangas (a menos que tu web sea de una escuela de surf o un gimnasio). Tampoco, si no eres abogado o contador, es necesario que salgas de traje y corbata o taller para las damas.
Vístete de una manera adecuada de acuerdo a tu actividad y a la audiencia a la que te diriges.
Incluso si eres un creativo, recuerda que dentro de la informalidad también hay un buen vestir.
Imágenes borrosas
Si alguien te va a tomar las fotos, que tenga el pulso muy firme. Si no, procura colocar tu cámara o celular sobre un trípode o base fija. Esto es un deber más aún si estás procurando sacar las fotos sin ayuda.
Una vez que hayas establecido el área a fotografiar, pon el timer (función que establece un tiempo después del cual se dispara la cámara) y colócate en posición. Puedes usar la opción de “ráfaga” (varias tomas unas tras otra) para obtener varias imágenes en distintas posiciones de las cuales puedas escoger.
Considera el fondo
Un fondo puede potenciar la composición o puede distraer de la intención original.
En nuestra web, optamos por colocar imágenes nuestras sin fondo y añadimos sombra inferior, porque buscábamos un efecto minimalista, limpio y puro.
Pero con nuestra cliente Sandra, amante de la naturaleza y uno de cuyos colores de marca era el verde, quisimos conservar el fondo boscoso pero no queríamos que distrajera de la imagen de Sandra, por lo que hicimos un efecto “blur” (borroso) y obtuvimos lo mejor de ambos mundos.
Haz un trabajo de edición
Incluso los mejores fotógrafos lo hacen. Y no se trata de hacerte “cirugía plástica” con esas nuevas apps (aunque si quieres borrar alguna línea de expresión, está bien).
Hablamos aquí de corregir ciertos problemas como subexposición (imágenes oscuras), sobrexposición (imágenes muy claras, características planas), tratamiento de fondos como la imagen de Sandra, recortado de sujeto, adición o sustracción de elementos de diseño, filtros para cambiar colores, etc.
La herramienta que recomendamos para edición de fotos, es Photoshop, la mejor y más profesional. Sin embargo requiere la adquisición de la licencia del programa. Actualmente (mayo 2021) es de unos 240 USD al año.
Además, demanda un nivel de experticia y conocimiento de la herramienta un tanto altos y su curva de aprendizaje es larga. Pero Photoshop es una herramienta con la que los profesionales del diseño gráfico hacer realmente maravillas.
Ahora para quienes no tienen Photoshop, ni poseen la experticia, recomendamos Canva, que como comentamos anteriormente cuenta con muchas funcionalidades que hacen un buen trabajo para no diseñadores e incluso con principiantes.
Escogiendo imágenes de repositorio
Como sacar unas fotos aceptables de ti mismo te va a llevar un buen tiempo, no vas a querer sacar tú mismo todas las fotos de tu web. Tampoco es necesario.
Como discutimos ya, hay repositorios en línea donde puedes escoger la imagen adecuada para tu web y para el contenido dinámico de tu blog.
Sin embargo, ten en cuenta estas recomendaciones a la hora de elegir las imágenes de tu página web:
Huye de las imágenes demasiado genéricas
Si bien es cierto que las imágenes gratuitas pueden no ser tan personales como las pros, teniendo tan vasta cantidad de opciones en esos repositorios, te recomendamos hacer una búsqueda más en profundidad, no tan superficial, usando palabras clave.
Las imágenes en estos sitios están marcadas con tags, que son palabras claves con las que puedes realizar peticiones con las herramientas de búsqueda disponibles en esos repositorios.
Así que no te quedes con las primeras imágenes que te aparezcan. Navega por los resultados hasta que encuentres la más adecuada y que a la vez no sea tan genérica, la que todos colocarían o la que no dice nada. Nos viene a la mente la típica foto de las personas anónimas en reunión.
Tamaño y orientación adecuados
En repositorios como Unsplash y las otras que recomendamos, hay la posibilidad de centrar la búsqueda por colores predominantes en la imagen. Esto es ideal para tu diseño de marca. Si tus colores de marca son verde y naranja, puedes buscar imágenes donde predominen estos colores.
También, puedes restringir las búsquedas de acuerdo a la orientación de la imagen.
Por ejemplo, si quieres una foto para tu imagen de inicio, la llamada “hero” o como imagen destacada para tus posts, vas a querer imágenes horizontales. Para imágenes en secciones con dos o más columnas quizá prefieras una imagen vertical.
Conclusiones
Como diseñadores web, somos conscientes de la tremenda importancia que tiene la selección cuidadosamente pensada de los elementos visuales de un sitio web.
La tipografía, vectores, iconos y, especialmente, las fotografías deben estar supeditados a los valores de marca de la empresa, la personalidad del emprendedor y las características de la audiencia a la que se dirigen.
Antes de leer cualquier cosa, el visitante es impresionado, positiva o negativamente, por las imágenes de la web.
Estas deben ser de calidad, visualmente atractivas y que refuercen el mensaje que se quiere comunicar. Lamentablemente, hemos visto una gran cantidad de webs cuyo tratamiento de sus imágenes no se puede describir sino como negligente, lo que arruina no sólo el diseño, sino también la personalidad de marca de la empresa detrás.