Optimizar imágenes para la web en Windows

Optimiza imágenes para la web en Windows con un flujo de trabajo basado en el redimensionado, comparaciones de formatos, variantes responsivas, comprobaciones visuales y entrega medida en producción.

Empieza por la solicitud de red, no por la exportación del diseño. Una foto de producto de 3000 píxeles puede parecer correcta en una tarjeta de 640 píxeles porque CSS la escala hacia abajo, pero el navegador sigue transfiriendo el archivo grande. El flujo de trabajo de Windows que se describe a continuación detecta esa discrepancia, crea variantes sensatas y comprueba la página después del despliegue.

Encontrar las imágenes que más cuestan

Abre la página en Microsoft Edge, pulsa F12, selecciona Network (Red), recarga y filtra por Img. Ordena por tamaño transferido. Registra tres datos para cada solicitud costosa:

Las dimensiones en píxeles del archivo.
Su ancho renderizado en el panel Elements (Elementos).
Si está por encima del pliegue o se carga más tarde.

Un elemento hero renderizado a 1200 píxeles puede necesitar una fuente de 1920 o 2400 píxeles para pantallas densas. Rara vez necesita la exportación original de cámara de 6000 píxeles. Una tarjeta renderizada a 360 píxeles no debería solicitar el mismo archivo que el elemento hero.

Redimensionar una imagen en Paint

Paint es suficiente para corregir una única fuente sobredimensionada:

Abre la imagen y elige Resize and skew (Redimensionar y sesgar).
Mantén activada la opción Maintain aspect ratio (Mantener relación de aspecto).
Introduce el ancho en píxeles requerido, no un porcentaje estimado a partir del tamaño del archivo.
Usa Save as (Guardar como) para que el archivo maestro permanezca intacto.

Para una tarjeta de 640 píxeles, crea un candidato estándar de 800 píxeles y un candidato para pantallas densas de 1280 píxeles. Comprueba el texto pequeño y los bordes finos del producto después del redimensionado. Si la fuente contiene transparencia, no la guardes como JPEG.

Redimensionado por lotes con PowerToys

Microsoft PowerToys incluye Image Resizer , que añade comandos de redimensionado al Explorador de archivos. Define anchos que coincidan con los puntos de ruptura reales del sitio, como 480, 960 y 1600 píxeles, y crea copias en lugar de reemplazar los originales.

PowerToys es útil para las dimensiones, pero no es una canalización de entrega completa. El nombrado de archivos, la conversión de formatos, el marcado responsivo y la revisión visual siguen siendo importantes. Coloca los candidatos generados en una carpeta separada para que no se confundan con el arte fuente.

Elegir JPEG, PNG, WebP o AVIF

Activo	Formato de entrega sensato	Comprobar de cerca
Foto de producto o editorial	WebP, AVIF o JPEG	Textura, degradados, tonos de piel
Captura de pantalla con texto pequeño	PNG o WebP de alta calidad	Bordes de glifos y líneas finas
Logotipo o icono	SVG cuando la fuente es vectorial	Cuadro de visualización correcto y etiqueta accesible
Transparencia con sombras suaves	WebP o PNG	Halos en fondos claros y oscuros

No conviertas todos los PNG a JPEG. Esto puede eliminar la transparencia y crear anillos alrededor del texto. Tampoco conviertas una foto JPEG a PNG; suele aumentar el tamaño del archivo sin restaurar los detalles perdidos. Consulta compresión con pérdida y sin pérdida para conocer el compromiso subyacente.

Entregar imágenes responsivas correctamente

La compresión por sí sola no hace que una imagen sea responsiva. Proporciona candidatos de ancho y deja que el navegador seleccione uno:

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google recomienda elementos de imagen estándar, texto alt útil, candidatos responsivos y un elemento de reserva src en su guía de SEO de imágenes . El ancho y el alto reservan el espacio de diseño. El texto alt debe describir el propósito de la imagen, no repetir una lista de palabras clave.

Verificar el resultado en Edge

Recarga con la caché desactivada a anchos de escritorio y móvil. Confirma que el navegador elige el candidato srcset esperado, que el elemento hero no desplaza el diseño y que el texto sigue siendo legible. Luego usa PageSpeed Insights o datos de campo para determinar si los cambios en las imágenes han mejorado la página real. Google trata las Core Web Vitals como una parte de la experiencia de página, no como un sustituto del contenido útil.

Para imágenes de producto no lanzadas, mantén la conversión local hasta la publicación. Consulta riesgos de privacidad de los compresores en línea en Windows antes de enviar activos bajo embargo a un servicio de terceros.

Cuándo GetCompress encaja en la preparación de activos web

Paint y PowerToys son suficientes para redimensionados ocasionales. GetCompress es la mejor opción cuando un equipo de Windows recibe repetidamente fuentes mixtas de PNG, JPEG, HEIC, TIFF y otras que necesitan dimensiones consistentes, variantes de formato y revisión visual. Los preajustes guardados y las colas por lotes preparan copias de entrega locales antes de que entren en el repositorio o el CMS.

No sustituye el marcado responsivo, la configuración de CDN, el almacenamiento en caché o la medición del rendimiento. Prueba la página desplegada y mantén los archivos maestros separados de los activos web generados.