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?

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.

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...

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.

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.

¿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.