Optimización de imagen 101: archivos más pequeños, páginas más nítidas
Abra la pestaña de red de su navegador en casi cualquier sitio web y verá la misma historia: las imágenes representan la mayor parte del peso de la página. También son la forma más fácil de ganar en rendimiento web. No necesitas refactorizar tu código base, solo debes dejar de publicar imágenes que sean más grandes de lo necesario.
La velocidad de la página no es vanidad. Es un factor de clasificación de Google confirmado a través de Core Web Vitals, y la imagen más grande en pantalla suele ser lo que determina su puntuación de pintura con contenido más grande (LCP). Aquí se explica cómo arreglar las imágenes correctamente, en orden.
Paso 1: cambia el tamaño antes de subir
El error más común es publicar una foto de 4000 px directamente desde la cámara de un teléfono en una ranura de 800 px. El navegador descarga todos esos píxeles desperdiciados y luego los reduce. Cambie el tamaño de la imagen al tamaño más grande que realmente se mostrará primero: utilice nuestro cambiador de tamaño de imagen gratuito. Este paso a menudo reduce el tamaño del archivo en un 80% o más.
Paso 2: Comprimir sin pérdida visible
Después de cambiar el tamaño, comprimir. La mayoría de las fotografías pueden reducir su tamaño entre un 40% y un 70% sin una pérdida de calidad perceptible, porque JPEG y WebP descartan detalles que el ojo apenas registra. Nuestro compresor de imágenes le permite establecer el equilibrio entre calidad y tamaño y obtener una vista previa del resultado antes de descargarlo.
Paso 3: Utilice formatos modernos
WebP ofrece la misma calidad visual que JPEG y PNG en una fracción del tamaño y es compatible con todos los navegadores modernos. La documentación WebP de Google informa de un ahorro de entre un 25% y un 35% en comparación con archivos JPEG comparables. Convierta sus archivos con JPG a WebP o PNG a WebP. Si alguna vez necesitas volver atrás, WebP to JPG también se encarga de eso.
Paso 4: Elija el formato correcto para el trabajo
- Fotografías: WebP o JPEG: excelente compresión para imágenes complejas.
- Logotipos, íconos, arte lineal: SVG o PNG: bordes nítidos, transparencia, pequeño para gráficos simples.
- Cualquier cosa que contenga texto: evite JPEG, que difumina los bordes nítidos; utilice PNG o WebP.
Paso 5: Ayude a que el navegador se cargue de forma inteligente
Agregue atributos ancho y alto para que el navegador reserve espacio y evite cambios de diseño (la métrica CLS). Utilice loading="lazy" en las imágenes de la mitad inferior de la página para que solo se carguen cuando sea necesario y deje que la imagen más importante de la mitad superior de la página se cargue con entusiasmo. Las prácticas recomendadas de imágenes de Google también enfatizan el texto alt descriptivo, bueno para la accesibilidad y para la clasificación en Google Imágenes.
Paso 6: publicar tamaños adaptables
Un teléfono y un monitor de 27 pulgadas no deberían descargar la misma imagen. El atributo srcset permite al navegador elegir el tamaño más apropiado para cada pantalla, de modo que los usuarios de dispositivos móviles no sean castigados con archivos del tamaño de una computadora de escritorio. Incluso un simple srcset de dos o tres tamaños puede reducir drásticamente los datos en los dispositivos donde más importa. Si su CMS o marco ofrece imágenes responsivas, active la función: es una de las opciones de mayor impacto disponibles.
Paso 7: Mide la ganancia
No adivines: verifica. Ejecute su página a través del verificador de velocidad de página antes y después para ver la mejora real en el tiempo de carga y Core Web Vitals. Preste especial atención a la pintura con contenido más grande (LCP): si su imagen principal fue el cuello de botella, verá que desaparece inmediatamente.
Un flujo de trabajo rápido de antes y después
- Cambie el tamaño de la imagen a su tamaño de visualización real.
- Comprimirlo y observar la calidad.
- Convertir a WebP.
- Agregue ancho, alto, alt y carga diferida.
- Vuelva a probar la página y confirme la mejora de LCP.
Ejecute ese bucle en sus tres o cuatro imágenes más pesadas y capturará la gran mayoría de las ganancias de velocidad disponibles.
No te olvides del SEO de imágenes
Las imágenes optimizadas no sólo se cargan más rápido, sino que también pueden generar tráfico por sí solas. Los nombres de archivo descriptivos ("blue-running-shoes.webp" superan a "IMG_4821.webp") y el texto alternativo significativo lo ayudan a clasificar en Google Imágenes y hacen que su sitio sea accesible para los usuarios de lectores de pantalla. Elegir el formato correcto también es importante aquí; nuestra guía para JPG vs PNG vs WebP vs SVG desglosa exactamente cuándo usar cada uno.
Conclusión
Cambie el tamaño, comprima, convierta a WebP, establezca dimensiones, realice carga diferida y proporcione tamaños responsivos. Haga esas cosas y la mayoría de los sitios obtendrán la mayor ganancia de rendimiento con el menor esfuerzo: páginas más rápidas, visitantes más felices, mejor accesibilidad y un empujón mensurable en las clasificaciones.
