Imagen en Base64

¿Quiere optimizar las imágenes y el rendimiento del sitio web? Mientras busca ayuda en estos días, todavía se encuentra con blogs que ofrecen codificación Base64 de una imagen. Este es un método común de compresión y transmisión de datos porque ocupa menos espacio que el texto sin formato y se puede usar en una variedad de contextos.

Este artículo explica por qué la sugerencia de codificar en Base64 e incluirla directamente en su HTML debe diferenciarse y, en la mayoría de los casos, está obsoleta.

Los navegadores web usaban límites estrictos en la cantidad de conexiones simultáneas que podían enviar a un servidor. Por lo tanto, un sitio web con una gran cantidad de imágenes tenía que unirse a la cola de solicitudes y esperar a que se agotaran las anteriores. Con Base64, este problema se puede evitar mediante el uso de una conexión HTTP ya abierta para entregar imágenes incrustadas directamente en HTML o CSS. Esto eliminó el recorrido adicional que el navegador necesitaba para cada uno de los archivos.

HTTP/2 introdujo la multiplexación. Desde entonces, los navegadores web se han vuelto increíblemente eficientes para transferir cantidades masivas de archivos a través de una sola conexión. Se omitieron la mayoría de las limitaciones que fueron resueltas por la codificación Base64. De hecho, hoy en día hay varios matices por los que aún se debe usar Base64. Para comprender esto, debe conocer los conceptos básicos de Base64.

¿Qué es la codificación Base64?

La codificación Base64 es una forma de codificar datos binarios en texto ASCII. Se utiliza principalmente para almacenar o compartir imágenes, archivos de audio y otros archivos multimedia en Internet. También se usa a menudo cuando hay restricciones en los caracteres que se pueden usar en un nombre de archivo por varias razones. Por ejemplo, algunos sistemas operativos limitan los nombres de archivo a 8 caracteres sin espacios ni caracteres especiales. En estos casos, es posible que se requieran cadenas codificadas en Base64, ya que siempre contienen solo 26 letras en inglés y diez dígitos arábigos (0-9).

En el mundo de la informática, la comunicación tiene lugar en binario (0 y 1), pero los humanos normalmente se comunican en formas de datos mucho más complejas, como imágenes, GIF y texto. Para que estos datos se transmitan, deben presentarse de tal manera que la computadora pueda procesarlos. Primero, analicemos cómo se transfieren típicamente los datos binarios a través de un sitio web.

Cuando visitas un sitio web, tu computadora envía una solicitud a un servidor web. Esta solicitud contiene información sobre su navegador y qué páginas ha visitado en el sitio. El servidor web responde enviando la página solicitada (más cualquier archivo asociado con ella), así como datos adicionales que le indican a su navegador cómo mostrar la página. Todos estos datos se transmiten en forma binaria, por lo que a veces ves un ícono giratorio de "Cargando" cuando estás en un sitio web.

Cuando un desarrollador lanza un sitio web, quiere presentárselo al usuario final lo más rápido posible. Para hacer esto, necesitan minimizar el tamaño de la página tanto como sea posible.

Cómo funciona la codificación Base64

La codificación Base64 toma cada byte de datos binarios (una secuencia de ceros y/o una secuencia de señales de encendido y/o apagado) y lo representa con cuatro caracteres. La razón de esto es que hay exactamente 64 combinaciones posibles usando letras inglesas minúsculas, letras inglesas mayúsculas, números arábigos del 0 al n, y también se tienen en cuenta algunos otros caracteres (puntos, barras).

Dado que solo hay 26 letras en el alfabeto inglés, un máximo de cuatro bytes binarios se pueden representar con tres caracteres del alfabeto. De ahí proviene el "64" codificado en Base64: puede representar hasta 64 combinaciones diferentes utilizando tres de los seis caracteres posibles. Por ejemplo, si tiene la secuencia binaria 01101010, se codificará en Base64 como "YWJj". Tres de estos cuatro se eligen al azar si se transmite la misma serie de bytes con cuatro caracteres posibles.

Qué tener en cuenta al codificar imágenes con Base64

La codificación Base64 se usa más comúnmente para la compresión y transmisión de datos, pero también puede ser útil para el almacenamiento de información o la codificación de texto.

En primer lugar, es importante comprender los diferentes tipos de codificación. Hay tres tipos principales: binario, texto y mixto. La codificación binaria convierte los datos en una secuencia de ceros y unos, mientras que la codificación de texto reemplaza el texto real en los datos con su equivalente Base64. La codificación mixta combina ambos enfoques, lo que puede ser útil para comprimir cadenas largas de datos binarios que contienen algunos caracteres ASCII.

También es importante considerar cómo usará la cadena codificada cuando decida un enfoque y elija el tipo de codificación apropiado. Por ejemplo, si planea usar una cadena codificada en una URL, debe usar una codificación de texto. Si envía datos como parte de un correo electrónico, la codificación binaria suele ser la mejor opción.

Si no codifica las imágenes correctamente, o si lo hace con imágenes que ya son grandes, ralentizará su sitio. Debido a la forma en que funciona Base64, las imágenes no se pueden almacenar localmente y deberán obtenerse de un CDN, lo que genera mucha más carga en el servidor. Compartir imágenes Base64 también es más difícil porque no se comparten.

Cuándo evitar la codificación Base64

En particular, si desea almacenar datos como un archivo en el disco duro de su computadora o enviarlos a través de una red, existen otras opciones que tienen menos penalización de rendimiento y también requieren menos espacio en disco que los archivos codificados en Base64.

Tamaño del archivo

La codificación de imágenes Base64 no es la forma más eficiente de codificar datos cuando se trata del tamaño del archivo. Esto se debe a que el proceso siempre da como resultado un aumento del tamaño del archivo de al menos un 20-25%. Por ejemplo, si tiene un archivo binario que tiene un tamaño de 1000 bytes, después de la codificación Base64 tendrá un tamaño de 1250 bytes. Esto puede ser importante cuando el espacio de almacenamiento es limitado o cuando se transfieren archivos a través de una red.

Métodos de compresión

Otra razón por la que la codificación Base64 podría no ser la mejor opción es que existen mejores métodos de compresión para almacenar datos como archivos de texto en dispositivos de almacenamiento. Por ejemplo, ZIP y gzip pueden comprimir archivos binarios a tamaños mucho más pequeños que la codificación Base64 sin perder la calidad del archivo debido al proceso de codificación.

Transferencia de información personal

Finalmente, es importante recordar que los datos codificados en Base64 se pueden decodificar a su forma original. Esto significa que enviar información personal, como números de tarjetas de crédito o información de la seguridad social, en un correo electrónico u otro formato en el que se conozca al remitente y al destinatario del mensaje puede tener algunas consecuencias imprevistas si esa información se comparte con otra persona, especialmente cuando se usa Base64. codificación para fines de compresión de archivos.

Cuándo usar la codificación Base64

Base64 es una tecnología muy versátil, pero debe tratar de no usarlo como parte de sus archivos HTML o CSS a menos que tenga una muy buena razón.

Base64 solo es útil para imágenes muy pequeñas. Esto se debe a que cuando se trata de imágenes grandes, el tamaño codificado de la imagen en bytes terminará siendo mucho más grande que los archivos JPEG o PNG. Esto puede resultar en cargas de página más lentas y un mayor ancho de banda en su sitio.

Es importante que codifique cualquier archivo multimedia antes de cargarlo en un CDN o compartirlo con otros. Esto se debe a que la codificación Base64 ayuda a garantizar que el archivo se muestre correctamente en todos los navegadores, independientemente de su configuración. También es útil para almacenar fuentes en caché en su sitio para que su página web se cargue más rápido.

Finalmente, la codificación Base64 es útil para comprimir datos binarios y guardarlos como un archivo de texto. Esto puede ser útil cuando necesite almacenar archivos localmente en su computadora o en una red, especialmente si esos archivos no estarán disponibles para nadie más que para usted.

Reflexiones finales

La codificación Base64 es un proceso que se puede utilizar para codificar archivos multimedia en un formato que todos los navegadores web pueden ver, independientemente de su configuración. Sin embargo, en muchos casos, la codificación Base64 de una imagen no será la mejor opción debido a su impacto en el tamaño del archivo, los tiempos de carga y los métodos de compresión. Entonces, si alguien sugiere que use Base64 para un mejor rendimiento, debe tomarlo con pinzas y considerar cuidadosamente si hay algún beneficio real para su caso de uso. En caso de duda, siempre es mejor consultar a un profesional para que lo ayude a seleccionar el mejor método de codificación de datos para sus necesidades específicas.