¿De qué manera cargar una imagen enorme (canvas frente a img frente a imagen de fondo)?

Lo que quiero

Actualmente tengo una imagen png de 4000x4000 . Después de usar tinypng.org se convirtió en solo un archivo de 288 KB.

Ahora quiero la manera más rápida de cargar la imagen, colocarla en el DOM y poder dibujar un montón de canvas en ella.

Probé algunos y los resultados me sorprendieron.

Lo que probé

Hice 3 pruebas y verifico solo la velocidad de carga.

  • (423 ms)
  • (138 ms)
  • (501ms) background-image CSS

La etiqueta es la más rápida.

Pregunta

Entonces, ¿es una mala práctica usar la etiqueta para mostrar una imagen enorme (de fondo) y usar un poco de CSS sucio para poder dibujar sobre ella?

¿O es mejor usar canvas en mi caso y no preocuparse por el tiempo de carga más largo?

Gran pregunta! Esto está relacionado: ¿ Cuándo usar IMG vs. CSS background-image?

A partir de ese artículo, si las personas intentan imprimir su página, no usarían , ya que esto aparecería en la impresión. Lo mismo se aplicaría a , haciendo que background-image la solución lógica.

¿Cómo se agrega su imagen de fondo a través de CSS? ¿Está en línea oa través de su propia hoja de estilo? Si usa su propia hoja de estilo, ¿ha intentado comprimir el CSS antes de probar la velocidad?

Esto también está relacionado, supongo: ¿Las imágenes cargan más rápido en HTML o CSS?

Pensaría en mirar desde una perspectiva semántica a su situación: ¿qué desea mostrar? ¿Es una imagen encima de la cual quieres dibujar algo? ¿Es una imagen de fondo de un tablero de juego?

En mi humilde opinión: 500 ms en caso de fondo de CSS no es tan lento, siempre lleva un par de segundos para cargar un sitio web. Si le importa la velocidad de carga de la imagen, use , pero el uso de HTML podría ser un poco más difícil porque tiene que manipular el z-index y la position .

Tomaría el fondo CSS.