Lo primero que debes hacerte es si una imagen es de hecho, necesarias para lograr el efecto que buscas. Si puedes eliminar un recurso de imagen, que suele requerir 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. 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, hay que considerar si existe una tecnología alternativa que pueda ofrecer mejores resultados pero de una manera más eficiente.
- Efectos de CSS (como sombras o gradientes) y animaciones CSS se pueden usar para producir recursos independientes de la resolución que siempre se ven nítidos en todas las resoluciones y niveles de zoom. a menudo a una fracción de los bytes que requiere un archivo de imagen.
- Las fuentes web permiten usar tipos de letra atractivos. y, a la vez, se preserva la capacidad de seleccionar, buscar y cambiar el tamaño del texto, lo que representa una mejora significativa en la usabilidad.
Si alguna vez ves que codificas 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 imágenes brinda una mala experiencia del usuario: el texto no se puede seleccionar, no se puede buscar, no se puede ampliar no es accesible y no es compatible con dispositivos con valores altos de PPP. 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 correcto
Si tienes la certeza de que una imagen es la opción correcta, debes seleccionar cuidadosamente el tipo adecuado para el trabajo.
- Gráficos vectoriales usan líneas, puntos y polígonos para representar una imagen.
- Gráficos de trama representar 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 constan de formas geométricas menos complejas, como logotipos, texto o íconos. Brindan resultados nítidos en cualquier resolución y configuración de zoom. por lo que son el formato ideal para pantallas de alta resolución y recursos que deben mostrarse en diferentes tamaños.
Sin embargo, los formatos vectoriales son insuficientes cuando la escena es complicada (por ejemplo, una foto): la cantidad de lenguaje de marcado SVG para describir todas las formas puede ser muy alto. y es posible que el resultado no parezca "fotorrealista". En ese caso, 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 del zoom. : Cuando amplíes una imagen de trama, verás gráficos dentados y desenfocados. Como resultado, es posible que debas guardar varias versiones de una imagen de trama en distintas resoluciones. para brindar una experiencia óptima a tus usuarios.
Implicaciones de las pantallas de alta resolución
Existen dos tipos diferentes de píxeles: CSS y píxeles de dispositivo. Un solo píxel de CSS puede corresponder directamente a un solo píxel de dispositivo o estar respaldado por varios píxeles de dispositivos. ¿De qué sirve? Cuantos más píxeles de dispositivo haya, más finos serán los detalles del contenido que se muestra en la pantalla.
Las pantallas con valores altos de PPP (HiDPI) producen resultados atractivos, pero existe una compensación obvia: los recursos de imagen requieren más detalles para aprovechar la mayor cantidad de píxeles de los dispositivos. La buena noticia es que las imágenes vectoriales son ideales para esta tarea ya que se pueden representar en cualquier resolución con resultados nítidos. se puede generar un mayor costo de procesamiento para procesar los detalles más sutiles pero el activo subyacente es el mismo y es independiente de la resolución.
Por otro lado, las imágenes de trama plantean un desafío mucho mayor porque codifican los datos de la 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 de trama. Ten en cuenta la diferencia entre un recurso de foto que se muestra a 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 |
| 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 de a cuatro: el doble de píxeles horizontales y multiplicado por el doble de la cantidad de píxeles verticales. Por lo tanto, una regla "2x" la pantalla 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 capturar imágenes atractivas, lo que puede ser una excelente característica del producto. Sin embargo, las pantallas de alta resolución también requieren imágenes de alta resolución y, por lo tanto, sucede lo siguiente:
- Usa imágenes vectoriales siempre que sea posible, ya que no dependen de la resolución y siempre brindan 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). Por ello, la elección del "formato correcto" de una imagen específica es una combinación de los resultados visuales adecuados y los requisitos funcionales.
| Formato | Transparencia | Animación | Navegador |
|---|---|---|---|
| PNG | Sí | Sí (APNG) | Todos |
| JPEG | No | No | Todos |
| WebP | Sí | Sí | Todos los navegadores actualizados Consulta ¿Puedo usarlo? |
| AVIF | Sí | Sí | Todos los navegadores actualizados Consulta ¿Puedo usarlo? |
Existen dos formatos de imagen de trama universalmente admitidos: 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?
WebP y AVIF generalmente brindan una mejor compresión que los formatos anteriores. y debe 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 información.
En términos de los formatos de imagen anteriores, ten en cuenta lo siguiente:
- ¿Necesitas animaciones? Usa elementos
<video>.- ¿Qué ocurre con los GIFs? Este formato limita la paleta de colores a un máximo de 256 colores
y crea archivos de tamaños mucho más grandes que los elementos
<video>. APNG Ofrece más colores que los GIF, pero también es mucho más grande que los videos. formatos con una calidad visual razonablemente equivalente. Consulta Reemplaza GIF animados por videos.
- ¿Qué ocurre con los GIFs? Este formato limita la paleta de colores a un máximo de 256 colores
y crea archivos de tamaños mucho más grandes que los elementos
- ¿Necesitas conservar los detalles sutiles con la resolución más alta? Usa PNG o WebP sin pérdida.
- 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á imágenes de la más alta calidad, pero a un costo de archivos de un tamaño 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 a un formato vectorial (SVG).
- Si el recurso de imagen contiene texto, vuelve a pensarlo. El texto de las imágenes no se puede seleccionar, buscar ni "acercar". Si quieres dar un aspecto personalizado (para el desarrollo de la marca o por otros motivos), usa una fuente web.
- ¿Deseas optimizar una foto, una captura de pantalla o un recurso de imagen similar? Usa JPEG, WebP con pérdida o AVIF.
- En este formato, se usa una combinación de optimización con y sin pérdida para reducir el tamaño del archivo del recurso de imagen. Prueba con varios niveles de calidad JPEG para encontrar la mejor relación entre calidad y tamaño de archivo para tu recurso.
- Los archivos WebP con pérdida o AVIF con pérdida son excelentes alternativas en formato JPEG para las imágenes de calidad web, pero ten en cuenta que el modo con pérdida descarta parte de la información para lograr imágenes más pequeñas. Esto significa que es posible que los colores de selección no sean los mismos que un JPEG equivalente.
Por último, ten en cuenta que si usas una WebView para renderizar contenido en tu aplicación específica de la plataforma, entonces tendrás el control total del cliente y podrás usar WebP exclusivamente. Facebook y muchos otros usan WebP para entregar todas sus imágenes dentro de 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 de LCP. Esto significa que el tamaño de una imagen afecta su tiempo de carga. Cuando una imagen es candidata para el LCP, codificar esa imagen de manera eficiente es crucial para mejorar el LCP.
Debes esforzarte por aplicar los consejos proporcionados en esta guía para que el rendimiento perceptivo de una página sea lo más rápido posible para todos los usuarios. El LCP forma parte del rendimiento perceptivo, ya que mide qué tan rápido se muestra el elemento más grande (y, por lo tanto, el más perceptible) de la página.