Cómo utilizar imágenes de manera óptima cuando administras un sitio web
Esta guía para principiantes explica simplemente cuáles son los diferentes formatos de archivos de imágenes y cómo utilizarlos correctamente en tu sitio web.
Cualquiera que sea el tema de los sitios web, las imágenes están omnipresentes: desde el logotipo hasta las fotografías de los productos o de los miembros del equipo, las imágenes están absolutamente en todas partes.
Hemos agregado imágenes en nuestros sitios web desde hace décadas, pero ¿Lo estamos haciendo bien? Esta pregunta puede parecer extraña para muchos de nosotros, pero según lo que observo en los sitios web de mis clientes, no es una pregunta tan estúpida.
En este artículo, explicaré cómo utilizar imágenes de manera óptima cuando administras un sitio web. Dado que esta guía está destinada principalmente a principiantes, explicaremos qué tipo de archivo de imagen utilizar en tu sitio, según la situación. Pasaremos de lo más clásico (el debate JPEG vs PNG) a lo más reciente (WebP y AVIF).
Imágenes JPEG: perfectas para fotografías y fondos
Comencemos con las imágenes JPEG (archivos .jpg y .jpeg), los archivos de imágenes más comunes utilizados en la web. Son rasterizadas y, como tales, toleran bastante mal las ampliaciones, pero toleran bastante bien las reducciones. También pueden comprimirse para que los visitantes los carguen más rápidamente, en detrimento de su calidad visual.
• Imagen rasterizada: visualización correcta después de la reducción, pobre después de la ampliación
• Compresión destructiva: peso reducido del archivo a expensas de la calidad
• Úsalas a 72 ppp para la web y 300 ppp para la impresión.
Imagen: Logotipo de Joomla en formato JPG
Cuándo usar y no usar imágenes JPEG
| ✅ | ❌ |
|---|---|
| Las imágenes JPEG están bien para los fondos. Su compresión les permite ser más livianas que sus equivalentes PNG y la reducción de calidad es aceptable para una imagen de fondo. | JPEG no admite transparencia. Si la imagen debe mostrarse en primer plano y el fondo debe verse detrás, no debes utilizar el formato JPEG. |
| ¿Un reportaje fotográfico? ¡Utiliza JPEG!Es el formato de salida estándar para cámaras digitales, por lo que también puedes aprovecharlo. | Los bordes son menos claros en imágenes JPEG. Para un logotipo, gráfico o diagrama, elige otro formato. |
| Los textos son menos legibles en imágenes JPEG. Si el texto es importante (eslogan de la empresa, carta del restaurante), podrías considerar elegir otro formato. |
Imágenes PNG, perfectas para imágenes claras con fondos transparentes
La contraparte del formato JPEG es el formato PNG (archivos .png). Rasterizado y equipado con compresión no destructiva, este formato admite transparencia y tiene una representación más clara, pero presenta archivos más pesados.
• Imagen rasterizada: visualización correcta después de la reducción, pobre después de la ampliación
• Compresión no destructiva sin pérdidas: peso reducido del archivo sin pérdida de calidad
• Soporta la transparencia
Imagen: Logotipo de Joomla en formato PNG
Cuándo usar y no usar imágenes PNG
| ✅ | ❌ |
|---|---|
| Las imágenes PNG tienen su lugar en primer plano. Su nitidez y detalles las hacen muy atractivas y su fondo transparente les permite integrarse perfectamente sobre el fondo de la página. | No utilices el formato PNG para archivos grandes. Una fotografía de varios megapíxeles pesará mucho más en formato PNG. |
| Las imágenes PNG simples también se pueden utilizar como fondos.. Simple significa con pocos detalles, es decir, no una fotografía. Pero ten cuidado con el tamaño del archivo. | |
| Las imágenes PNG tienen una representación clara de textos y contornos. Es perfecto para imágenes donde el texto es dominante (logotipo con eslogan, menú de restaurante) o cuando hay formas geométricas presentes como gráficos, diagramas, etc. |
GIF animados, perfectos para animaciones de baja definición
Las animaciones GIF (archivos .gif) se crean a partir de la rápida sucesión de imágenes rasterizadas limitadas a 256 colores. Estaban de moda cuando se utilizaron anuncios publicitarios llamativos y llamadas a la acción intermitentes (un poco demasiado). Hoy en día lo encontramos cada vez menos en sitios y cada vez más en aplicaciones de mensajería instantánea.
• Imagen rasterizada: visualización correcta después de la reducción, pobre después de la ampliación
• Paleta de colores limitada: máximo de 256 colores
• Soporta la transparencia
Imagen: Logotipo de Joomla en formato GIF
Cuándo usar y no usar imágenes GIF
| ✅ | ❌ |
|---|---|
| Las imágenes GIF te permiten mostrar pequeñas animaciones (preloader). Varias están disponibles aquí.. | No es posible controlar la animación GIF.. No es posible iniciar, detener y rebobinar una animación GIF. Se reproduce en bucle y listo. |
| Las animaciones GIF te permiten animar imágenes con una cantidad reducida de colores. Una tarjeta de felicitación, por ejemplo, o un diagrama explicativo. | |
| Una animación GIF te permite mostrar unos segundos de una película. Esto es bastante común en blogs, redes sociales, etc. |
Vector SVG, perfecto para ilustraciones y logotipos
Dejemos el mundo de los formatos rasterizados y pasemos al formato SVG (archivos .svg), que es vectorial. Como resultado, soporta fácilmente cambios de tamaño, tanto de ampliación como de reducción. Las imágenes SVG siempre son perfectamente nítidas, mientras que otros formatos sólo son nítidos cuando se muestran en el tamaño correcto.
• Imagen vectorial: visualización perfecta sea cual sea el tamaño
• Por defecto, ligero y rápido de cargar y mostrar.
• Soporta la transparencia
Cuándo usar y no usar archivos SVG
| ✅ | ❌ |
|---|---|
| El formato SVG es perfecto para ilustraciones y logotipos.. Si hay texto, no olvides vectorizarlo. | El formato SVG es incompatible con las fotos.. Lo sentimos, ¡el mundo real no es vectorial! |
| Las imágenes SVG siempre son nítidas. Solo un archivo y puedes ver cualquier tamaño en el sitio.. | ¡Ten cuidado con el renderizado en los navegadores! Por ejemplo, el antiguo Internet ExplorerSe sabe que no aprecia los degradados en las imágenes SVG. |
| Usuarios avanzados: Las imágenes SVG admiten algunas animaciones CSS. |
Formato WebP, perfecto para usos modernos
A medida que la optimización web se vuelve cada vez más importante, han surgido nuevos formatos de imágenes como WebP. Más comprimido, con una representación equivalente, es compatible con los navegadores más modernos. Este formato permite un tiempo de carga de la página más corto y, por lo tanto, evita perder visitantes tan pronto como llegan al sitio. Su uso también se recomienda en el contexto del SEO.
• Imagen rasterizada: visualización correcta después de la reducción, pobre después de la ampliación
• Compresión destructiva con pérdidas con resultados más rápidos y claros que el formato JPEG.
• Soporta la transparencia
Imagen: El formato WebP hoy en día es ampliamente compatible en ordenadores y dispositivos móviles (fuente caniuse.com)
Cuándo usar y no usar el formato WebP
| ✅ | ❌ |
|---|---|
| Se deben utilizar imágenes WebP además de imágenes JPEG y PNG. Tienen un amplio soporte, sería una pena ignorarlas. | No es útil utilizar el formato WebP en un sitio de intranet de una empresa cuando el navegador recomendado por la empresa no lo admite. |
Cómo utilizar una imagen WebP
Los formatos de imagen modernos no se utilizan directamente en las páginas web, que conservan referencias a imágenes clásicas (JPEG, PNG, etc.). Los archivos en formatos modernos se almacenan en la misma carpeta que las versiones de imágenes clásicas. Luego, el servidor web se configura para ofrecer automáticamente versiones modernas a navegadores compatibles cuando solicitan imágenes clásicas.
Fuentes de iconos, perfectas para la Web
Este artículo no estaría completo sin mencionar las fuentes de iconos (archivos .woff y .woff2). Te permiten utilizar iconos como si fueran un carácter normal (tamaño de fuente, color, etc.). La más famosa es la biblioteca Font Awesome, que contiene muchos iconos, o el servicio IcoMoon, que te permite crear tus propias fuentes.
• Fuente: visualización perfecta sea cual sea el tamaño
• Un solo archivo para cargar, miles de íconos disponibles
Logotipo de apañados en formato ico
Cuándo usar y no usar una fuente de icono
| ✅ | ❌ |
|---|---|
| Las fuentes de íconos son útiles para íconos de un solo color que se usan en muchos lugares como redes sociales, botones de compartir, botones de menú, búsqueda, viñetas, paginación, etc. | Sin icono multicolor. Cada icono mostrado tendrá solo un color. |
| Las fuentes de los iconos siempre son nítidas. Cada caracter se basa en una imagen vectorial. |
Conclusión
Espero que hayas aprendido un poco más sobre los diferentes tipos de imágenes que se pueden utilizar en un sitio web. Depende de ti decidir qué formato utilizar en función del resultado deseado.
Es común poder usar un tipo u otro en la misma ubicación (un logotipo con fondo transparente puede usar una imagen PNG del tamaño correcto así como una imagen vectorial SVG), pero este artículo debería brindarte algunos consejos para tomar la decisión correcta.
