Image Optimization
Optimización de imágenes (rendimiento web)
El proceso de reducir el tamaño de los archivos de imagen al mínimo posible sin comprometer visiblemente la calidad, crucial para un rendimiento web rápido y una buena experiencia de usuario.
Detalle técnico
Un flujo de optimización incluye: selección de formato (AVIF > WebP > JPEG para fotos; SVG > PNG para gráficos), ajuste de calidad (75-85 JPEG es óptimo visualmente), eliminación de metadatos (datos EXIF, perfiles ICC no esenciales), imágenes responsivas (srcset/sizes para servir tamaños apropiados), y carga diferida (loading="lazy"). Herramientas como Sharp, libvips, Squoosh y los CDN de imágenes automatizan estos pasos.
Ejemplo
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```
Herramientas relacionadas
C
Compress Image
R
Resize Image
C
Crop Image
R
Rotate Image
F
Flip Image
C
Convert Image
W
Watermark Image
S
SVG to PNG
I
Image to Base64
R
Round Corners
A
Add Border
I
Image Filters
A
Adjust Image
B
Blur Image
S
Sharpen Image
M
Make Square
G
Grayscale Image
S
Sepia Image
P
Pixelate Image
S
Strip Image Metadata