📄 Objetivo
Comprender la diferencia técnica fundamental entre las imágenes compuestas por píxeles y las basadas en fórmulas matemáticas, analizando su comportamiento al ser escaladas en un entorno web.
🧪 Experimento de Escalabilidad
En la actividad práctica, insertamos un archivo .jpg y un .svg, aplicando una transformación CSS para ampliarlos al 300% de su tamaño original.
Al realizar esta acción, el JPG muestra una pérdida crítica de nitidez (pixelado), mientras que el SVG mantiene sus bordes perfectamente definidos.
📊 Tabla Comparativa
| Característica | Mapa de Bits (Ráster) | Vectorial |
|---|---|---|
| Definición | Imagen compuesta por una cuadrícula de puntos individuales de color llamados píxeles. | Imagen construida a partir de fórmulas matemáticas que definen puntos, líneas y curvas. |
| Escalabilidad | Limitada. Al ampliar se estiran los píxeles causando pérdida de calidad. | Infinita. Se puede escalar a cualquier tamaño sin perder nitidez. |
| Tamaño de archivo | Generalmente más grande. Depende de la resolución. | Generalmente muy pequeño. Depende de la complejidad de los nodos. |
| Formatos comunes | .JPG, .PNG, .GIF, .BMP, .TIFF, .WebP | .SVG, .EPS, .AI, .PDF |
| Usos principales | Fotografías e imágenes fotorrealistas con texturas detalladas. | Logotipos, iconos, tipografías e ilustraciones planas. |
| Edición | Modificación de píxeles individuales (Adobe Photoshop, GIMP). | Manipulación de nodos y curvas (Adobe Illustrator, Inkscape). |
| Compatibilidad Web | Total. Soporte nativo en todos los navegadores. | Excelente. El SVG es el estándar ideal para diseño responsive. |
| Rendimiento | Puede ralentizar la web si es pesada. WebP mejora este punto. | Excelente; carga casi instantáneamente como código plano. |
| Captura zoom | Bordes con "escaleras" dentadas y borrosas al hacer zoom. | Borde perfectamente nítido y suave sin importar el aumento. |