Imagen en blanco Qué usar: Base64 vs 1x1 imagen JPEG

11

Estoy construyendo un sitio web y quiero hacer consultas HTTP lo menos posible para una mejor velocidad y seo del sitio web. La página que acabo de crear muestra imágenes en desplazamiento (las imágenes tienen un atributo data-scr que se convierte en src cuando el usuario se desplaza hacia abajo en la imagen correspondiente).

Debido a que todas las imágenes tienen el data-srcatributo en lugar de src, W3C me muestra errores.

En este momento encontré dos opciones para resolver este problema:

  1. El src inicial de todas las imágenes para ser una url de una imagen en blanco 1x1
  2. El src inicial de todas las imágenes para ser una base de datos 64 imagen en blanco

Cuando estoy usando una URL de una imagen en blanco 1x1, luego (probado con tools.pingdom.com) muestra 1 solicitud HTTP. Cuando estoy usando una imagen en blanco de la base de datos64, muestra tantas solicitudes como el número de imágenes en la página.

¿Cuál es la forma más eficiente para que un sitio web sea más rápido y realice menos solicitudes HTTP? (supongamos que el usuario está cargando la página web a una velocidad de Internet de 14.4 kbps - primera velocidad de Internet).

Pero para el SEO?

¿Hay alguna otra opción?

MM PP
fuente
8
"Cuando uso una imagen en blanco de la base de datos 64, muestra tantas solicitudes como la cantidad de imágenes en la página". - hay algo un poco mal ahí? El punto de usar un URI de datos es que no hay una solicitud HTTP externa. (Solo los agentes de usuario que no entienden los URI de datos pueden disparar una solicitud HTTP)
MrWhite
Si la imagen en blanco será mayor que 1x1 px (supongo que lo es), recomendaría una imagen de fondo más grande (10x10 px, 100x100 px) porque la representación será más rápida .
totymedli
3
¿No usa ninguno? Puede crear la etiqueta img dinámicamente al mismo tiempo que convierte data-src a src. En lugar de tener una imagen en blanco con un data-src, puede almacenar la lista de imágenes y generar la etiqueta cuando sea necesario.
the_lotus
@Pharap no funciona porque el navegador descargará las imágenes incluso si están ocultas.
DisgruntledGoat
Cualquiera que elija para entregar el contenido, codificarlo como png8 probablemente será más rápido que JPEG.
symcbean

Respuestas:

12

La opción de imagen base64 se debe usar donde solo tendría un número muy pequeño de imágenes y desea eliminar la sobrecarga de la red al buscar una imagen del servidor. Sin embargo, por lo que está indicando en la pregunta, supongo que esto podría escalar a una gran cantidad de imágenes. En este caso, usaría una sola imagen transparente de 1px x 1px del servidor con una larga vida útil de la caché, ya que se obtendrá del servidor una vez que se almacenará en el navegador y en cualquier servidor proxy intermedio.

Como ejemplo, esta imagen tendría un tamaño de alrededor de 95 bytes ( https://commons.wikimedia.org/wiki/File:1x1.png ), para una cadena de imagen codificada en base64 encontraría que el tamaño estaría a la par con esta imagen tamaño de archivo, pero se repetiría para cada imagen a la que lo agregue.

Para 2-5 imágenes, el tamaño y la velocidad serían insignificantes y disminuirían el tráfico del servidor al eliminar una búsqueda completa, pero por más que eso, el tamaño de la página comenzaría a ser demasiado grande, lo que afectaría los tiempos de carga y, a su vez, la clasificación SEO.

Chris Rutherfurd
fuente
66
Una imagen en blanco base 64 podría tener 55 bytes: data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=. Si la URL de la imagen es un poco más larga (por ejemplo, ejemplo.com/templates/template-name/files/1x1.png ), se recomendará la imagen base64 porque no realiza consultas HTTP y es más pequeña en bytes que la URL de la imagen (repetida para cada imagen en la página) + el tamaño de imagen externa
NETCreator Hosting
@ NETCreatorHosting-WebDesign Gracias por tu comentario. Comparé el tamaño del sitio web cuando utilicé una imagen base64 y una imagen externa, y el tamaño es más pequeño cuando utilicé una imagen base64. Estoy usando alrededor de 40 imágenes por página.
MM PP
O puede cargar la imagen en la raíz de su sitio web y usar una URL relativa, por lo que el sitio web será mucho más pequeño.
NETCreator Hosting
3
gzip se encargará de las repeticiones, por lo que tener 400 imágenes codificadas en base 64 en su página no costará más ancho de banda que 400 URL de imágenes.
user2428118
3
@Aron Si su página tiene 25.6 MB de largo (400 URI de datos de 82 bytes de largo con 64kB entre ellos = 25,568,800 bytes), tiene mayores problemas de los que preocuparse que 32.8 kB de imágenes codificadas en base64.
user2428118
5

Definitivamente vaya con el URI de datos, a menos que necesite soporte para IE <8. ( Soporte de navegador ).

Puede parecer que incrustar muchas imágenes pequeñas directamente en el HTML requerirá más ancho de banda que vincularlas directamente, pero el aumento será mitigado por gzip ; la única diferencia en el tamaño de la página vendrá de la diferencia en la longitud entre un URI de datos de una imagen en blanco y una URL de la imagen en su servidor. Un GIF en blanco puede ser tan pequeño como 43 bytes. Base 64 codificada, eso es 82 bytes. No hay forma de que tenga un rendimiento peor que una solicitud HTTP> 500 bytes , una respuesta de tamaño similar, y ni siquiera estoy teniendo en cuenta el tamaño del paquete TCP y otros gastos generales.

Aquí está la imagen GIF de 43 bytes codificada en Base 64:

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

En cuanto al SEO, eche un vistazo al código fuente de un sitio de Google, por ejemplo, Google News , y busque data:image/gif,base64...

usuario2428118
fuente
Tu imagen es grande. Consulte el comentario anterior para la versión de 55 bytes.
Joshua
1
Esta respuesta en StackOverflow con pruebas informadas (mayo de 2014) parece mostrar que incrustar grandes cantidades (~ 1800) de imágenes de 1px es considerablemente más lento que vincular repetidamente a la misma imagen externa. La imagen externa se solicita una vez y se almacena en caché, mientras que el navegador debe decodificar cada URI de datos por separado como parte del proceso de análisis HTML; este parece ser el cuello de botella. Esto parecería sugerir que los URI de datos deberían limitarse a un pequeño número de imágenes (pequeñas).
DocRoot
@Joshua Aunque esa imagen se muestra correctamente en mi navegador (Firefox), algunos otros programas (por ejemplo, Paint) no pueden abrirla, por lo que evitaría usarla.
user2428118
2

En este momento encontré dos opciones para resolver este problema: el src inicial de todas las imágenes para ser una imagen en blanco de la base de datos 64

Esta opción no solo requiere un navegador moderno, sino que puede ser más lento en el lado del cliente, ya que el navegador debe decodificar en base 64 los datos de la imagen para producir la imagen.

El src inicial de todas las imágenes para ser una url de una imagen en blanco 1x1

Es un movimiento correcto siempre que la URL de la imagen en blanco para todos los espacios de imágenes sea exactamente la misma URL y que tenga una vida útil de caché larga definida en el encabezado HTTP "caché-control". El problema con esto es que a medida que se cargan los nuevos archivos de imagen, los cuadros de imagen saltarán al nuevo tamaño, lo que podría hacer que la experiencia del usuario no sea tan maravillosa.

La idea casi perfecta es esta ...

Cuando se inicie la página, presente una cuadrícula con cuadros de tamaño fijo que puedan acomodar cada imagen. Está bien si toda la cuadrícula no cabe en la pantalla. Luego cree JavaScript que se ejecute después de que se cargue el HTML, y en ese JavaScript, cree un nuevo elemento de imagen y adjúntelo a cada celda de la cuadrícula, luego configure la fuente de la imagen en el archivo de imagen correcto. Haga esto hasta que se llene la primera pantalla. luego detecte el desplazamiento dentro de javascript y luego, cuando ocurra el desplazamiento, repita el proceso anterior para las nuevas celdas.

Ahora, si desea lo mejor de lo mejor, y la calidad no es una gran preocupación, entonces lo que recomiendo (que también implementé en mi sitio) es construir una cuadrícula y configurarla de modo que la imagen de fondo de esa cuadrícula sea un hoja de sprites de todas las imágenes formateadas como cuadrados de imágenes. Este método es flexible y rápido de cargar, ya que se requiere una solicitud para todas las imágenes.

Aquí hay una plantilla HTML para usar si desea ir por la ruta rápida. Solo se hacen dos solicitudes. El código HTML y la única imagen. En este código, supongo que cada imagen de la hoja tiene 100 píxeles de ancho y 200 píxeles de altura y que cada imagen está perfectamente alineada una al lado de la otra sin espacios.

<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>

En mi código agregué 3 puntos. Eso significa que puede seguir agregando imágenes incrementando los números e incrementando la posición en 100 cada vez, siempre que su hoja de sprites tenga solo una fila de imágenes. Además, con algunos navegadores como Opera, es posible que deba agregar un signo negativo delante de los valores de posición de fondo para que funcionen.

Miguel
fuente
2
A menos que sus imágenes tengan un tamaño de medio gigabyte, no hay forma de que la decodificación de base64 tenga un impacto medible en el rendimiento.
user2428118
También depende del sistema informático también. Si el cliente todavía tiene una computadora pasada de moda como un pentium 1, entonces puede haber un impacto en el rendimiento.
Mike
1

La imagen, porque mantenibilidad.

En mi experiencia , funciona mejor usar la imagen. Esto es más obvio en el código real y más fácil de recordar. Dudo que recuerde la cadena codificada para una imagen transparente, e incluso si lo hace, sus sucesores / colegas.
Si regresa a este código después de algunas semanas, ha olvidado la base64.

Será mucho más sencillo mantener el código si usa la imagen, los profesionales mínimos no pesan hasta esto.

Martijn
fuente
Muchas personas usan secuencias de comandos para generar valores de base 64, por lo que el requisito de recordar dichos valores no se aplica a menos que el OP utilice solo un conjunto de archivos HTML para representar el código de su sitio web.
Mike
1

¿Qué tal solo ~ 3 bytes adicionales, 0 solicitudes http adicionales y 0 longitud imr src adicional (o 0 marcadores de posición de imagen de datos no almacenados en caché). ¿Puedes usar un src en blanco para la imagen?

<img src data-src="banannanannas.jpg" />

Y si tienen altetiquetas, puede ocultarlas de la imagen de error / falla:

<img src data-src="banannanannas.jpg" onerror="this.alt=''" alt="some desc" />

Muestra: nada. Cortar la etiqueta alt tiene un ligero retraso FOUC desde el borde del marcador de posición de la imagen. Quizás eso también se pueda limpiar.

dhaupin
fuente
2
Aunque un srcatributo vacío aún arrojará errores en el Validador W3C (que parece ser la preocupación).
MrWhite
@ w3dk Sí, eso apesta, pero de nuevo pasan muy pocas modernizaciones.
dhaupin
Si desea pasar las reglas del W3C, es necesario especificar algo para el src, incluso si es una URL que devuelve un error 404. También recomendaría especificar los valores de los atributos de ancho y alto para la imagen para que los usuarios vean marcadores de posición reales al principio en lugar de pequeños cuadros que se inflan a la mitad del proceso de carga.
Mike