Al incrustar una imagen, sus bytes se colocan dentro de HTML, CSS u otro documento. Puede hacer que un pequeño artefacto sea autónomo, pero también acopla la imagen a la entrega y el almacenamiento en caché de ese documento. Decida basándose en el flujo de trabajo completo en lugar de asumir que menos URL siempre significan una página más rápida.
Construya el contenedor correcto
Una imagen PNG Los datos URI comienzan con data:image/png;base64,, seguido de la representación Base64 del archivo original. Un JPEG necesita image/jpeg; WebP necesidades image/webp. Cambiar el nombre de un tipo MIME no convierte los bytes. Si el receptor requiere un JPEG, vuelva a codificar la imagen antes de generar sus datos URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">El marcador de posición de arriba no es una imagen funcional; reemplácelo con la salida completa del codificador. Si la salida ya contiene el data: prefijo, no agregue otro. Mantenga equilibradas las comillas circundantes y evite los saltos de línea introducidos por los editores de texto enriquecido.
Calcular el tamaño real
La parte codificada necesita cuatro caracteres por cada tres bytes de entrada, redondeados para completar grupos. El prefijo Datos URI agrega un poco más. Para un archivo de 30.000 bytes, la carga útil por sí sola es de 40.000 caracteres. La compresión HTML puede cambiar el tamaño transferido, pero el navegador aún necesita analizar el documento y decodificar la imagen. Mida la página real, no solo el archivo fuente.
Una imagen entregada por separado se puede almacenar en caché y reutilizar de forma independiente en todas las páginas. Una imagen incrustada está vinculada a cada documento que la contiene. Por lo tanto, las ilustraciones grandes y repetidas son malas candidatas para la inserción automática. Los iconos pequeños y únicos en un informe independiente pueden ser una compensación razonable.
comprobar el destino
La política de seguridad de contenido puede restringir data: imágenes. Los clientes de correo electrónico pueden eliminar o rechazar el contenido incrustado. La vista previa de un archivo en su navegador no prueba que la aplicación del destinatario lo mostrará. Pruebe la exportación exacta, el cliente de correo electrónico o el sistema descendente que necesita admitir.
Para vistas previas locales temporales, un Blob URL a menudo evita la creación de una cadena Base64 grande. Revocar el URL cuando se elimine su vista. Para HTML independiente exportado, un dato URI puede ser apropiado. Conserve el texto alternativo y las dimensiones en cualquier caso. Las consideraciones de sintaxis y navegador se tratan en MDN: URL de datos.