Comprender los tipos de imágenes: una guía para desarrolladores

Sabemos que puede ser un desafío mantenerse al día con todos los tipos de archivos de imagen que se usan hoy en día. Para simplificar la situación, hemos compilado una guía que cubre cada formato de imagen popular en detalle. Nos enfocamos específicamente en los tipos de imágenes que usaría un desarrollador web: existen muchos más formatos de archivo, pero estos son los más populares en la web.

Para una inmersión profunda en AVIF, el formato de imagen de última generación más popular, consulte este artículo .

Al final de este artículo, sabrá cuándo y cómo usar todos los formatos de archivo de imagen que discutimos y puede estar seguro de elegir el correcto. Aprenderá cómo maximizar la calidad de la imagen manteniendo bajo el tamaño del archivo, aumentando así el rendimiento de sus sitios web y aplicaciones.

Para aprender a optimizar imágenes automáticamente y convertir formatos de imagen sobre la marcha, visite imgix.com.

Aquí hay una lista de los tipos de archivos de imagen que cubriremos en este artículo:

• GIF
• PNG
• PELEA
• JPG/JPEG
• JPEG2000
• JPEG XR
• BMP
• SVG
• HEIC/HEIF
• WEBP
• AVIF/AV1

¿Por qué hay tantos formatos de imagen?

La explicación más simple para la gran variedad de formatos de imagen es que cada uno tiene un propósito diferente. Los diferentes formatos de imagen también usan diferentes métodos de compresión, un proceso que codifica la información de un archivo para reducir su tamaño total y acelerar la descarga en una página web.

Debido a las diferencias en los algoritmos de compresión, algunos formatos de imagen generan tamaños de archivo más pequeños con la misma calidad de imagen, pero a expensas de funciones como la transparencia de la imagen.

Algunos formatos tienen propiedades que solo los hacen útiles para imágenes de un tipo particular. Por ejemplo, el formato SVG es un formato vectorial y se adapta perfectamente a los íconos, pero no es adecuado para fotografías porque se almacenan usando un formato de imagen diferente conocido como ráster.

Hablando de formatos de imagen, debemos aclarar estos y algunos otros términos comunes antes de sumergirnos en los tipos de imágenes. Analicemos brevemente la diferencia entre los formatos de imagen ráster y vectorial y la compresión sin pérdida versus con pérdida.

Ráster vs Vector

En el fondo, los formatos vectoriales definen una imagen como una serie de formas en lugar de almacenar información sobre el color de cada píxel en un campo.

Esta propiedad hace que las imágenes vectoriales como SVG se ajusten perfectamente a iconos, logotipos, gráficos y otros gráficos digitales, mientras que utiliza muy poco ancho de banda para cada imagen.

Por el contrario, los formatos de trama se componen de píxeles individuales y se utilizan mucho en la web debido a sus eficientes algoritmos de compresión.

Una de las principales diferencias entre los formatos ráster y los formatos vectoriales es que los formatos ráster no se pueden escalar desde su resolución original sin verse pixelados o borrosos.

El siguiente gráfico demuestra cómo la ampliación de una imagen conduce a la pixelación.

Fuente: Wikimedia Commons

Compresión sin pérdida vs con pérdida

Las imágenes requieren una gran cantidad de datos para mostrarse. Transferir todos esos datos en su forma original, ya sea a través de Internet o almacenados en su disco duro, es muy ineficiente. Para hacer que las imágenes sean más eficientes, aplicamos "compresión" a sus datos subyacentes.

La compresión utiliza enfoques matemáticos y de coincidencia de patrones para reducir los datos necesarios para transferir una imagen.

Si alguna vez ha usado un acrónimo, como "LOL" para decir "reír a carcajadas", entonces ha realizado una forma muy simple de compresión.

Para que la compresión funcione, tanto el remitente como el receptor deben saber que se aplica la compresión y qué algoritmo de compresión se utiliza.

El remitente debe saber cómo comprimir los datos de la imagen y el receptor debe saber cómo invertir la compresión o "descomprimir" para recuperar los datos de la imagen en su forma visualizable.

Hay muchos métodos diferentes para comprimir datos, pero todos caen en una de dos categorías: sin pérdida o con pérdida. Los algoritmos de compresión considerados "sin pérdidas" conservan los datos exactamente como estaban antes de comprimirlos.

Si bien los algoritmos sin pérdidas son eficientes, se puede obtener aún más eficiencia si los datos de la imagen se pueden preajustar de manera que sea más fácil comprimirlos.

Por ejemplo, si hay un montón de píxeles imperceptiblemente blanquecinos en su imagen, cambiarlos a blanco perfecto puede hacer que la imagen sea más fácil de comprimir. El usuario final que ve la imagen nunca notará la diferencia.

Sin embargo, dado que los datos cambian, se “pierde” una parte del detalle original para beneficiar la compresión. Esto se llama compresión "con pérdida".

En resumen, la compresión sin pérdidas significa que el tamaño de archivo de una imagen se puede reducir sin afectar su calidad. Por el contrario, la compresión con pérdida elimina cierta información (generalmente redundante) dentro de un archivo que no se puede recuperar.

Ahora que hemos cubierto estos términos (que aparecerán a medida que avancemos en cada tipo de imagen), hablemos más sobre los tipos de imágenes más comunes que se usan en la web.

GIF (formato de intercambio gráfico)

Descripción: el formato de intercambio de gráficos (GIF) es un formato de imagen de trama creado en 1987 y es el formato de archivo más antiguo que aún se usa con frecuencia en la actualidad. Las imágenes GIF utilizan un algoritmo de compresión conocido como codificación LZW para permitir un fácil almacenamiento y una mayor calidad de imagen comprimida.

Los GIF casi siempre se construyen de una manera que impone un límite de 256 colores en las imágenes, aunque técnicamente los GIF pueden admitir más variaciones de color.

Hoy en día, GIF es más famoso como formato para imágenes animadas. Una imagen animada combina varias imágenes (o fotogramas) en un archivo y los fotogramas se reproducen en sucesión. Una de las razones por las que los GIF son populares para la animación es que se hacen pasar por imágenes.

Puede cargar un GIF animado en una página sin necesidad de un reproductor de video. Si bien los GIF se usan comúnmente para la animación, no son una opción ideal debido a la calidad de resolución más baja y la forma en que se comprimen los cuadros (lo que da como resultado archivos de gran tamaño).

Ideal para: imágenes simples, como gráficos o logotipos, que requieren una transparencia simple.

Rendimiento: el rendimiento depende del número de fotogramas del GIF. Si hay demasiados marcos, el GIF tardará en cargarse en una página web debido a su tamaño de archivo más grande. Al crear una imagen GIF, puede ajustar la resolución de cada cuadro y la cantidad de cuadros que se muestran por segundo.

Naturalmente, cuanto mayor sea el valor de cuadros por segundo (FPS) y mayor sea la resolución de cada cuadro, más grande será el archivo GIF. Intente usar diferentes valores de FPS y diferentes resoluciones para encontrar la combinación óptima para su caso de uso.

En general, los GIF son muy difíciles de comprimir porque cada secuencia animada es un conjunto de imágenes independientes unidas. Incluso si algunas partes de la imagen son iguales entre fotogramas en un GIF, es difícil que un algoritmo de compresión identifique esas partes.

Esta limitación es una de las razones por las que el tamaño de archivo de una imagen GIF suele ser mayor que la misma secuencia de fotogramas en un vídeo MP4.

Calidad: los GIF usan un algoritmo de compresión sin pérdidas, pero la calidad de la imagen a menudo se degrada debido al prefiltrado (incluido el tramado, la sujeción y la cuantificación del color) relacionado con la conversión de imágenes a todo color de 24 bits en GIF paletizados de 8 bits.

Compatibilidad con navegadores: todas las versiones de Chrome, Edge, Firefox, Internet Explorer, Opera y Safari.

PNG (Gráficos de red portátiles)

Descripción: Portable Network Graphics (PNG) es un formato de archivo que usa compresión sin pérdidas. Las imágenes con transiciones nítidas y grandes áreas de color sólido (por ejemplo, gráficos o imágenes que contienen texto) se pueden comprimir mejor en formato PNG que, por ejemplo, en formato JPG.

Como resultado, con frecuencia encuentra imágenes PNG como capturas de pantalla e ilustraciones.

Las imágenes PNG se han vuelto estándar en la web porque ofrecen transparencia de imagen: puede colocar una imagen PNG transparente sobre otra imagen y crear el efecto de profundidad y varias capas.

Los PNG también admiten alfa completo, lo que significa que la imagen puede ser semitransparente. El efecto de semitransparencia permite, por ejemplo, tener sombras transparentes en una imagen PNG.

Ideal para: Gráficos, ilustraciones, pancartas y logotipos.

Rendimiento: los archivos PNG tienden a tener tamaños de archivo más grandes que los JPEG y SVG, por lo que son menos adecuados para la web si necesita una imagen de alta resolución con un tamaño de archivo más pequeño.

Calidad: las imágenes PNG utilizan compresión sin pérdidas y su representación de píxeles perfectos es ideal para gráficos de alto contraste. Algunos archivos PNG contienen hasta 16 millones de colores debido a su profundidad de color de 24 bits.

Compatibilidad con navegadores: todas las versiones de Chrome, Edge, Firefox, Internet Explorer, Opera y Safari.

TIFF (formato de archivo de imagen etiquetada)

Descripción: El formato de archivo de imagen etiquetada (TIFF) es un formato de imagen que se creó inicialmente para almacenar fotos escaneadas. El formato es más popular entre fotógrafos, editores de imágenes y editores, principalmente por razones históricas.

Ideal para: Gráficos de alta resolución y artes gráficas donde el tamaño del archivo no es un problema.

Rendimiento: los archivos TIFF se pueden comprimir o descomprimir; el formato admite múltiples opciones de compresión. Las imágenes TIFF no suelen ser compatibles con los navegadores web, por lo que usarlas para mostrar imágenes en la web no es una opción.

Calidad: los archivos TIFF son de muy alta calidad; por lo general, carecen por completo de compresión o usan compresión sin pérdidas, lo que los hace ideales para fotografías e imágenes escaneadas.

Compatibilidad con navegadores: Actualmente, ningún navegador es compatible con TIFF; solo se usa como formato de descarga.

JPG/JPEG (Grupo Conjunto de Expertos Fotográficos)

Descripción: un archivo del Grupo de expertos fotográficos conjuntos (JPEG/JPG) es el formato más utilizado para imágenes comprimidas con pérdida. Muchos se preguntan cuál es la diferencia entre los archivos JPG y JPEG, pero no la hay: las dos abreviaturas son completamente intercambiables.

Característica única: una característica valiosa del formato JPG es el modo progresivo . La mayoría de las imágenes JPG se crean en el modo de línea de base. Para comprender la diferencia entre los dos modos, imagine leer una página de texto línea por línea. Comienzas en la parte superior y avanzas línea por línea hacia la parte inferior.

Si tardas un minuto en leer la página, tardarías 30 segundos en leer la mitad de la página.

Modo de línea de base

Con una imagen JPG en el modo de línea de base , así es como cargaría el archivo JPG en la web: una línea de píxeles tras otra, de arriba a abajo. Si su imagen se carga lentamente debido a un archivo de gran tamaño o una conexión lenta, los visitantes de su sitio web verán solo una parte de la imagen hasta que se cargue por completo.

modo progresivo

Sin embargo, en el modo progresivo , comienza cargando una versión de baja resolución de su imagen y luego procede a cargar una versión de mayor resolución.

Los visitantes de su sitio web verán una imagen completa de inmediato, incluso si es de menor calidad, y a medida que se cargue la imagen, su calidad en la página mejorará.

Las imágenes JPG progresivas son ideales para sitios web rápidos, ya que minimizan el tiempo inicial de pintura de la página.

Ideal para: Imágenes fijas y fotos, capturas de pantalla.

Rendimiento: alto rendimiento dado el pequeño tamaño del archivo; fácil de descargar y cargar.

Calidad: JPEG es un formato con pérdida, lo que significa que la calidad se pierde cada vez que se cambia el tamaño de la imagen. Las imágenes JPEG tienden a perder bastante nitidez, por lo que no funcionan bien en tablas y otros gráficos que requieren un alto nivel de nitidez para verse correctamente.

Sin embargo, los archivos JPEG son excelentes cuando se usan para fotografías e imágenes llenas de color. JPEG también funciona bien para capturas de pantalla debido a su tamaño de archivo más pequeño en comparación con PNG.

Compatibilidad con navegadores: todas las versiones de Chrome, Edge, Firefox, Internet Explorer, Opera y Safari.

"¿Cuál es la diferencia entre JPEGmini y MozJPEG?" El propósito de JPEGmini y MozJPEG es reducir el tamaño de la imagen JPG sin efectos visibles para el usuario final.

JPEGmini utiliza un algoritmo ajustado a mano que reduce la calidad de la imagen en lugares donde un humano probablemente no lo notaría. Este algoritmo único permite que el programa reduzca considerablemente el tamaño de las imágenes JPEG, a veces hasta en un 80 por ciento.

MozJPEG es un codificador JPG desarrollado por Mozilla que utiliza muchos ajustes automatizados para lograr una gran reducción en el tamaño del archivo JPG manteniendo la calidad de la imagen.

JPEG2000

Descripción: Joint Photographic Expert Group 2000 (JPEG2000) es un estándar que a veces se usa en lugar de JPEG. JPEG2000 utiliza un método de codificación sofisticado. En comparación con un archivo JPEG ordinario, proporciona un mejor rendimiento de compresión sin una pérdida significativa de calidad de imagen.

Ideal para: Imágenes fijas y fotografías.

Rendimiento: alto rendimiento debido a su pequeño tamaño de archivo; fácil de descargar y cargar.

Calidad: la calidad es superior a la de un archivo JPEG normal, ya que los métodos de compresión son mucho más efectivos.

Compatibilidad del navegador: el formato no es compatible con versiones anteriores y no es compatible con los principales navegadores, como Chrome, Firefox, Internet Explorer y Microsoft Edge. El formato solo es compatible con el navegador Safari a partir de la versión 5-13.1.

JPEG XR

Descripción: JPEG XR (rango extendido), también conocido como HD Photo, es un formato de archivo desarrollado por Microsoft. El formato se usa principalmente en sistemas Windows y generalmente no es compatible con otras plataformas.

JPEG XR, en comparación con JPEG, agrega características como compresión sin pérdidas, soporte alfa completo (una opción para semitransparencia) y mayor precisión de color.

Característica única: una capacidad única de JPEG XR es el soporte para una estructura en mosaico. Una imagen se divide en mosaicos, regiones independientes que se pueden decodificar por separado, y cada región se puede mostrar sin necesidad de decodificar el resto de la imagen.

Ideal para: Fotos mostradas a usuarios de Internet Explorer (versiones 9 a 11) y Microsoft Edge (hasta la versión 18).

Rendimiento: Alto rendimiento debido a un algoritmo de compresión más efectivo. La compatibilidad con mosaicos permite una representación más rápida en el navegador.

Calidad: JPEG XR puede usar compresión con pérdida y sin pérdida, por lo que la calidad de una imagen variará según la opción de compresión elegida. Generalmente, el tamaño del archivo será más pequeño que una imagen JPG cuando se usa compresión con pérdida y más pequeño que PNG cuando se usa compresión sin pérdida.

Compatibilidad del navegador: solo se admite en IE 9-11 y Microsoft Edge hasta la versión 18. Las versiones más recientes de Edge han eliminado la compatibilidad con imágenes JPEG XR.

BMP (mapa de bits)

Descripción: el formato de archivo de mapa de bits (BMP) es un formato de imagen de trama más popular en los sistemas Windows.

Más adecuado para: se usa principalmente para capturas de pantalla en máquinas con Windows si la compresión no es posible por alguna razón.

Rendimiento: las imágenes de mapa de bits ocupan una cantidad considerable de almacenamiento, especialmente si contienen muchos colores. Como resultado, pueden tardar en cargarse cuando se usan en un sitio web, lo cual es una de las razones por las que no recomendamos usar archivos BMP en la web.

Calidad: las imágenes de mapa de bits ofrecen una calidad perfecta y sin pérdidas (al igual que los PNG).

Compatibilidad con navegadores: todas las versiones de Chrome, Edge, Firefox, Internet Explorer, Opera y Safari.

SVG (gráficos vectoriales escalables)

Descripción: un archivo de gráficos vectoriales escalables (SVG) es un formato de imagen vectorial basado en XML que se usa comúnmente en la web.

Los formatos vectoriales son mucho más versátiles y fáciles de usar que sus contrapartes raster como GIF, PNG, JPG y BMP; lo que es más importante, escalan sin problemas sin pérdida de calidad.

Ideal para: Gráficos que requieren una calidad constante cuando se escalan, como íconos, pancartas y gráficos.

Rendimiento: las imágenes SVG influyen positivamente en el rendimiento de la página web, ya que tienden a tener tamaños de archivo mucho más pequeños que los formatos ráster como PNG, BMP y TIFF.

Calidad: las imágenes SVG conservan la calidad sin importar cómo se transformen, grandes o pequeñas. Esta propiedad es esencial para los gráficos, como los logotipos de empresas que se utilizan tanto como favicons como imágenes de encabezado en un sitio web.

Compatibilidad con navegadores: casi todos los navegadores admiten el formato SVG, excepto IE 6-8 (lanzado antes de marzo de 2009) y Android Browser 2.1-2.3 (lanzado antes de diciembre de 2010).

HEIC / HEIF (Formato de archivo de imagen de alta eficiencia)

Descripción: El formato de archivo de imagen de alta eficiencia (HEIC/HEIF) es un formato de imagen desarrollado por el Grupo de expertos en imágenes en movimiento. Es un formato de imagen bastante nuevo introducido recientemente por Apple como formato de almacenamiento de fotos en el iPhone y el iPad.

Una de las razones por las que Apple eligió este formato para sus dispositivos móviles es la capacidad de almacenar secuencias de imágenes (por ejemplo, una foto en vivo o una ráfaga de fotos) como un solo archivo.

En tales situaciones, los archivos HEIC almacenan la diferencia entre imágenes en lugar de almacenar una imagen completa, lo que resulta en un tamaño de archivo significativamente más pequeño.

Ideal para: Fotografía, imágenes animadas.

Rendimiento: los archivos HEIC tienen un tamaño de archivo mayor que los archivos JPEG porque el formato HEIC usa compresión sin pérdidas. Sin embargo, las imágenes HEIC tienen un tamaño de archivo más pequeño que PNG, un formato sin pérdidas comparable.

Calidad: muy alta: las imágenes HEIC pueden almacenar más del doble de detalles que una imagen JPEG.

Compatibilidad del navegador: Ningún navegador moderno brinda soporte para el formato HEIC.

"¿Es HEIC mejor que JPEG?" HEIC puede almacenar más del doble de detalles que una imagen JPEG manteniendo un tamaño de archivo bajo, lo que los hace mucho más eficientes y de mayor calidad que el formato JPEG.

El tamaño de archivo más pequeño de HEIC es particularmente útil para ayudar a reducir los costos de almacenamiento en la nube, siempre que pueda convertir archivos HEIC a otros formatos cuando se publiquen en la web. El formato HEIC actualmente no se usa mucho en la web debido a la falta de compatibilidad con el navegador.

Sin embargo, algunas soluciones CDN de imágenes convertirán automáticamente un archivo HEIC a un formato compatible con el navegador.

"¿Cómo puedo convertir mis imágenes HEIC a formato JPEG?" Puede hacerlo utilizando una herramienta en línea como HEIC to JPG .

"¿Necesito una licencia para usar HEIC?" No se requiere licencia para usar el formato HEIC de manera no comercial.

WEBP (formato de imagen web)

Descripción: El Web Picture Format (WebP) es un formato de imagen desarrollado por Google. Puede emplear compresión con pérdida o sin pérdida, por lo que puede elegir entre tamaños de archivo más pequeños y mayor calidad.

WebP tiene como objetivo crear imágenes más pequeñas y de mejor apariencia que generalmente aumentan los tiempos de carga de una página web. WebP también admite animación y bucles, similar a los GIF. El formato está creciendo en popularidad y apoyo.

Ideal para: fotografías, pancartas e imágenes animadas.

Rendimiento: bueno cuando se usa compresión.

Calidad: Generalmente buena, especialmente cuando se usa compresión sin pérdidas.

Compatibilidad con navegadores: a partir de 2018, WebP ha visto un amplio soporte en todos los principales navegadores web, además de IE, y Apple ha anunciado soporte para WebP en las próximas versiones de Safari. Recomendamos usar respaldos JPEG o PNG al agregar imágenes WebP a su sitio web.

"¿Cómo evito que Google Chrome guarde mis imágenes como WebP?" De forma predeterminada, Google Chrome guarda las imágenes web en formato WebP. Si está en una Mac, puede exportar una imagen WebP a un JPG utilizando la aplicación de vista previa predeterminada del sistema.

En Windows, puede descargar una extensión como Guardar imagen como PNG . Otra opción es usar imgix para que las imágenes de tu sitio web se publiquen en formato WebP cuando tus clientes usen Chrome o Firefox y en formato PJPG (JPG progresivo) para otros navegadores.

AVIF (formato de archivo de imagen AV1)

Descripción: El formato AVIF es el formato de imagen basado en el formato de codificación de video AV1. AV1 fue creado y es desarrollado por Alliance for Open Media , un consorcio formado por Mozilla, Google, Cisco, Netflix, Amazon y otras empresas.

La idea principal detrás de AVIF es aprovechar los algoritmos de compresión desarrollados originalmente para video en formato de imagen.

Netflix cree que AVIF tiene potencial para las imágenes en todas sus aplicaciones debido a la calidad superior que proporciona este formato mientras mantiene bajo el tamaño de la imagen.

Ideal para: imágenes que contienen detalles específicos que deben conservarse, por ejemplo, degradados, texto y gráficos en carteles de películas.

Rendimiento: excelente cuando se usa compresión.

Calidad: excelente cuando se usa compresión.

Compatibilidad del navegador: el formato AVIF es compatible con Google Chrome a partir de la versión 85. Firefox es compatible con AVIF desde la versión 77, pero la funcionalidad AVIF está deshabilitada de forma predeterminada y debe habilitarse en la configuración. Otros navegadores actualmente no son compatibles con el formato AVIF.

¿Qué formato de imagen debo elegir?

En esta sección, brindamos recomendaciones para formatos de imagen en función de su caso de uso específico.

Fotografías: para fotografías en un sitio web, recomendamos JPG debido a su tamaño de archivo más pequeño. Mientras que otros formatos ofrecen características adicionales como la transparencia, estas no son necesarias para las fotos.

Una opción aún mejor es utilizar un servicio inteligente que convierta las imágenes estáticas al formato óptimo según el navegador que utilicen los usuarios.

Por ejemplo, imgix sirve imágenes en formato WebP para quienes usan Chrome y Firefox, y en formato PJPG para quienes usan Internet Explorer, Safari y Microsoft Edge.

Arte lineal y dibujos animados: para dibujos animados y obras de arte, también recomendamos usar el formato JPG por las mismas razones: las imágenes JPG tienen tamaños de archivo más pequeños y, por lo general, la obra de arte no necesita transparencia.

Elementos de diseño gráfico: Nuestra recomendación para los elementos de diseño gráfico es doble:

• Utilice SVG siempre que sea posible debido a su pequeño tamaño de archivo y su fácil cambio de tamaño sin perder calidad.

• De lo contrario, use PNG, ya que su compresión sin pérdidas funciona bien para imágenes con transiciones nítidas y grandes áreas de colores sólidos.

Iconos: recomendamos el formato SVG para los iconos. El formato produce archivos pequeños y le brinda la posibilidad de escalar su imagen sin perder calidad.

Es mejor tener los íconos creados en formato SVG desde el principio, ya que convertir una imagen PNG o GIF en un formato vectorial como SVG podría no ser factible después del hecho.

Logotipos de sitios web: para los logotipos de sitios web, SVG vuelve a ganar. Este formato ocupa menos ancho de banda que otros formatos y se puede cambiar de tamaño fácilmente. Al igual que con los íconos, intente crear su logotipo como un SVG.

Imágenes animadas: Nuestra recomendación para imágenes animadas es el formato MP4. Es un formato de video en lugar de un formato de imagen y, en comparación con un GIF, una animación MP4 tiene aproximadamente una décima parte del tamaño.

Use la etiqueta <video> , configure las opciones de reproducción automática y bucle, y configure el atributo muted para replicar el comportamiento de un GIF con un archivo MP4. Cuando usa imgix, convertimos sus archivos GIF a MP4 automáticamente (nota: la compatibilidad con GIF animados es una característica premium de imgix).

¿Qué formatos de imagen se pueden servir con imgix?

Los tipos de archivos pueden interactuar con imgix ya sea como formatos de entrada o formatos de salida .

Un formato de entrada es un archivo que será aceptado por los parámetros de imgix. Puede transformar imágenes que se aceptan con un formato de entrada utilizando la API de imgix ( w=600 , por ejemplo).

Un formato de salida es un tipo de archivo en el que imgix puede transformar cualquier formato de entrada. Por ejemplo, puede transformar un jpg en png usando fm=png.

Cualquier formato de entrada no compatible se servirá sin ninguna transformación .

* Consulte las notas específicas del archivo a continuación

Servicio de activos no admitidos con imgix

Aunque imgix está optimizado para servir imágenes, es posible pasar otros activos estáticos como JavaScript y archivos CSS desde su fuente. Esto le dará el beneficio de brindar servicios a otros activos a través de nuestra CDN distribuida globalmente.

Sin embargo, no garantizamos el comportamiento de dichos activos: los parámetros de representación (especialmente los parámetros predeterminados) pueden afectar la salida y generar accidentalmente un error de representación.

Al publicar tipos de archivos no admitidos, es importante no aplicar ningún parámetro en la URL. Si bien generalmente no hay problema con el uso de parámetros en tipos de entrada no compatibles, hay algunos casos excepcionales en los que un parámetro puede causar un comportamiento inesperado en ciertos tipos de archivos.

Si tiene una fuente configurada con parámetros predeterminados que están causando problemas con recursos de entrada no admitidos, puede solucionar este problema de la siguiente manera:

• Sirviendo esos activos sin usar imgix o

• Use una fuente separada para servir esos activos

Notas específicas del archivo

APNG

Los PNG animados se renderizarán como un APNG estático. Para las animaciones, utilice GIF animados (función premium) en su lugar.

EPS

Solo se admite como transferencia, no como tipo de entrada.

HEIC

HEIC solo funcionará si la imagen original se creó desde un dispositivo iOS

SVG

Los SVG se pueden habilitar como parámetro de entrada poniéndose en contacto con [email protected] . Si aún no están habilitados para su cuenta, podemos pasarlos siempre que tengan una declaración XML correcta en la parte superior del archivo.

Tenga en cuenta que existe una vulnerabilidad de seguridad para los SVG que permiten la ejecución de javascript en línea cuando se sirven a través de un navegador web.

Al habilitar SVG como parámetro de entrada, puede evitar la ejecución de este código al permitir que imgix rasterice y sirva el archivo. Puede hacer esto aplicando cualquier parámetro predeterminado en su configuración de Fuente, como auto=compress.

Otra forma de evitar vulnerabilidades relacionadas con los SVG es evitar los SVG cargados por el usuario, lo que evita que se sirvan SVG no autorizados desde su Fuente.

No se recomienda utilizar la codificación Base64 en sus archivos SVG. Nuestra pila de renderizado no procesará el fragmento Base64 y no se mostrará en el renderizado de salida.

WEBP

El WebP animado aún no es compatible como formato de entrada.

WEBM

Se pierde transparencia al convertir un GIF en un WEBM. Como alternativa, puede convertir el GIF en APNG para admitir la transparencia.

Preguntas frecuentes (FAQ)

"¿Cuál es el tamaño de imagen y la resolución adecuados para una imagen en un sitio web?" La respuesta depende de los dispositivos que usan los visitantes de su sitio web y de cómo usa cada imagen.

Recomendamos utilizar un tamaño de imagen optimizado para el tamaño de pantalla de cada dispositivo para que las imágenes conserven una alta calidad y consuman el menor ancho de banda posible.

Por ejemplo, un iPhone 11 Pro Max tiene una resolución de pantalla de 1242x2688 píxeles. Cuando tiene en cuenta la proporción de píxeles del dispositivo (DPR) , debe considerar una imagen 3 veces el tamaño de esas dimensiones si su imagen ocupará todo el ancho de su sitio web en la ventana del navegador.

Hacer que la imagen sea demasiado grande consumiría ancho de banda adicional innecesariamente, mientras que usar un tamaño de archivo más pequeño pixelará la imagen y le dará una calidad inferior en la página. El mismo principio se aplica proporcionalmente a imágenes únicas o múltiples que ocupan menos del ancho total de la ventana.

En un navegador, el atributo srcset para el elemento <img> es una forma conveniente de mostrar diferentes tamaños de imagen según el tamaño de la pantalla. Consulte la guía Imágenes receptivas con srcset para obtener más detalles sobre por qué es útil y cómo funciona.

Resumen

En este artículo, cubrimos muchos formatos de imagen principales, incluido su rendimiento y compatibilidad con el navegador. Tenga en cuenta que no existe un formato adecuado para todas las imágenes en la Web.

Para elegir un formato de imagen óptimo, considere cómo usará cada imagen, si necesitará mostrarla a los usuarios en diferentes formatos y qué navegadores tiene previsto admitir. Para convertir automáticamente formatos de imagen para un rendimiento óptimo, cree una cuenta gratuita en imgix hoy .