Optimizar imágenes para la web en Mac

El sitio de marketing obtiene buenas puntuaciones en todo excepto en el peso de las imágenes. Los héroes son PNG de 2800 px de ancho, las fotos en línea son JPEG de cámara a resolución completa y la CDN almacena en caché fielmente cada byte. Optimiza las imágenes para la web redimensionándolas al ancho del diseño, eligiendo el formato adecuado y ajustando la calidad antes del despliegue.

Por qué las imágenes web parecen lentas

Los navegadores descargan los bytes completos del archivo incluso cuando CSS reduce el tamaño de visualización. Las fuentes grandes perjudican el LCP, los planes de datos móviles y los límites de carga del CMS.

Empieza con la regla de tamaño de visualización en cómo comprimir imágenes en Mac . Redimensiona antes de la conversión de formato cada vez.

Elección de formato para la web

Ajusta el formato al contenido y al soporte del navegador en tu stack.

Lee compresión con pérdida vs sin pérdida antes de codificar sin pérdida cada foto. WebP o JPEG con pérdida a calidad 80-85 suele ser suficiente para los héroes tras un redimensionado adecuado.

Para el paso de PNG a WebP, consulta PNG a WebP en Mac . Mantén un respaldo JPEG en <picture> o en la configuración de tu generador de sitios estáticos.

Tamaño, calidad y entrega responsiva

Exporta el ancho a aproximadamente 2x el ancho de la columna CSS para pantallas de alta densidad de píxeles.

Pautas de calidad tras el redimensionado:

• Héroes de foto: WebP o JPEG calidad 80-85
• Fotos de blog en línea: 75-82
• Capturas de pantalla con texto: verificar al 100% de zoom; preferir PNG o WebP de mayor calidad

Las imágenes responsivas en HTML usan srcset con múltiples anchos. Genera variantes 1x y 2x a partir de una exportación maestra cuando tu pipeline de construcción lo soporte.

La guía de SEO de imágenes de Google recomienda elementos de imagen estándar, candidatos responsivos con un respaldo src, nombres de archivo descriptivos y texto alt útil. La compresión ayuda a la entrega, pero no sustituye al marcado analizable ni a una descripción precisa de la imagen.

La carga diferida mejora la velocidad percibida, pero no reduce los bytes totales descargados cuando cada visitante desplaza todo el artículo. Las fuentes más pequeñas siguen siendo importantes para los límites de datos móviles y las facturas de CDN incluso cuando las imágenes cargan fuera de la pantalla inicial.

Prueba una página con un perfil 4G limitado en las herramientas de desarrollo del navegador tras cambiar los héroes. El waterfall de red debería mostrar cifras inferiores a 200 KB para las fotos en línea típicas del blog cuando los anchos coinciden con el diseño.

Flujo de exportación en Mac

Un flujo de trabajo local repetible supera a las cargas puntuales:

1. Exporta desde el diseño al ancho del diseño, no al tamaño de captura del monitor.
2. Redimensiona en Vista previa si la exportación se pasa (Herramientas → Ajustar tamaño…).
3. Convierte los héroes a WebP con cwebp en Terminal:

brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp

4. Exporta el respaldo JPEG coincidente desde la misma fuente PNG redimensionada.
5. Comprueba visualmente en el panel de red de las herramientas de desarrollo del navegador antes de la fusión.

oxipng tras el redimensionado ayuda a los activos PNG de transparencia que deben permanecer como PNG:

oxipng -o 4 --strip safe icon.png

Documenta las reglas de ancho, calidad y formato en el repositorio para que la próxima campaña no vuelva a exportaciones de lienzo 3x.

Procesamiento local para activos de staging

Los héroes no lanzados, capturas de pantalla de precios y la interfaz beta pertenecen al disco hasta el lanzamiento. Los optimizadores en línea reciben fuentes a resolución completa cuando subes los archivos.

Consulta son seguros los compresores de archivos en línea para saber qué significa la subida a terceros para la creatividad confidencial. Las aplicaciones locales y las herramientas de Terminal pueden procesar archivos sin enviarlos a un sitio web de compresión.

Elimina la ubicación EXIF de los héroes de foto cuando las etiquetas GPS no estén destinadas a páginas públicas. La eliminación de metadatos es un paso separado de la optimización de bytes, pero importa para la privacidad.

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

Vista previa, cwebp o un plugin de construcción son suficientes para un activo ocasional. GetCompress es la mejor opción cuando el diseño entrega repetidamente a ingeniería fuentes mixtas de PNG, JPEG, HEIC y otras que necesitan anchos consistentes, vistas previas y variantes en formato web. Los preajustes y las colas por lotes preparan esos archivos localmente antes de que entren en la construcción.

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