tamaño - mostrar imagen en html
¿Cuál es la diferencia entre hacer referencia al archivo de imagen en src de la etiqueta img y hacer referencia a la imagen incrustada directamente en la etiqueta de la imagen? (3)
¿Hay alguna diferencia entre utilizar <img src=pathto.png /> y <img src=data:image/png;base64,encodedpngdata... /> desde la perspectiva del servidor?
En el caso de src=pathto.png ¿el servidor solo codificará la imagen y la enviará al navegador?
El primer ejemplo hace referencia a un recurso externo al especificar su URI. Entonces, esto dará como resultado una solicitud adicional a ese recurso para recibir los datos.
El segundo ejemplo también hace referencia a un recurso, pero los datos de ese recurso están directamente integrados en el URI (ver esquema de URI de datos ). Por lo tanto, no se necesita ninguna solicitud adicional.
Ambos métodos tienen sus ventajas y desventajas:
external embedded
separate request (-) ✓ ✗
cachable (+) ✓ ✗
referencable (+) ✓ ✗
compression (+) ✓ ✗
Datos de recursos externos
La ventaja de utilizar un recurso externo es que dichos recursos pueden almacenarse en caché y utilizarse en diferentes documentos sin realizar solicitudes para cada aspecto de esos recursos.
Una desventaja es que toma esa primera solicitud adicional.Datos de recursos integrados
Una ventaja de incrustar los datos de recursos directamente en el documento es guardar una solicitud adicional.
Pero una desventaja es que dichos recursos no se pueden almacenar en caché o hacer referencia en apariencias múltiples en un documento o documentos diferentes. Tampoco se puede comprimir usando desinflar o gzip. De hecho, la codificación Base64 hinchará el tamaño por el factor 4/3.
Consulte también la primera regla Realice menos solicitudes HTTP de mejores prácticas para acelerar su sitio web .
En el caso de <img src="/path/to/image.png" /> , el servidor no codificará la imagen. El navegador lo solicitará en una solicitud por separado , y el servidor simplemente volcará un encabezado corto, luego los datos del archivo en el cable. En un servidor HTTP bien escrito, esta es una operación increíblemente rápida, ya que solo hay una cantidad mínima de procesamiento involucrada. El navegador también puede almacenar en caché la imagen para que no tenga que recuperarla más tarde (como han dicho otros).
Incrustarlo en línea aumentará el peso de la página e imposibilitará almacenar en caché la imagen por separado.
Vincular a una imagen separada requiere una segunda solicitud para obtener la imagen, pero permite que se almacene en caché y se reutilice en varias páginas sin tener que volver a enviar los datos.
Incrustarlo en línea requiere que los datos se envíen con cada solicitud de página que incluya la imagen (y varias veces si la imagen se usa más de una vez en una página)