Elige el formato ideal y tipo de imagen para tu Web
Aspectos que determinan el tamaño del archivo
Tipo de Imagen
Vectoriales
Se basan en coordenadas matemáticas que definen su posición, forma, color y otros atributos. Estos vectores dibujan elementos geométricos como puntos, líneas, polígonos o segmentos.
Cómo están basados en fórmulas matemáticas, tienen una resolución infinita. Se pueden ampliar o reducir sin que su calidad se vea afectada.
Mapa de Bits
También llamadas imágenes rasterizadas o bitmaps, están formadas por una cuadrícula de puntos llamados píxeles, que se organizan en una rejilla. Cada uno de esos píxeles tiene un color definido por un valor.
Si se amplía o disminuye el tamaño, los píxeles que componen la imagen se ven obligados a multiplicarse o dividirse provocando una pérdida de la calidad de la imagen. (Lo que conocemos como imagen pixelada)
Profundidad de Color (Cantidad de Colores)
La profundidad de color (bits por píxel) es la cantidad de bits de información necesarios para representar el color de un píxel en una imagen digital.
El formato de la imagen preestablece la profundidad de color.
24 Bits / 16.7 Mill. Colores
Tamaño de Archivo: 45.5 Kb
8 Bits / 8 Colores
Tamaño de Archivo: 19.5 Kb
Tamaño en Píxeles
La unidad para medir las imágenes son los píxeles (px) y el tamaño se mide en Ancho x Alto;
La imagen mide 300 x 300 px
Tamaño del Archivo: 45.5 Kb
La imagen mide 450 x 300 px
Tamaño del Archivo: 57.6 Kb
Imágenes Complejas vs Simples
Fotografía
Ilustración
Composición
Relación entre Complejidad y Tamaño de archivos
La cantidad de bytes COMPRIMIDOS, está determinado por la cantidad de pixeles con información similar o igual presentes en la imagen.
Usar el Formato Adecuado
JPG
Compresión Vs Calidad
Si se comprime demasiado la se pixela fácilmente en zonas de alto contraste, bordes muy definidos o tipografías.
Equilibro entre calidad y tamaño de archivo
MUY COMPRIMIDO
Calidad Baja “0”
Peso del Archivo: 75.7 Kb
COMPRESIÓN MEDIA
Calidad Media “6”
Peso del Archivo: 137.8 Kb
COMPRESIÓN BAJA
Calidad Máxima “12”
Peso del Archivo: 561.7 Kb
GIF
Imágenes animadas o muy pocos colores y tamaños pequeños.
Gif a 2 Colores: Blanco y Transparente
Peso del Archivo: 9.5 Kb
Gif animado
Peso del Archivo: 71 Kb
Gif animado
Peso del Archivo: 2.5 Kb
Gif animado
Peso del Archivo: 10.5 Kb
DEMO
Puedes explorar los siguientes enlaces para verificar las diferencias de rendimiento.
Página con imágenes sin optimizar
GTmetrix:
- Tiempo de Carga: 2.1 Seg.
- Tamaño total: 2.22 MB
- Solicitudes: 35
Página con imágenes optimizadas
GTmetrix:
- Tiempo de Carga: 1.8 Seg.
- Tamaño total: 1.19 MB
- Solicitudes: 35