php - mostrar - Codificación de la base 64 frente a la carga de un archivo de imagen
decodificar imagen base64 javascript (9)
Así que estoy trabajando en algo en PHP donde tengo que obtener mis imágenes de una base de datos sql donde serán codificadas en base64. La velocidad de visualización de estas imágenes es crítica, así que estoy tratando de averiguar si sería más rápido convertir los datos de la base de datos en un archivo de imagen y luego cargarlo en el navegador, o simplemente hacer eco de los datos básicos de base64 y usar:
<img src="data:image/jpeg;base64,/9j/4AAQ..." />
Que es compatible con Firefox y otros navegadores Gecko.
Entonces, para recapitular, ¿sería más rápido transferir un archivo de imagen real o el código base64? ¿Se requeriría menos solicitud de HTTP cuando se utiliza ajax para cargar las imágenes?
Las imágenes no tendrán más de 100 píxeles en total.
En general, el uso de la codificación base64 aumentará el tamaño del byte en aproximadamente 1/3. Por eso, tendrá que mover 1/3 bytes de la base de datos al servidor, y luego mover esos 1/3 bytes adicionales por el cable al navegador.
Por supuesto, a medida que crezca el tamaño de la imagen, los gastos generales mencionados aumentarán proporcionalmente.
Dicho esto, creo que es una buena idea cambiar los archivos en sus representaciones de bytes en el archivo db y transmitirlos.
Por qué regenerar la imagen una y otra vez si no se modificará. Hipotéticamente, incluso si hay 1000 posibles imágenes diferentes para mostrar en base a 1000 condiciones diferentes, todavía creo que 1000 imágenes en los discos son mejores. Recuerde, el navegador puede guardar en caché las imágenes del disco y ahorrar ancho de banda, etc.
Si desea la velocidad más rápida, debe escribirlos en el disco cuando se cargan / modifican y permitir que el servidor web sirva archivos estáticos. Las sugerencias de Rojoca también son buenas, ya que minimizan la invocación de php. Un beneficio adicional de servir desde otro dominio es (la mayoría) los navegadores emitirán las solicitudes en paralelo.
Salvo todo eso, cuando consultas los datos, verifica si fueron modificados por última vez, luego escríbelos en el disco y preséntalos desde allí. Deberá asegurarse de respetar el encabezado If-Modified-Since para que no transfiera datos innecesariamente.
Si no puede escribir en el disco, o en algún otro caché, sería más rápido almacenarlo como datos binarios en la base de datos y transmitirlo. El ajuste del tamaño del buffer ayudará en ese punto.
- La codificación Base64 hace que el archivo sea más grande y, por lo tanto, más lento de transferir.
- Al incluir la imagen en la página, debe descargarse cada vez. Normalmente, las imágenes externas solo se descargan una vez y el navegador las almacena en caché.
- No es compatible con todos los navegadores
Bueno, no estoy de acuerdo con ninguno de ustedes. Hay casos en los que debe cargar más y más imágenes. No todas las páginas contienen 3 imágenes. En realidad, estoy trabajando en un sitio donde tienes que cargar más de 200 imágenes. ¿Qué sucede cuando 100000 usuarios solicitan 200 imágenes en un sitio muy cargado? Los discos del servidor que devuelven las imágenes deben colapsar. Peor aún, debe solicitar tanto al servidor en lugar de hacerlo con base64. Para tantas miniaturas preferiría la representación base64, guardada previamente en la base de datos. Encontré la solución y una fuerte argumentación en http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/ . El chico está realmente en ese caso e hizo algunas pruebas. Me impresionó y también hice mis pruebas. La realidad es como dice. Para tantas imágenes cargadas en una página, la única respuesta del servidor es realmente útil.
Es una solución muy rápida y fácil. Aunque el tamaño de la imagen aumentará en un 33%, el uso de base64 reducirá significativamente el número de solicitudes http.
Las imágenes de Google y Yahoo están usando base64 y publicando imágenes en línea. Verifica el código fuente y lo verás.
Por supuesto, hay inconvenientes en este enfoque, pero creo que los beneficios superan los costos. Un inconveniente que he encontrado está en dispositivos lentos. Por ejemplo, en iPhone 3GS, las imágenes servidas por las imágenes de google son muy lentas, ya que las imágenes provienen del servidor y deben descomprimirse en el navegador. Entonces, si el cliente tiene un dispositivo lento, sufrirá un poco al renderizar las imágenes.
He usado imágenes base64 una o dos veces para iconos (10x10 píxeles más o menos).
Pros de imágenes de Base64:
- compacto: tiene un solo archivo. también si el archivo está comprimido, la imagen de base64 se comprime casi al tamaño de la imagen normal.
- la página se recupera en una sola solicitud.
Contras de imágenes Base64:
- para ser realista, probablemente necesite usar un motor de scripting (como PHP) en todas las páginas que contienen la imagen.
- si se cambia la imagen, todas las páginas en caché deben volver a descargarse.
- porque la imagen está en línea, no puede usar CDN o servidor web de contenido estático.
Pros de imágenes normales:
- si se usa el protocolo SPDY, al menos teórico, page + images + CSS se cargará con una sola solicitud también.
- puede establecer la caducidad de la imagen, de modo que el contenido se almacenará en caché desde los navegadores.
Para responder a la pregunta inicial, realicé una prueba midiendo una imagen JPEG de 400x300 px en 96 ppi:
base64ImageData.Length
177732
bitmap.Length
129882
No creas data:// funciona en IE7 o inferior.
Cuando se solicita una imagen, puede guardarla en el sistema de archivos y luego servirla a partir de ese momento. Si los datos de la imagen en la base de datos cambian, simplemente elimine el archivo. Servirlo desde otro dominio también como img.domain.com. Puede obtener todos los beneficios de la última modificación o etiquetas electrónicas de forma gratuita desde su servidor web sin tener que iniciar PHP a menos que lo necesite también.
Si estás usando apache:
# If the file doesn''t exist:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1