Optimización de imágenes
Qué es la optimización de imágenes, cómo afecta al rendimiento web y los errores que conviene evitar.
La optimización de imágenes reduce los bytes necesarios para servir una imagen y mantiene la calidad que necesita el caso de uso. Combina varios pasos: elegir un formato adecuado, redimensionar al tamaño mostrado, comprimir, eliminar los metadatos innecesarios y cargar las imágenes solo cuando hacen falta.
En la web, la optimización también abarca la entrega. El marcado de imágenes adaptables (los atributos srcset y sizes) permite que el navegador elija un archivo que se ajuste a la pantalla. La carga diferida aplaza las imágenes que quedan fuera de la pantalla, y una CDN sirve los archivos desde una ubicación cercana.
El resultado se mide en tamaño de archivo y en métricas de velocidad de página, como Largest Contentful Paint, una de las Core Web Vitals de Google.
Convertir formatos de imagen
Un cambio de formato suele dar el mayor ahorro. Image Converter convierte entre PNG, JPG y WebP en el navegador.
Por qué importa la optimización
Las imágenes suelen ser la parte más pesada de una página web. Las imágenes demasiado grandes ralentizan la carga en redes móviles, consumen datos de los visitantes y pueden bajar las puntuaciones de velocidad de la página. Los archivos más pequeños también facilitan manejar repositorios de documentación, adjuntos de correo y exportaciones a PDF.
Técnicas de optimización
- Redimensionar al tamaño mostrado más grande, por ejemplo 2 veces el ancho CSS en pantallas de alta densidad.
- Elegir el formato según el contenido: PNG para interfaces planas, JPG o WebP para fotos.
- Usar una calidad con pérdida entre 75 y 85 y comparar recortes ampliados.
- Eliminar los metadatos que no se necesitan, pero conservar el perfil de color cuando el color importa.
- Cargar de forma diferida las imágenes que quedan por debajo del pliegue.
Optimización de capturas de pantalla
Una captura Retina de una ventana de 1440 píxeles de ancho tiene 2880 píxeles de ancho. Si una página de documentación la muestra con 720 píxeles CSS, un archivo de 1440 píxeles cubre pantallas 2× y tiene una cuarta parte del número de píxeles.
En Temposhot, para compartir, elige JPG Export (Adjustable Quality) con una calidad de 1 a 100 (predeterminada, 85), y conserva PNG Export (Lossless) para las copias maestras. Website Capture guarda JPEG, PNG o WebP directamente.
Errores comunes
- Subir capturas Retina completas para miniaturas pequeñas.
- Comprimir capturas de texto tanto que las letras se emborronan.
- Convertir todo a un único formato sin tener en cuenta el contenido.
- Optimizar la única copia y perder el original.
¿Necesitas corregir una imagen ahora?
Reduce el tamaño del archivo con Image Compressor, y comprueba antes el tamaño en píxeles con Screenshot Resolution Checker.
Preguntas frecuentes
¿Debo usar WebP para las capturas de mi sitio?
WebP suele dar archivos más pequeños que PNG o JPG con una calidad similar, y los navegadores actuales lo admiten.
¿Qué tamaño debe tener una captura de documentación?
Unas 2 veces su ancho CSS mostrado cubre las pantallas de alta densidad sin desperdiciar bytes.
Fuentes
Recursos relacionados
- Formatos de exportación: opciones de PNG, JPG y WebP.
- Carga diferida: aplazar las imágenes que están fuera de la pantalla.
¿Repites las mismas capturas de pantalla una y otra vez?
Temposhot captura una pantalla, una ventana o un área con temporizador y exporta el conjunto como PDF, imágenes, ZIP o MP4. Las herramientas gratuitas para navegador solo sirven para imágenes sueltas.
Recursos relacionados
Términos relacionados
- Compresión de imágenesQué es la compresión de imágenes, la diferencia entre compresión con pérdida y sin pérdida, y los errores comunes al comprimir capturas de pantalla.
- Redimensionado de imágenesQué es el redimensionado de imágenes, en qué se diferencia del recorte y los errores que evitar al escalar capturas de pantalla.
- Carga diferidaCómo funciona la carga diferida, por qué afecta a la captura de pantallas y las técnicas para detectar y gestionar el contenido cargado de forma diferida.
- Formato de imagenVisión general de los formatos de imagen comunes (PNG, JPG, WebP y AVIF) y cuándo usar cada uno.
- Compresión sin pérdidaQué es la compresión sin pérdida, qué formatos de imagen la admiten y cuándo importa conservar los píxeles exactamente.