Dimensionar imágenes: evita fotos gigantes

Mida el ancho máximo con el que se renderiza la imagen, duplíquelo para pantallas de alta densidad y redimensione su biblioteca a ese número. Servir una fotografía de 4000 píxeles en un espacio de 800 píxeles significa que el navegador descarga aproximadamente 25 veces más datos de píxeles de los que puede mostrar, para luego descartar el resto.

En una conexión móvil, el visitante paga por todo ello, tanto en tiempo como en datos. Dimensionar correctamente las imágenes suele ser la mayor reducción individual del peso de la página disponible para un sitio, y se realiza en un solo lote en lugar de requerir un rediseño.

Por qué las imágenes sobredimensionadas cuestan tanto

El tamaño del archivo escala con el número de píxeles, por lo que reducir a la mitad el ancho y el alto elimina aproximadamente el 75 por ciento de los datos. La relación es cuadrática en lugar de lineal, razón por la cual el desperdicio crece rápidamente.

La primera fila es el caso común en sitios donde los editores suben imágenes directamente desde una cámara. El navegador descarga 4.2 MB, reduce su escala y muestra el equivalente a un archivo de 180 KB.

Cómo medir el tamaño de visualización real

Haga clic derecho en la imagen en su página activa, elija Inspeccionar y lea las dimensiones mostradas en lugar de las intrínsecas. Los navegadores informan ambas cifras, y la diferencia entre ellas es el desperdicio.

Compruebe el caso más ancho en lugar del típico. Una imagen dentro de la columna de un artículo puede renderizarse a 700 píxeles en escritorio y a 380 en un teléfono, por lo que 700 es el número que importa. Realice la prueba en la ventana de navegador más ancha que utilicen sus visitantes de manera realista, ya que un banner de ancho completo crece con el viewport y necesita un cálculo diferente.

La regla de duplicación para pantallas de alta densidad

Multiplique el ancho de visualización por 2 y deténgase ahí, porque las pantallas que superan esa densidad no muestran ninguna mejora adicional que alguien note. Una imagen que se muestra a 700 píxeles debe exportarse a 1400.

Ocasionalmente se sugiere triplicar, pero rara vez está justificado. La diferencia entre 2 y 3 veces la densidad es indetectable a una distancia de visualización normal, mientras que el archivo crece más de la mitad. Comprimir más a 2 veces la densidad produce un mejor resultado que comprimir ligeramente a 3 veces, porque los píxeles adicionales ocultan la compresión.

Anchos de visualización comunes para redimensionar

• Imagen del cuerpo del artículo: se muestra a unos 700 px, exportar a 1400 px.
• Hero de ancho completo: se muestra hasta a 1920 px, exportar a 1920 px y comprimir más.
• Imagen destacada de medio ancho: se muestra a unos 600 px, exportar a 1200 px.
• Miniatura de cuadrícula de productos: se muestra a unos 300 px, exportar a 600 px.
• Foto de autor o de perfil: se muestra a unos 80 px, exportar a 160 px.
• Logo en un encabezado: se muestra a unos 180 px, exportar a 360 px o usar gráficos vectoriales.

Por qué las imágenes de ancho completo son la excepción

Un banner de ancho completo no tiene un tamaño de visualización fijo, así que limítelo a 1920 píxeles y comprímalo más en lugar de duplicarlo. Duplicar una imagen de ancho completo a 3840 píxeles produce un archivo que ninguna página puede justificar.

Los banners se suelen ver a distancia y contienen menos detalles finos que la fotografía de un producto, lo que significa que una compresión agresiva es menos notoria en ellos. Un banner de 1920 píxeles con calidad 70 en WebP suele quedar por debajo de los 200 KB y se ve correcto en todas las pantallas, mientras que la versión de 3840 píxeles no ofrece ningún beneficio visible con 4 veces más peso.

Cómo solucionar una biblioteca entera

Para redimensionar correctamente un sitio existente, siga estos 6 pasos.

1. Haga una lista de los espacios para imágenes en su diseño, que normalmente son de 4 a 6 tamaños distintos en lugar de docenas.
2. Mida el ancho de visualización de cada espacio utilizando el inspector del navegador en una página activa.
3. Duplique cada ancho para obtener su tamaño de exportación.
4. Organice la biblioteca en carpetas por espacio, ya que un lote aplica un solo tamaño a cada archivo que contiene.
5. Redimensione cada carpeta a su ancho objetivo, luego comprima y convierta en el mismo paso.
6. Reemplace los archivos manteniendo los mismos nombres para que las páginas existentes sigan funcionando.

Organizar en carpetas es el paso que convierte esto en un trabajo por lotes. La mayoría de los sitios utilizan muchos menos tamaños de imagen distintos de los que suponen, y agrupar por espacio elimina la necesidad de procesar los archivos individualmente.

Imágenes adaptables y el atributo srcset

Use srcset para ofrecer varios tamaños y permitir que el navegador elija el adecuado para cada dispositivo. De este modo, un teléfono descarga un archivo de 400 píxeles mientras que un ordenador de escritorio descarga un archivo de 1400 píxeles desde el mismo código.

Genere 3 anchos por imagen, comúnmente 400, 800 y 1600 píxeles, y lístelos con sus anchos en píxeles para que el navegador pueda elegir. La mayoría de los gestores de contenido producen esto automáticamente al subir la imagen, así que compruebe lo que ya hace su plataforma. En los casos en que lo haga, subir un original correctamente dimensionado seguirá mejorando cada variante generada.

Redimensionar antes de comprimir, siempre

Redimensionar primero significa que la compresión tiene menos trabajo que hacer, por lo que la calidad puede mantenerse alta mientras el archivo sigue siendo pequeño. Comprimir primero y redimensionar después descarta detalles que luego volverá a desechar.

El orden también afecta al aspecto del resultado. Una imagen comprimida a tamaño completo contiene artefactos que se vuelven más visibles cuando la imagen se reduce, ya que los artefactos se escalan con ella. Redimensionar primero produce una fuente más limpia para el codificador y un resultado notablemente mejor con el mismo tamaño de archivo.

Qué le hace esto a la velocidad de la página

Dimensionar correctamente las imágenes suele eliminar del 60 al 90 por ciento del peso de las imágenes en un sitio que nunca lo ha hecho. La mejora es mayor que cualquier cambio de formato y, por lo general, mayor que todas las demás optimizaciones combinadas.

El efecto se concentra en los visitantes móviles, donde las conexiones son más lentas y los datos cuestan dinero. El Largest Contentful Paint mejora directamente, ya que esa métrica normalmente se decide por una sola imagen grande. Superar la auditoría de dimensionar correctamente las imágenes en Lighthouse con frecuencia elimina 2 o 3 advertencias relacionadas al mismo tiempo.

Nunca amplíe una imagen para ajustarla

Ampliar añade píxeles que la cámara nunca capturó, por lo que el resultado es borroso y el archivo crece sin ningún beneficio. Reducir el tamaño siempre es seguro, mientras que ampliarlo es la única operación que se ve peor con total seguridad.

Cuando una imagen de origen es más pequeña que el espacio que debe llenar, las opciones honestas son usarla en su tamaño natural, recortar el diseño a su alrededor o reemplazar la imagen. Ampliar una fotografía de 600 píxeles a 1600 píxeles produce un archivo borroso con 4 veces el peso del original, lo que falla tanto en calidad como en velocidad al mismo tiempo.

Comprobar si una página tiene imágenes sobredimensionadas

Abra las herramientas de desarrollo, vaya a la pestaña Red, filtre por imágenes y vuelva a cargar la página. La lista muestra cada imagen con su tamaño transferido, ordenada de mayor a menor.

Vale la pena investigar cualquier imagen individual que supere los 500 KB, y cualquier página donde las imágenes sumen más de 2 MB tiene un problema. Pase el cursor sobre una imagen en el panel Elementos para ver sus tamaños intrínseco y mostrado uno al lado del otro. Una gran diferencia entre los 2 números es la definición de una imagen mal dimensionada, y se hace visible en segundos.

Redimensionar una biblioteca en un solo lote

Establezca el ancho objetivo una sola vez y aplíquelo a cada archivo de una carpeta, en lugar de redimensionar las imágenes individualmente. Una biblioteca de varios cientos de imágenes se redimensiona en minutos cuando el trabajo se realiza por lotes.

Suelte hasta 500 archivos a la vez, o arrastre un archivo ZIP directamente, y configure el ancho, el formato y el objetivo de compresión para todo el conjunto. Todo se ejecuta dentro de su navegador en su propio procesador, por lo que los sitios de clientes, los recursos de prueba y las galerías sin publicar nunca llegan a un servidor. No se sube nada, lo que significa que el rediseño de tamaño de una biblioteca completa ocurre sin que un solo archivo cruce la red.