Las imágenes grandes, 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 de su sitio web se ajuste a la pantalla y represente bien su marca.
Hay muchos errores que los diseñadores cometen en el camino, desde problemas técnicos hasta calidad de imagen. Pero no tienes que caer en una de estas trampas cuando trabajas con imágenes de sitios web. Aquí, echaremos un vistazo a los errores de imagen y cómo corregirlos o evitarlos por completo. (Como un bono en este post, presentamos una colección de imágenes divertidas y geniales de la colección Death Death to the Photo Stock).
Error: Subir archivos enormes
Las imágenes de tamaño completo son hermosas (y necesarias) cuando se trata de trabajos de impresión, pero pueden surgir problemas cuando se trata de la web. Las imágenes grandes se cargan lentamente; los 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 cargar imágenes grandes y, a menos que esté prestando atención, es posible que ni siquiera sepa que los archivos se están cargando en tamaños increíbles. Diferentes imágenes en diferentes usos requieren diferentes especificaciones de imagen. Consulte su marca o guía de sitio web para saber cuáles son las dimensiones de las áreas de imagen comunes en su sitio.
Al pensar en imágenes, el tipo de archivo también importa. 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 se necesita 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 tener ese tamaño).
Error: Olvidarse de la cosecha
Si bien el uso de grandes archivos puede atascar 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 la imagen también puede crear una pila de elementos visuales menos dinámica que todos tienen las mismas formas y relaciones de aspecto. El uso de múltiples cultivos y formas interesantes para 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 desea.
Error: Olvidarse de miniaturas
Hay varias formas de controlar 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 de su sitio.
Con mucha frecuencia, los diseñadores olvidan que las miniaturas, las vistas previas de imágenes y los favicons deberán actualizarse con los cambios en el contenido del sitio web.
¿El otro gran error? Usar una imagen deficiente en tamaño de miniatura porque es lo más grande que puede ser. Si la imagen es mala, simplemente no la uses. Ninguna imagen es mejor que una imagen pobre.
Solución: Asegúrese de eliminar las miniaturas antiguas o las vistas previas 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 campos de metadatos 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 hacerlas, las imágenes deben incluir palabras descriptivas en el título, las etiquetas alt y el contenido circundante.
Ejemplos de nombres de imágenes pobres:
- picture1.jpg
- DSCN00023.jpg
- gafas% y% watch.jpg
Un nombre de imagen mucho mejor incluye algunas palabras descriptivas, como gafas-y-ver-y-planta.jpg. La referencia de la etiqueta alt para la imagen debe incluir una descripción similar, como "artículos en un contador de gafas, reloj y una planta". (Y asegúrese de deletrear palabras correctamente).
Solución: Utilice convenciones de nomenclatura sólidas para todas las imágenes de sitios web y combine imágenes con contenido que se relacione con cada aspecto visual. Los nombres de las imágenes deben incluir palabras descriptivas separadas por guiones.
Error: escalamiento o estiramiento incorrecto
Nada se ve más extraño que una persona con una cara estirada o una imagen que se escala incorrectamente. El estiramiento o la escala no proporcional de las imágenes (lo que puede ser especialmente común cuando se produce un cambio de tema o final) es un no-no. Cada imagen debe escalarse con una proporción de 1 a 1, vertical y horizontalmente. Cualquier otra cosa daña la integridad de la foto.
Solución: Mire atentamente todas las proporciones de escala y audite su sitio periódicamente.
Error: no planear múltiples tamaños de dispositivos
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 en función de las dimensiones de la pantalla y ayuda a que las imágenes se reproduzcan bien sin romperse. el diseño.
Solución: Utilice consultas de medios para marcos sensibles 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 el que una imagen estándar de 600 píxeles de ancho a 72 ppi era todo lo que necesitaba para un sitio web. Pero las pantallas están mejorando a un ritmo en el que ya no es así.
Dependiendo de su marco, cada imagen puede incluir múltiples imágenes guardadas para diferentes tamaños de pantalla y resoluciones, incluyendo pantallas de 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 de medios que sean específicamente para pantallas de retina. (CSS-Tricks puede ayudar.)
Error: Arte en exceso o genérico
La fotografía de stock puede ser una gran solución rápida pero puede llevar a algunas consecuencias no deseadas. Las fotos que se usan en demasiados sitios web o que solo tienen una apariencia genérica no crearán una imagen visual que establezca una conexión con los usuarios. (No quieres que tu sitio web se vea como cualquier otro por ahí, ¿verdad?)
Si planea usar fotografía de stock, considere imágenes con las que pueda editar o trabajar de formas interesantes. Evite las imágenes que parecen objetos que ha visto en otros lugares (consulte las imágenes para todos los competidores o sitios similares).
Solución: Considere contratar a un fotógrafo para crear un gran 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.
¿Tiene algún consejo o truco a la hora de usar imágenes para proyectos de sitios web? Nos encantaría saber cuáles son. Compártelos en los comentarios.