Imagen para el sitio web
Las imágenes en la web vienen en muchos formatos, como JPEG, GIF, PNG y otros. De hecho, hay tantos acrónimos que hacer un seguimiento de ellos puede ser complicado, por no hablar de averiguar cuál es el mejor formato de imagen para utilizar en su sitio web. En esta guía se analizan las ventajas de JPEG frente a PNG y GIF.
Sin embargo, es importante reflexionar sobre esta cuestión, ya que los formatos que utilice para las imágenes de su sitio tienen un impacto. Algunos tipos de gráficos se ven mejor y no ocupan tanto espacio de almacenamiento, por ejemplo, lo que se traduce en un mejor rendimiento sin pérdida de calidad.
En la mayoría de los casos, querrá limitarse a utilizar uno o dos formatos de imagen en todo su sitio web, para mantener un estándar consistente. Lo ideal es que los formatos que elijas ofrezcan un buen equilibrio entre calidad y rendimiento.
Como hemos mencionado antes, hay algunos formatos de imagen que se utilizan mucho más en línea que otros. Las tres opciones que vamos a presentar a continuación son algunos de los formatos más populares y útiles, lo que los convierte en opciones perfectas para casi cualquier sitio web.
Tipos de diseño
Los principales formatos de archivo web son el gif (pronunciado “jiff”), el jpeg (“jay-peg”) y, en mucha menor medida, los archivos png (“ping”). Los tres formatos gráficos habituales en la web son los llamados gráficos de mapa de bits, formados por una cuadrícula de miles de diminutos elementos de imagen cuadrados de colores, o píxeles. Los archivos de mapa de bits son los tipos familiares de archivos producidos por los teléfonos móviles y las cámaras digitales, y son fácilmente creados, editados, redimensionados y optimizados para su uso en la web con herramientas ampliamente disponibles como Photoshop o Elements de Adobe, Paint Shop Pro y Painter de Corel, y otros programas de edición de fotos.
Para que el envío a través de Internet sea eficiente, prácticamente todos los gráficos de la web se comprimen para mantener el tamaño de los archivos lo más pequeño posible. La mayoría de los sitios web utilizan imágenes gif y jpeg. Elegir entre estos tipos de archivo es en gran medida una cuestión de valoración:
El Servicio de Información CompuServe popularizó el Formato de Intercambio Gráfico (gif) en la década de 1980 como medio eficaz para transmitir imágenes a través de las redes de datos. A principios de la década de 1990, los diseñadores originales de la World Wide Web adoptaron el gif por su eficiencia y amplia familiaridad. Los archivos gif incorporan un esquema de compresión “sin pérdidas” para mantener el tamaño de los archivos al mínimo sin comprometer la calidad. Sin embargo, los archivos gif son gráficos de 8 bits y, por lo tanto, sólo pueden albergar 256 colores.
Diseño de páginas web de ilustración
Las imágenes deben tener alternativas de texto que describan la información o función que representan. Esto garantiza que las imágenes puedan ser utilizadas por personas con diversas discapacidades. Este tutorial muestra cómo proporcionar alternativas de texto adecuadas en función del propósito de la imagen:
Para obtener una visión general sobre cómo decidir en qué categoría encaja una imagen concreta, consulte el Árbol de decisión de alt. La alternativa de texto debe ser determinada por el autor, dependiendo del uso, el contexto y el contenido de una imagen. Por ejemplo, el tipo y el aspecto exactos de un pájaro en una imagen pueden ser menos relevantes y describirse sólo brevemente en un sitio web sobre parques, pero pueden ser apropiados en un sitio web específicamente sobre pájaros.
Las imágenes y los gráficos hacen que el contenido sea más agradable y fácil de entender para muchas personas, y en particular para las que tienen problemas cognitivos y de aprendizaje. Sirven como pistas que utilizan las personas con deficiencias visuales, incluidas las de baja visión, para orientarse en el contenido.
Por qué las imágenes son importantes en los sitios web
Las imágenes suelen ser las que más contribuyen al tamaño total de la página, lo que puede hacer que las páginas sean lentas y caras de cargar. Asegúrese de aplicar las últimas técnicas de optimización de imágenes y de imágenes responsivas para ofrecer una experiencia de usuario rápida y de alta calidad.
Las fotos de alta calidad atraen más a los usuarios que las imágenes borrosas y poco claras. Además, las imágenes nítidas son más atractivas para los usuarios en la miniatura del resultado y aumentan la probabilidad de obtener tráfico de usuarios.
A la hora de elegir el texto alternativo, céntrate en crear un contenido útil y rico en información que utilice adecuadamente las palabras clave y esté en contexto con el contenido de la página. Evite llenar los atributos alt con palabras clave (keyword stuffing), ya que da lugar a una experiencia negativa para el usuario y puede hacer que su sitio se considere spam. Considere también la accesibilidad de su texto alternativo y añada el atributo alt si es necesario, según las directrices W3.
También puede alinear imágenes como URIs de datos. Los URIs de datos proporcionan una manera de incluir un archivo, como una imagen, en línea estableciendo el src de un elemento img como una cadena codificada en Base64 utilizando el siguiente formato:
