12 errores comunes de formateo de imágenes que evitar en tu sitio web

70-ERRORES-COMUNES-DE-FORMATO

Se dice que una imagen vale más que mil palabras – pero, como resultado, también puede traducirse en más dinero y exposición para ti y tu negocio.

Si bien mantener un sitio web personal o de negocios no es una tarea sencilla, poner un poco de esfuerzo extra en agregar contenido visual a tu sitio vale la pena en más de un sentido. No sólo es una de las mejores maneras de hacer que los visitantes sigan viniendo y permanezcan interesados, sino que, según las estadísticas recopiladas por Tech.Co y NewsCred, también:

  • Produce una comunicación más efectiva: Las personas recuerdan el 80% de lo que ven (a diferencia del 20% de lo que leen y el 10% de lo que escuchan).
  • Atrae espectadores: Los artículos que incluyen imágenes reciben 94% vistas que aquellos que no las tienen.
  • Mejora la reputación de los negocios: 67% de los consumidores prefieren negocios que ofrezcan imágenes claras y detalladas de sus productos (y dicen que las imágenes son más importantes que las descripciones de los productos).
  • Afecta las decisiones de compra: 93% de las personas califican las imágenes visuales como el factor más importante que influye en si compran o no un artículo en línea.

01. Problema: Subes imágenes sin optimizarlas para la web, y ahora tu sitio web está lento.

Solución: Encuentra tu “punto de equilibrio” en el tamaño de imagen.

El tamaño de imagen tiene un gran impacto en el desempeño de tu sitio web. Siendo más claros, nos referimos principalmente al tamaño del archivo en megabytes (mb), kilobytes (kb), etc. – no las dimensiones reales de la imagen (tales como 800 x 600 píxeles), aunque a menudo ambas cosas están correlacionadas. Si tus tamaños de archivos son muy grandes, tomará mucho tiempo para que tus páginas carguen, y te arriesgas a perder visitantes que no tienen la paciencia de esperar. Si el tamaño es demasiado pequeño, comprometes la calidad visual de tus imágenes. Necesitarás encontrar el equilibrio perfecto entre el tamaño real y la calidad (resolución), lo cual se combina para determinar el tamaño general del archivo.

Dribbble/Jonathan Ogden

Consejo Profesional: Puedes probar como distintos tamaños de imagen afectan tus velocidades de carga de página con herramientas gratuitas como ésta.

02. Problema: Tu imagen no se ve bien en la pantalla.

Solución: Entender la resolución de imagen.

La resolución es lo que determina lo bien que se ve tu imagen en la pantalla. En términos simples, tiene que ver con el número de píxeles mostrados en cierta cantidad de espacio de la pantalla (píxeles por pulgada, o PPI; a veces píxeles por centímetro). Sin embargo, debido a que las pantallas en los dispositivos que usamos hoy en día tienen resoluciones predeterminadas, tenemos un control limitado sobre cómo aparecerán nuestras imágenes. Pero eso está bien, porque simplifica el proceso de guardado de imágenes. Una resolución de 72 PPI se considera el estándar general para imágenes web de calidad aceptable, pero una resolución de entre 72 PPI como mínimo y 120 PPI como máximo bastará para la mayoría de las pantallas. Según Sebastien Gabriel, diseñador de Google, mantener el PPI dentro de este rango “garantiza que tu trabajo tendrá aproximadamente la misma relación de tamaño en todos lados”. Esto también ayuda a mantener el tamaño del archivo manejable.

Aún más importante, siempre y cuando guardes tus imágenes en las dimensiones correctas (en píxeles) para su destino previsto, deberías evitar cualquier pixelación. La pixelación (borrosidad, distorsión, pérdida de calidad) ocurre cuando una imagen digital se muestra en línea a un tamaño más grande al de sus dimensiones originales (p.ej., tratar de estirar una foto 50 x 50 px para que quepa en un espacio de 500 x 500 px).

Consejo Profesional: Si estás tratando de fijar el PPI de tu archivo de imagen y sólo ves una opción para “DPI”, no te alarmes.

A menudo los términos se usan indistintamente (aunque de manera incorrecta). De hecho, muchas personas y programas usan DPI como un término general para referirse a la resolución de la imagen.

03. Entiende la resolución de imagen, parte 2: compresión

Comprimir una imagen en un programa de edición fotográfica es una manera de ajustar la resolución y el tamaño de archivo. Por ejemplo, cuando usas la opción “Guardar para Web & Dispositivos” para guardar imágenes JPG en Photoshop, puedes elegir configuraciones de calidad predeterminadas, Baja, Media, Alta, Muy Alta y Máxima), o ajustar la calidad con la barra deslizante que puedes ajustar entre 0 (baja) y 100 (máxima). Esto reducirá (o comprimirá) el tamaño del archivo (algo bueno para los tiempo de carga de página), pero también reducirá la calidad visual (algo potencialmente malo, dependiendo de cuán bajo elijas).

Consejo Profesional: En el cuadro de diálogo de “Guardar para Web & Dispositivos”, puedes previsualizar y comparar múltiples versiones de tu imagen (con diferentes tipos de archivo, configuraciones, etc.). Puedes ver los tiempos de descarga estimados o previsualizar tu imagen en cualquier navegador web que tengas instalado en tu sistema. Lee más sobre estas opciones aquí.

04. Problema: El punto focal de tu foto no es obvio.

Solución: Recorta sabiamente.

Recortar tus imágenes puede ser un paso muy importante en el proceso de formateo, particularmente para las fotografías. Claro, no quieres recortar algo importante, pero siéntete en confianza de recortar para mejorar el enfoque o ambiente de la imagen. Por otro lado, no quieres recortar tanto que tus imágenes se distorsionen (entre más píxeles remuevas, menor será la resolución); si deseas hacer esto, necesitarás comenzar con una foto con una resolución considerablemente alta.

Dribbble/Nikola Milasinovic

Consejo Profesional: Si planeas publicar tu imagen en un sitio de redes sociales, puedes evitarte algunas molestias al recortar a las dimensiones apropiadas de manera anticipada. (Lee nuestra guía infográfica para tamaños de imágenes para las redes sociales más populares). De esa manera, sabes exactamente cómo se verá tu foto cuando se publique y no habrá ninguna sorpresa porque algo sea cortado o estirado fuera de proporción.

05. Problema: Tu imagen está mal compuesta.

Solución: Enmarca para crear un máximo impacto.

Relacionado estrechamente con el recorte, el enmarcado debería ocurrir idealmente cuando estés tomando una fotografía o creando una imagen (en vez de después de ello). Tiene mucho que ver con las reglas tradicionales de composición que consideran los pintores, fotógrafos, diseñadores y otros artistas. Algunas de éstas incluyen:

  • la “Regla de los Tercios” (que trata sobre lograr equilibrio y enfoque)
  • organizar los elementos en grupos de tres
  • la repetición (resaltando visualmente los elementos interesantes como líneas y patrones)
  • hacer buen uso del espacio positivo y negativo
  • líneas guía (que dirijan la atención del espectador hacia el punto focal)
  • y mucho más...

Todo lo cual se resume a crear una imagen que sea llamativa, interesante y visualmente atractiva – exactamente lo que quieres para las imágenes que se presenten en tu sitio web.

Consejo Profesional: Muchas cámaras, incluso las cámaras de smartphones, tienen una cuadrícula de la Regla de los Tercios que puedes superponer en la pantalla mientras tomas la foto (o usar para recortar después de haberla tomado). Sólo alinea las partes más importantes de tu imagen junto con uno de los cuatro lugares donde las líneas se intersectan, y estarás en el camino correcto hacia una mejor composición.

HTC/Eric Krebs

06. Enmarca para crear un máximo impacto, parte 2: soluciones alternativas

Si estás creando imágenes para publicar en tu sitio web, entonces tienes control total sobre cosas como el enmarcado y el recorte. Pero si estás conservando imágenes – quizás para publicarlas en tu blog o compartirlas en las redes sociales –, entonces podrías ponerte algo creativo para lograr los resultados que buscas.

Si sientes que al marco que elegiste para tu foto le falta algo, entonces podrías arreglarlo al recortar. O, en vez de quitarle una parte a la imagen al recortarla, puedes agregarle algo. Una foto con espacio extra puede llenarse con una cita o un dicho inspirador — una opción ideal para compartir en las redes sociales.

Dribbble/Chase Kettl

También puedes experimentar con la orientación de la imagen, tal vez (si la composición de la imagen lo permite) cambiando o recortando de un formato vertical a horizontal (o viceversa); rotar la imagen para una perspectiva diferente; o recortando la imagen a un círculo u otra forma. Tener imágenes en una variedad de formas y tamaños le dará interés visual a tu sitio web. No te adhieras al mismo proceso de formateo de siempre; ¡sé creativo!

Dribbble/Brent Jackson

Consejo Profesional: Canva hace que crear imágenes para las redes sociales como frases sea facilísimo. Sólo abre una plantilla de tamaño preestablecido para cualquier sitio que estés usando, elige de nuestra amplia selección de fotos gratuitas o de $1 (o subes las tuyas), agrega algo de texto (tenemos 100+ fuentes gratuitas), ¡y listo! Terminaste.

07. Problema: Tu imagen se ve distorsionada.

Solución: Usa la escala proporcionalmente.

La causa más común por la que las imágenes se ven distorsionadas en sitios web es que se han estirado fuera de proporción para llenar un espacio determinado. La manera más sencilla de evitar eso es mantener las proporciones originales de la imagen cuando se aumenta o reduce la escala, en vez de estirar el largo o ancho para que encaje.

Algunas de las plataformas en las que publicas imágenes podrían escalar automáticamente tu foto para que se adapte a sus propios requisitos. Por lo que si estás publicando imágenes en un sitio distinto al tuyo, procura revisar el tamaño de subida recomendado y formatea tu imagen de acuerdo a esas especificaciones anticipadamente.

Consejo Profesional: La mayoría de los programas  y aplicaciones de edición de fotos tienen herramientas que puedes usar para asegurarte de que estés escalando tus imágenes proporcionalmente. En la caja de diálogo donde estés escalando o ajustando el tamaño de la imagen, a menudo habrá un pequeño ícono con forma de candado en el que si haces clic, “bloqueará/fijará” las proporciones originales, o una casilla que puedes marcar que dice algo como “escalar proporcionalmente” o “limitar proporciones”. Haz eso, y estarás listo para seguir.

08. Problema: Guardaste tu imagen en el formato de archivo incorrecto.

Solución: Aprende las diferencias entre los tipos de archivo.

Todos esos acrónimos puede ser confusos – ¿Cuál es la diferencia entre un JPG y un PNG? ¿Realmente importa? ¿Algunos formatos de archivo funcionan mejor en línea que otros?

La respuesta corta es que no todos los formatos de archivo se crean del mismo modo. Cada uno tiene sus usos específicos, con su propio conjunto de ventajas y desventajas. A continuación daremos un pequeño resumen de los tipos de archivo que son adecuados para uso web, lo cual debería darte suficiente información para que tus imágenes se vean de lo mejor en tu sitio web.

  • JPG (o JPEG): principalmente para fotos (o ilustraciones y gráficos altamente detallados/coloridos); representación de color precisa y de amplio espectro; no es bueno para imágenes con texto.
  • PNG: alta calidad de imagen y buena representación de colores; soporta transparencia/opacidad; produce líneas y bordes definidos, funciona bien para cosas como gráficos, logos, cuadros, etc.; muestra el texto y bloques sólidos de colores sin pixelación (al contrario que los JPGs, porque no pierde calidad cuando se comprime).
  • GIF: el único tipo de archivo que soporta animación; adecuado para gráficos simples (el pequeño tamaño de archivo no afecta negativamente las velocidades de carga de la página); capacidades de color no tan buenas como los JPGs (256 colores o menos, no es apropiado para fotos).
  • SVG: formato de vectores que es independiente a la resolución - y zoom/acercamiento (p.ej., permanecerá definido y claro sin importar en qué dispositivo lo veas, qué tan alta sea la resolución de la pantalla, o cuánto acercamiento le hagas).
  • PDF: preserva el contenido y la apariencia original del contenido de un archivo independientemente de dónde o cómo se visualice; es mejor para mostrar documentos completos en línea, como panfletos/guías/manuales, ebooks, etc.

Y uno que evitar…

  • TIFF: alta calidad de imagen, pero tamaño de archivo muy grande, por lo que no es adecuado para uso web; comúnmente usado para entregar documentos que serán impresos.

Consejo Profesional: Para imágenes que puedan usarse tanto para proyectos impresos como para la web (tales como JPGs y PDFs), necesitas asegurarte de crearlas o convertirlas al espacio de color correcto para uso web, el cual es RGB. Si en vez de eso las guardas en CMYK (lo cual sólo se usa para impresión), los colores de tu imagen se verán muy raros cuando la subas a tu sitio web. Si estás usando Canva para formatear tu imagen, este proceso está simplificado: Sólo haz clic en “Descargar”, donde elegirás ya sea “Como imagen” (un archivo RGB para uso web) o “PDF de alta calidad” (un archivo CMYK para impresión).

09. Problema: Compraste fotos de archivo para tu sitio web, pero las ves por todos lados.

Solución: Evita las fotos de archivo, o pasa algo de tiempo extra buscando fotos únicas.

Si no tienes el tiempo o los recursos para crear tus propias imágenes, las fotos de archivo pueden ser una opción conveniente. Sin embargo, hay mucho cliché y fotos de archivos usadas excesivamente –  y al usar cualquier foto de archivo, te arriesgas a verlas en otros lugares, quizás incluso en el sitio web de un competidor. La solución obvia sería no usar fotos de archivo en lo absoluto y en vez de eso crear tus propias imágenes originales, pero si eso no es una opción, al menos puedes dedicar algo de tiempo yendo más allá de la primera página de los resultados de búsqueda para encontrar algo que sea un poco diferente, y, aún más importante, que realmente corresponda con tu marca y propósito.

Consejo Profesional: Más y más recursos para fotos de archivo gratuitas han surgido en los últimos años, los cuales (a pesar de ser gratis) aún no se utilizan con tanta frecuencia como los sitios de paga. Además, a menudo presentan opciones que son más artísticas y menos comunes y corrientes, si estás dispuesto a pasar un poco más de tiempo buscando. Lee nuestro artículo, “Fotografías de archivo gratuitas, “Fotografías de archivo gratuitas: los mejores 73 sitios para encontrar fantásticas imágenes gratuitas,” para ver una lista calificada de recursos recomendados.

Fotografías de archivo gratuitas de Unsplash.

10. Problema: No estás seguro de cómo agregar información a tus imágenes.

Solución: Asegúrate de usar opciones de metadatos.

Metadatos es sólo una palabra inventada para referirse a la información extra que está integrada en tu archivo de imagen o que puedes agregar de manera externa (como una leyenda o descripción). Algo de esta información se crea automáticamente, como la información técnica que registra una cámara sobre una foto digital. Otros elementos de información textual – nombres y descripciones de imágenes, palabras clave, leyendas – son opcionales o pueden editarse. ¿Entonces por qué pasar tiempo extra introduciendo esa información? Para empezar, incluir algunos antecedentes de tus imágenes con frecuencia crean una mejor experiencia de usuario; pero agregar este tipo de información también puede ayudar a que tus imágenes aparezcan más a menudo en resultados de búsqueda relacionados. Y más tráfico en el sitio web siempre es algo bueno.

Consejo Profesional: Las distintas plataformas de blogueo y alojamiento web ofrecerán diferentes opciones para agregar metadatos como leyendas y palabras clave a tus imágenes – y deberías aprovechar cualquier oportunidad que ofrezca tu plataforma para añadir valor. “Alt text” (abreviatura en inglés para “texto alternativo”, a veces llamado “alt tag” o “alt attribute”) es una de las opciones más comunes.

Es un campo donde puedes escribir una palabra o frase que describa lo que representa tu imagen. Esto es importante porque: 1) Juega un papel significativo en la mejora de la optimización para buscadores (SEO, por su abreviatura en inglés) de tu sitio web; 2) Si tu imagen no se muestra por alguna razón, el “alt text” aparecerá para decir qué debería estar ahí; 3) El “alt text” es utilizado por usuarios ciegos o con problemas de la vista que usan navegadores basados en audio para explorar las páginas web.

Cada imagen debería tener su propio y único “alt text” relevante; y si es breve mejor. Pero no abuses de la herramienta – cargar el campo de “alt text” con términos de búsqueda que pienses que son populares (conocidos en inglés como “alt spam” o “keyword stuffing” [“texto alterno basura” o “relleno de palabras clave”, por su traducción literal al español]) no te ayudará, y, de hecho, podría bajar la posición de búsqueda de tu sitio web.

Opciones de metadatos de imagen en WordPress (Título, Leyenda, “Alt Text” y Descripción).

11. Problema: Crees que a tu foto le vendría bien un poco de edición, pero tampoco quieres que se te pase la mano.

Solución: Mantenla básica y no te vuelvas loco con los efectos especiales.

Existe la buena y la mala edición fotográfica. A veces, cuando trabajes con una imagen, querrás mejorarla un poco: ajustar el contraste o brillo, mejorar la saturación, definirla un poco. Descuida, no hay problema.

Flickr/Severin Sadjina

Sin embargo, la mayoría de los programas de edición fotográfica – incluso los más básicos – pueden hacer mucho más que eso. Puede ser fácil verse atrapado probando efectos dramáticos y filtros; hay una delgada línea entre un bueno diseño y uno burdo. Una buena regla general es tratar de que tu edición tenga un propósito. Es decir, si te ves a ti mismo eligiendo un efecto por ninguna otra razón más que porque “se ve divertido/raro/diferente”, entonces podría ser mejor para ti dejar la imagen tal y como está, en su forma original.

Consejo Profesional: Las opciones de autoajuste de los programas de edición (color automático, contraste automático, etc.) no siempre logran los mejores resultados. Si piensas que algo se ve “fuera de lugar”, confía en tu propio juicio y no en una máquina y, en cambio, realiza cambios manuales.

12. Problema: Los colores no se ven del todo bien en la pantalla de tu computadora.

Solución: Calibra tu monitor.

Si estás trabajando con imágenes digitales, es importante que los colores se muestren correctamente. Debido a que estás tomando decisiones de color o edición, querrás ver tus imágenes como aparecerán en línea, y no podrás hacerlo si tu pantalla o monitor está mostrando los colores incorrectamente. Simon Prais en DigitalArts ofrece este consejo:

“Calibra tu monitor, asegurándote de que el brillo esté ajustado entre 90 y 120 cd/m2.

Aunque esto limitará el contraste de tu pantalla, es probable que sea más representativo de lo que la audiencia objetivo experimentará en una variedad de monitores de distintas edades y calidades”.

Consejo Profesional: Los sistemas operativos de Windows y Mac tienen herramientas de calibración integradas. Puedes encontrar instrucciones paso a paso de cómo usarlas aquí.

 

La mejor herramienta para crear diseños increíbles