La primera pregunta que debes hacerte es si una imagen es realmente necesaria para lograr el efecto que buscas. Un buen diseño es simple y siempre te brindará el mejor rendimiento. Si puedes eliminar un recurso de imagen, que a menudo requiere una gran cantidad de bytes en relación con HTML, CSS, JavaScript y otros recursos de la página, esa es siempre la mejor estrategia de optimización. Dicho esto, una imagen bien ubicada también puede comunicar más información que mil palabras, por lo que depende de ti encontrar ese equilibrio.
A continuación, debes considerar si existe una tecnología alternativa que pueda proporcionar los resultados deseados, pero de una manera más eficiente:
- Los efectos CSS (como sombras o gradientes) y las animaciones CSS se pueden usar para producir recursos independientes de la resolución que siempre se vean nítidos en todas las resoluciones y todos los niveles de zoom, a menudo en una fracción de los bytes que requiere un archivo de imagen.
- Las fuentes web permiten usar tipos de letra atractivos y, al mismo tiempo, conservan la capacidad de seleccionar, buscar y cambiar el tamaño del texto, lo que representa una mejora significativa en la usabilidad.
Si alguna vez necesitas codificar texto en un recurso de imagen, detente a reconsiderar tu decisión. Una buena tipografía es fundamental para lograr un buen diseño, desarrollo de la marca y legibilidad, pero el texto en las imágenes brinda una experiencia del usuario deficiente: el texto no se puede seleccionar, no se puede buscar, no se puede acercar ni se puede acercar, y no es compatible con dispositivos con valores altos de DPI. El uso de fuentes web requiere su propio conjunto de optimizaciones, pero aborda todas estas inquietudes y siempre es una mejor opción para mostrar texto.
Elige el formato de imagen adecuado
Si estás seguro de que una imagen es la opción correcta, debes seleccionar cuidadosamente el tipo de imagen correcto para el trabajo.
- Los gráficos vectoriales usan líneas, puntos y polígonos para representar una imagen.
- Los gráficos de trama representan una imagen codificando los valores individuales de cada píxel dentro de una cuadrícula rectangular.
Cada formato tiene sus propias ventajas y desventajas. Los formatos vectoriales son ideales para imágenes que consisten en formas geométricas simples, como logotipos, texto o íconos. Proporcionan resultados nítidos en todos los parámetros de resolución y configuración de zoom, lo que los convierte en un formato ideal para pantallas de alta resolución y recursos que deben mostrarse en diferentes tamaños.
Sin embargo, los formatos vectoriales no son eficientes cuando la escena es complicada (por ejemplo, una foto): la cantidad de lenguaje de marcado SVG para describir todas las formas puede ser restrictivamente alta y el resultado puede no parecer "fotorrealista". Cuando esto sucede, debes usar un formato de imagen de trama, como PNG, JPEG, WebP o AVIF.
Las imágenes de trama no tienen las mismas propiedades atractivas de ser independientes de la resolución o el zoom. Cuando amplíes una imagen de trama, verás gráficos dentados y borrosos. Como resultado, es posible que debas guardar varias versiones de una imagen de trama en distintas resoluciones para brindar una experiencia óptima a los usuarios.
Consecuencias de las pantallas de alta resolución
Existen dos tipos diferentes de píxeles: los píxeles CSS y los píxeles de dispositivo. Un píxel de CSS único puede corresponder directamente a un único píxel de dispositivo o estar respaldado por varios píxeles de dispositivos. ¿Cuál es el punto? Cuantos más píxeles de dispositivo haya, mejor será el detalle del contenido que se muestra en la pantalla.
Las pantallas con valores altos de DPI (HiDPI) producen resultados atractivos, pero hay una compensación obvia: los recursos de imagen requieren más detalles para aprovechar la mayor cantidad de píxeles del dispositivo. La buena noticia es que las imágenes vectoriales son ideales para esta tarea, ya que se pueden renderizar en cualquier resolución con resultados nítidos. Podrías generar un costo de procesamiento mayor para renderizar los detalles más precisos, pero el elemento subyacente es el mismo y no depende de la resolución.
Por otro lado, las imágenes de trama presentan un desafío mucho mayor porque codifican los datos de la imagen por píxel. Por lo tanto, cuantos más píxeles sean los píxeles, mayor será el tamaño de archivo de una imagen de trama. A modo de ejemplo, consideremos la diferencia entre un recurso de foto que se muestra con 100 x 100 píxeles (CSS):
| Resolución de pantalla | Píxeles totales | Tamaño del archivo sin comprimir (4 bytes por píxel) |
|---|---|---|
| 1x | 100 × 100 = 10,000 | 40,000 bytes |
| 2 veces más rápido | 100 x 100 x 4 = 40,000 | 160,000 bytes |
| 3x | 100 x 100 x 9 = 90,000 | 360,000 bytes |
Cuando duplicamos la resolución de la pantalla física, la cantidad total de píxeles aumenta por cuatro: el doble de la cantidad de píxeles horizontales y el doble de la cantidad de píxeles verticales. Por lo tanto, una pantalla “2x” no solo se duplica, sino que cuadruplica la cantidad de píxeles requeridos.
¿Qué significa esto en la práctica? Las pantallas de alta resolución te permiten mostrar imágenes hermosas, lo que puede ser una excelente función del producto. Sin embargo, las pantallas de alta resolución también requieren imágenes de alta resolución; por lo tanto, sucede lo siguiente:
- Opta por imágenes vectoriales siempre que sea posible, ya que son independientes de la resolución y siempre proporcionan resultados nítidos.
- Si se requiere una imagen de trama, publica imágenes responsivas.
Funciones de diferentes formatos de imagen de trama
Además de los diferentes algoritmos de compresión con y sin pérdida, los diferentes formatos de imagen admiten distintas funciones, como los canales de animación y transparencia (alfa). Como resultado, la elección del “formato correcto” para una imagen específica es una combinación de los resultados visuales deseados y los requisitos funcionales.
| Formato | Transparencia | Animación | Navegador |
|---|---|---|---|
| PNG | Sí | No | All |
| JPEG | No | No | All |
| WebP | Sí | Sí | Todos los navegadores modernos. Consulta ¿Puedo usar la aplicación? |
| AVIF | Sí | Sí | No. Consulta ¿Puedo usar la aplicación? |
Existen dos formatos de imagen de trama universalmente compatibles: PNG y JPEG. Además de estos formatos, los navegadores modernos admiten el formato WebP más nuevo, mientras que solo algunos admiten el formato AVIF más reciente. Los dos formatos más nuevos ofrecen una mejor compresión general y más funciones. Entonces, ¿qué formato deberías usar?
Por lo general, WebP y AVIF ofrecen una mejor compresión que los formatos anteriores, y deben usarse siempre que sea posible. Puedes usar imágenes WebP o AVIF junto con una imagen JPEG o PNG como resguardo. Para obtener más información, consulta Cómo usar imágenes WebP.
En términos de formatos de imagen antiguos, considera lo siguiente:
- ¿Necesitas animaciones? Usa elementos
<video>.- ¿Y los GIF? Este formato limita la paleta de colores a un máximo de 256 colores y crea tamaños de archivo significativamente más grandes que los elementos
<video>. Consulta Cómo reemplazar GIF animados por video.
- ¿Y los GIF? Este formato limita la paleta de colores a un máximo de 256 colores y crea tamaños de archivo significativamente más grandes que los elementos
- ¿Necesitas conservar los detalles con la máxima resolución? Usa PNG o WebP sin pérdidas.
- Este no aplica algoritmos de compresión con pérdida más allá de la elección del tamaño de la paleta de colores. Como resultado, producirá la imagen de la más alta calidad, pero a un costo significativamente mayor que otros formatos. Úsalo con cuidado.
- WebP tiene un modo de codificación sin pérdidas que puede ser más eficiente que PNG.
- Si el recurso de imagen contiene imágenes compuestas por formas geométricas, considera convertirlo en un formato vectorial (SVG).
- Si el recurso de imagen contiene texto, detente y vuelve a considerarlo. El texto en las imágenes no se puede seleccionar, buscar ni usar para ampliar. Si deseas darle una apariencia personalizada (para el desarrollo de la marca o por otros motivos), usa una fuente web.
- ¿Estás optimizando una foto, una captura de pantalla o un recurso de imagen similar? Usa JPEG, WebP con pérdida o AVIF con pérdida.
- En este formato se usa una combinación de optimización con y sin pérdida para reducir el tamaño de archivo del recurso de imagen. Prueba varios niveles de calidad JPEG para encontrar la mejor relación entre calidad y tamaño de archivo para tu recurso.
- Los formatos WebP con pérdida o AVIF con pérdida pueden ser alternativas aceptables para los archivos JPEG, pero ten en cuenta que, en particular, el modo con pérdida de WebP descarta cierta información de croma para lograr imágenes más pequeñas. Esto significa que los colores seleccionados pueden no ser iguales a un JPEG equivalente.
Por último, ten en cuenta que si usas WebView para renderizar contenido en la aplicación específica de la plataforma, tendrás control total sobre el cliente y podrás usar WebP de forma exclusiva. Facebook y muchos otros usan WebP para publicar todas las imágenes dentro de sus aplicaciones, y los ahorros realmente valen la pena.
Impacto en el Largest Contentful Paint (LCP)
Las imágenes pueden ser candidatos de LCP. Esto significa que el tamaño de una imagen afecta su tiempo de carga. Cuando una imagen es candidata para el LCP, codificarla de manera eficiente es crucial para mejorar el LCP.
Debes esforzarte por aplicar los consejos que se brindan en este artículo para que el rendimiento perceptual de una página sea lo más rápido posible para todos los usuarios. El LCP forma parte del rendimiento perceptual porque mide qué tan rápido se muestra el elemento más grande (y, por lo tanto, el más perceptible) de la página.