La primera pregunta que debes hacerte es si, en realidad, se requiere una imagen para lograr el efecto que buscas. 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 siempre es la mejor estrategia de optimización. Dicho esto, una imagen bien ubicada también puede comunicar más información que mil palabras, así que depende de ti encontrar ese equilibrio.
A continuación, debes considerar si hay una tecnología alternativa que podría ofrecer mejores resultados, pero de una manera más eficiente:
- Los efectos de CSS (como sombras o gradientes) y las animaciones de CSS se pueden usar para producir recursos independientes de la resolución que siempre se ven nítidos en cada resolución y nivel de zoom, a menudo con una fracción de los bytes que requiere un archivo de imagen.
- Las fuentes web permiten usar hermosos tipos de letra y, al mismo tiempo, conservar la capacidad de seleccionar, buscar y cambiar el tamaño del texto, lo que representa una mejora significativa en la usabilidad.
Si alguna vez codificas texto en un recurso de imagen, detente y reconsidera tu decisión. Una buena tipografía es fundamental para un buen diseño, desarrollo de la marca y legibilidad, pero el texto en imágenes ofrece una experiencia del usuario deficiente: el texto no se puede seleccionar, buscar, acercar ni acceder a él, y no es apto para dispositivos de alta densidad de píxeles. 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 adecuado para el trabajo.
- Los gráficos vectoriales usan líneas, puntos y polígonos para representar una imagen.
- Los gráficos raster 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 menos complejas, como logotipos, texto o íconos. Ofrecen resultados nítidos en todas las resoluciones y parámetros de zoom, lo que los convierte en un formato ideal para pantallas y recursos de alta resolución que deben mostrarse en diferentes tamaños.
Sin embargo, los formatos vectoriales no son suficientes cuando la escena es complicada (por ejemplo, una foto): la cantidad de marcado SVG para describir todas las formas puede ser prohibitivamente alta y el resultado puede no verse "fotorrealista". Cuando ese sea el caso, debes usar un formato de imagen de trama, como PNG, JPEG, WebP o AVIF.
Las imágenes raster no tienen las mismas propiedades agradables de ser independientes de la resolución o el zoom. Cuando aumentes el tamaño de una imagen raster, verás gráficos irregulares y borrosos. Como resultado, es posible que debas guardar varias versiones de una imagen raster en varias resoluciones para brindar una experiencia óptima a tus usuarios.
Implicaciones de las pantallas de alta resolución
Existen dos tipos diferentes de píxeles: píxeles CSS y píxeles del dispositivo. Un solo píxel CSS puede corresponder directamente a un solo píxel del dispositivo o puede estar respaldado por varios píxeles del dispositivo. ¿De qué sirve? Bueno, cuanto más píxeles tenga el dispositivo, más detallado será el contenido que se muestra en la pantalla.
Las pantallas con alta densidad de píxeles (HiDPI) producen resultados hermosos, 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. Es posible que debas pagar un costo de procesamiento más alto para renderizar los detalles más finos, pero el recurso subyacente es el mismo y no depende de la resolución.
Por otro lado, las imágenes de trama representan un desafío mucho mayor, ya que codifican los datos de imagen por píxel. Por lo tanto, cuanto mayor sea la cantidad de píxeles, mayor será el tamaño del archivo de una imagen raster. Considera la diferencia entre un recurso de foto que se muestra en 100 × 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 |
| 2x | 100 × 100 × 4 = 40,000 | 160,000 bytes |
| 3x | 100 × 100 × 9 = 90,000 | 360,000 bytes |
Cuando duplicamos la resolución de la pantalla física, la cantidad total de píxeles aumenta en un factor de cuatro: el doble de la cantidad de píxeles horizontales por el doble de la cantidad de píxeles verticales. Por lo tanto, una pantalla "2x" no solo duplica, sino que cuadruplica la cantidad de píxeles necesarios.
Entonces, ¿qué significa esto en la práctica? Las pantallas de alta resolución te permiten mostrar imágenes hermosas, lo que puede ser una gran función del producto. Sin embargo, las pantallas de alta resolución también requieren imágenes de alta resolución, por lo que debes tener en cuenta lo siguiente:
- Siempre que sea posible, prefiere las imágenes vectoriales, ya que no dependen de la resolución y siempre ofrecen resultados nítidos.
- Si se requiere una imagen rasterizada, publica imágenes responsivas.
Características de los diferentes formatos de imagen de trama
Además de los diferentes algoritmos de compresión con y sin pérdidas, los diferentes formatos de imagen admiten diferentes funciones, como animación y canales de transparencia (alfa). Como resultado, la elección del "formato correcto" para una imagen en particular es una combinación de los resultados visuales y los requisitos funcionales adecuados.
| Formato | Transparencia | Animación | Navegador |
|---|---|---|---|
| PNG | Sí | Sí (APNG) | Todos |
| JPEG | No | No | Todos |
| WebP | Sí | Sí | Todos los navegadores modernos Consulta ¿Puedo usar? |
| AVIF | Sí | Sí | Todos los navegadores modernos Consulta ¿Puedo usar? |
Existen dos formatos de imagen de trama compatibles de forma universal: PNG y JPEG. Además de estos formatos, los navegadores modernos admiten los formatos de imagen WebP y AVIF más recientes. Ambos 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 proporcionan 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. Consulta Cómo usar imágenes WebP para obtener más detalles.
En términos de formatos de imagen más antiguos, ten en cuenta lo siguiente:
- ¿Necesitas animación? Usa elementos
<video>.- ¿Qué sucede con los GIFs? GIF limita la paleta de colores a un máximo de 256 colores y crea tamaños de archivo mucho más grandes que los elementos
<video>. El APNG ofrece más colores que el GIF, pero también es mucho más grande que los formatos de video de calidad visual razonablemente equivalente. Consulta Cómo reemplazar GIFs animados por videos.
- ¿Qué sucede con los GIFs? GIF limita la paleta de colores a un máximo de 256 colores y crea tamaños de archivo mucho más grandes que los elementos
- ¿Necesitas preservar los detalles finos con la resolución más alta? Usa PNG o WebP sin pérdida.
- El PNG no aplica ningún algoritmo 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 mayor calidad, pero con un tamaño de archivo significativamente mayor que otros formatos. Úsalo con prudencia.
- WebP tiene un modo de codificación sin pérdida que puede ser más eficiente que PNG.
- Si el recurso de imagen contiene imágenes compuestas de formas geométricas, considera convertirlo a un formato vectorial (SVG).
- Si el recurso de imagen contiene texto, detente y reconsidera tu decisión. El texto de las imágenes no se puede seleccionar, buscar ni acercar. Si necesitas transmitir un aspecto personalizado (por motivos de 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.
- JPEG usa una combinación de optimización con pérdida y sin pérdida para reducir el tamaño del archivo del recurso de imagen. Prueba varios niveles de calidad de JPEG para encontrar la mejor relación entre calidad y tamaño de archivo para tu recurso.
- El WebP o el AVIF con pérdida son excelentes alternativas a JPEG para imágenes de calidad web, pero ten en cuenta que el modo con pérdida descarta cierta información para lograr imágenes más pequeñas. Esto significa que es posible que algunos colores no sean iguales a los de un JPEG equivalente.
Por último, ten en cuenta que, si usas un WebView para renderizar contenido en tu aplicación específica de la plataforma, tienes el control total del cliente y puedes usar WebP de forma exclusiva. Facebook y muchos otros usan WebP para entregar todas sus imágenes en sus aplicaciones. Los ahorros definitivamente valen la pena.
Impacto en el procesamiento de imagen con contenido más grande (LCP)
Las imágenes pueden ser candidatos para LCP. Esto significa que el tamaño de una imagen afecta su tiempo de carga. Cuando una imagen es un candidato para el LCP, codificarla de forma eficiente es fundamental para mejorarlo.
Debes esforzarte por aplicar los consejos que se brindan en esta guía 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, ya que mide la rapidez con la que se muestra el elemento más grande (y, por lo tanto, más perceptible) de la página.