8 errores de imagen a evitar en su sitio web
Las grandes imágenes, las galerías y los diseños fotográficos pesados son una gran tendencia en el diseño web. Para aprovechar al máximo esta estética, debe asegurarse de que cada imagen en su sitio web se ajuste a la pantalla y represente bien a su marca.
Hay muchos errores que cometen los diseñadores en el camino, desde problemas técnicos hasta la calidad de la imagen. Pero no tiene que caer en una de estas trampas cuando trabaja con imágenes de sitios web. Aquí, veremos los errores de imagen y cómo corregirlos o evitarlos por completo. (Como beneficio adicional en esta publicación, presentamos una colección de imágenes divertidas y geniales de la colección de objetos recientes de Death to the Stock Photo).
Error: cargar archivos enormes
Las imágenes a tamaño completo son hermosas (y necesarias) cuando se trata de trabajos de impresión, pero pueden causar problemas cuando se trata de la web. Las imágenes grandes se cargan lentamente; tiempos de carga lentos hacen que los usuarios abandonen su sitio.
Desafortunadamente, es una trampa fácil de caer. Muchos programas de back-end permiten la carga de imágenes grandes y, a menos que preste atención, es posible que ni siquiera sepa que los archivos se están cargando a tamaños increíbles. Las diferentes imágenes en diferentes usos requieren diferentes especificaciones de imagen. Consulte la guía de su marca o sitio web para saber cuáles son las dimensiones de las áreas de imagen comunes en su sitio.
Cuando se piensa en imágenes, el tipo de archivo también es importante. Por favor, no use un tiff para la web. Los formatos de archivo más comunes y utilizables son PNG (imágenes generadas por computadora, como gráficos o logotipos o cuando es necesaria la transparencia), JPG (fotos) o GIF (animaciones).
Solución: La solución simple es dimensionar las imágenes para la dimensión del marco donde aparecerá con una resolución web adecuada. Pero hay un poco más de eso. Guarde cada imagen para un uso óptimo en su sitio y para compartir en redes sociales. (El ancho de una imagen de Pinterest, por ejemplo, es de 600 píxeles; si desea que la imagen se pueda compartir, debe ser de ese tamaño).
Error: Olvidarse de recortar
Si bien el uso de archivos enormes puede bloquear un sitio, también puede usar imágenes de fotograma completo que están ocultas en la pantalla. El recorte ayuda a mostrar las imágenes que desea que vean los usuarios al crear un punto focal definido que podría no estar allí con una imagen de fotograma completo.
La falta de recorte de imágenes también puede crear una pila de imágenes menos que dinámica que tienen las mismas formas y relaciones de aspecto. El uso de múltiples cultivos y formas interesantes para las imágenes puede agregar intriga visual a un sitio web.
Solución: recorte las imágenes al tamaño o dimensión apropiados antes de cargarlas para que cada imagen se muestre como se desee.
Error: olvidarse de las miniaturas
Hay varias formas de manejar el tamaño y el tamaño de las miniaturas. (Muchos de los cuales dependen de sus capacidades de back-end, por lo que no discutiremos los méritos de cada uno). Pero debe recordar actualizar y prestar atención a las imágenes más pequeñas en su sitio.
Con demasiada frecuencia, los diseñadores olvidan que las miniaturas, las vistas previas de imágenes y los favicons deberán actualizarse con cambios en el contenido del sitio web.
El otro gran error? Usar una imagen pobre en miniatura porque es lo más grande posible. Si la imagen es mala, simplemente no la use. Ninguna imagen es mejor que una imagen pobre.
Solución: asegúrese de eliminar las miniaturas o vistas previas antiguas cuando cambien las imágenes y que su favicon esté actualizado.
Error: nombres inescrutables y metadatos
Las cámaras digitales guardan mucha información en varios metacampos que no se traducen a la web. Elimine esta información de las imágenes y cámbiela por datos utilizables. Los motores de búsqueda no pueden leer el contenido de las imágenes, por lo que para que las imágenes se puedan buscar deben incluir palabras descriptivas en el título, las etiquetas y el contenido circundante.
Ejemplos de nombres de imagen pobres:
- picture1.jpg
- DSCN00023.jpg
- gafas% y% watch.jpg
Un nombre de imagen mucho mejor incluye algunas palabras descriptivas como gafas-y-reloj-y-planta.jpg. La etiqueta de referencia para la imagen debe incluir una descripción similar, como "artículos en un mostrador de gafas, reloj y una planta". (Y asegúrese de deletrear las palabras correctamente).
Solución: utilice convenciones de nomenclatura fuertes para todas las imágenes del sitio web y empareje imágenes con contenido relacionado con cada imagen. Los nombres de las imágenes deben incluir palabras descriptivas separadas por guiones.
Error: escalado o estiramiento incorrecto
Nada parece más extraño que una persona con una cara estirada o una imagen que está escalada incorrectamente. El estiramiento o el escalado no proporcional de imágenes (que puede ser especialmente común cuando se produce un cambio de tema o de fondo) es un no-no. Cada imagen debe ser escalada con una relación de 1 a 1, vertical y horizontalmente. Cualquier otra cosa daña la integridad de la foto.
Solución: Mire todas las proporciones de escala de cerca y audite su sitio periódicamente.
Error: No planificar para múltiples tamaños de dispositivo
Los marcos de diseño receptivos tienen algunas implicaciones para las imágenes. El cambio de forma o tamaño de un dispositivo a otro o por orientación hace que sea importante dictar cómo se representarán las imágenes en los dispositivos.
Una de las prácticas más comunes es utilizar consultas de medios para planificar estos cambios por dispositivo. El CSS permite que se apliquen estilos específicos a las imágenes según las dimensiones de la pantalla y ayuda a que las imágenes se reproduzcan bien sin "romper" el diseño.
Solución: utilice consultas de medios para marcos receptivos y pruebe la representación de imágenes en varios dispositivos.
Error: Ignorar las pantallas de retina
Hubo un tiempo no hace mucho tiempo en que una imagen estándar de 600 píxeles de ancho a 72 ppp era todo lo que necesitabas para un sitio web. Pero las pantallas están mejorando a un ritmo en el que ese ya no es el caso.
Dependiendo de su marco, cada imagen puede incluir múltiples imágenes guardadas para diferentes tamaños y resoluciones de pantalla, incluidas las pantallas retina. (La resolución de las pantallas de retina puede variar según el dispositivo, pero son significativamente más altas que las pantallas estándar).
Solución: incluya archivos y consultas multimedia que sean específicamente para pantallas retina. (CSS-Tricks puede ayudar).
Error: Arte sobreutilizado o genérico
La fotografía de archivo puede ser una gran solución rápida, pero puede tener algunas consecuencias no deseadas. Las fotos que se usan en demasiados sitios web o que simplemente tienen un aspecto genérico para ellas no crearán una imagen que establezca una conexión con los usuarios. (¿No quieres que tu sitio web se parezca a todos los demás, verdad?)
Si planea usar fotografía de stock, considere imágenes que puede editar o trabajar de manera interesante. Evite las imágenes que parecen cosas que ha visto en otros lugares (vea las imágenes de todos los competidores o sitios similares).
Solución: considere contratar a un fotógrafo para crear un excelente archivo de imagen específico para su sitio web. Incluya imágenes que se relacionen con su empresa o marca y reflejen su sitio de la manera correcta.
Conclusión
Seleccionar y crear imágenes para un proyecto de sitio web puede ser una de las partes más divertidas del proceso de diseño. Tenga cuidado con cada imagen y píxel para asegurarse de que su sitio funcione bien e incluya imágenes que atraigan a los usuarios.
¿Tienes algún consejo o truco cuando se trata de usar imágenes para proyectos de sitios web? Nos encantaría saber cuáles son. Compártelos en los comentarios.
