CSS Background Image Nueva encuesta: el caso del desorden gigante

Suponga que ha diseñado una página web y utiliza una imagen de fondo de página completa. Realmente te gusta el aspecto del sitio con esta imagen de fondo. El se parece increíble. Pero la imagen es 350k. Ha decidido que aunque sabe que es pesado, vale la pena.

Pero luego empiezas a pensar en dispositivos móviles. Esa gran imagen de fondo no agrega tanto al diseño en la pantalla pequeña, y particularmente los 350k voluminosos en el dispositivo probablemente más débil y probablemente más lento en general. A continuación, considere que los navegadores móviles a menudo tienen un caché mucho más limitado, por lo que ni siquiera eso ayudará. El tráfico móvil representa el 2% de su tráfico total.

Por supuesto, puede utilizar consultas multimedia para no mostrar la imagen de fondo cuando una pantalla es estrecha, pero eso no ayuda mucho ya que este recurso siempre se descargará. Entonces estás en serios problemas:

¿Utiliza la imagen de 350k y se deleita con la belleza, aceptando las consecuencias que son significativas para el 2% de sus usuarios? ¿O deshacerse de la imagen y hacer la página un poco más fea pero más rápida?

La encuesta (en la barra lateral) solo tendrá dos opciones, lo que te obligará a elegir. Pero si crees que tienes una tercera opción, déjala en comentario.

Actualización

De alguna manera, me convencí por completo de que las imágenes de fondo a las que se hace referencia en CSS, incluso si están bajo una solicitud @media no activa, todavía se están descargando por el navegador. Siento que he ejecutado casos de prueba, hablé con la gente al respecto, etc., pero debo haber estado soñando o los navegadores solucionaron este problema. En este caso de prueba del reproductor Ruben, puede probar que incluso las imágenes de fondo eliminadas por las consultas de @media no se cargan.

Así que esta encuesta es fundamentalmente inválida … la respuesta correcta sería que siempre elimine la imagen de 350k a través de consultas @media.

Otras propiedades para el background

CSS Background

https://css-tricks.com/snippets/css/transparent-background-images/

No hay una propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con una opacidad regular del tamaño exacto del elemento detrás de él. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: “”; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index:

Ver más »
CSS Background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de

Ver más »
Ir arriba