Cómo extraer imágenes de fondo CSS de una página web

Algunas de las imágenes más grandes de una página web no se pueden guardar con el menú contextual habitual. La fotografía principal ocupa la mitad de la pantalla, pero "Guardar imagen como" nunca aparece. Un panel estampado es claramente una imagen, pero al buscar <img> en HTML no se encuentra nada. En ambos casos, el archivo se puede cargar mediante CSS en lugar de un elemento de imagen.

Las imágenes de fondo CSS son comunes en pancartas, tarjetas, controles deslizantes, texturas decorativas, mosaicos de productos y secciones de héroes receptivas. No están ocultos en ningún sentido de seguridad. El navegador aún necesita una URL para solicitarlos. Simplemente viven en hojas de estilo o estilos computarizados, por lo que los métodos de descarga de sólo imágenes a menudo no los detectan.

La URL todavía está ahí. Sólo tienes que mirar las reglas que aplicó el navegador y luego decidir si el resultado es una decoración o una imagen de contenido reutilizable.

¿Qué cuenta como imagen de fondo CSS?

El ejemplo más simple es un estilo en línea:

<section style="background-image: url('/images/hero.jpg')">
  <h1>Spring collection</h1>
</section>

Más a menudo, la URL está en una hoja de estilo:

.hero {
  background-image: url("/images/hero.webp");
  background-size: cover;
  background-position: center;
}

La imagen pertenece a la presentación del elemento, no al contenido del documento. Esa diferencia es importante para los navegadores, las herramientas de accesibilidad y los extractores.

CSS también puede cargar degradados, varias capas de fondo, conjuntos de imágenes, máscaras e ilustraciones de pseudoelementos. Una página que parece utilizar un solo fondo puede estar combinando varios recursos.

¿Por qué al hacer clic derecho no lo ve?

Cuando hace clic derecho en un <img>, el navegador sabe que el puntero está sobre un elemento de imagen y ofrece acciones específicas de la imagen. Un fondo CSS es parte del estilo pintado de una caja. El cuadro también puede contener texto, botones y otros elementos, por lo que el menú contextual lo trata como una región de página normal.

Tomar una captura de pantalla es tentador, pero captura solo el recorte mostrado en la resolución de su pantalla. Si background-size: cover recorta la parte superior e inferior, esas áreas faltantes no aparecerán en la captura de pantalla. Encontrar la URL de origen le proporcionará el archivo real que recibió el navegador.

Método 1: inspeccionar los estilos calculados del elemento

Este es el método manual más confiable en un navegador de escritorio.

1. Haga clic derecho en el área visual y elija Inspeccionar.
2. En el panel Elementos, muévase por los contenedores cercanos hasta que se resalte la región correcta.
3. Abra el panel de estilos calculados.
4. Busque imagen de fondo.
5. Expanda la propiedad para ver la regla y la hoja de estilo que la proporcionó.
6. Abra la URL en una nueva pestaña y luego guarde el archivo si tiene permiso.

El valor calculado puede verse así:

background-image: url("https://cdn.example.com/assets/hero.webp");

Si ve none, inspeccione los elementos padre e hijo. Los diseñadores suelen colocar un fondo en un contenedor en lugar del contenedor de texto visible.

El panel Estilos también puede resultar útil. Muestra el CSS creado e indica declaraciones anuladas. Los estilos calculados responden a lo que el navegador utilizó finalmente después de la cascada.

Método 2: busque en el panel Red

El panel Red registra los recursos solicitados por la página, incluidos fondos que son difíciles de localizar en el DOM.

1. Abra Herramientas de desarrollador antes de recargar la página.
2. Seleccione el panel Red.
3. Filtrar por imagen.
4. Vuelva a cargar e interactúe con la página para que aparezcan fondos responsivos o flotantes.
5. Ordene por dimensiones, tamaño transferido o nombre de archivo.
6. Obtenga una vista previa de los archivos probables e inspeccione sus URL de solicitud.

Esto funciona bien cuando se generan clases CSS, la página utiliza un generador visual o el fondo cambia a través de JavaScript. También puede revelar un archivo de héroe grande detrás de un pequeño recorte en pantalla.

La limitación es el ruido. Logotipos, íconos, píxeles de análisis, avatares e imágenes de contenido aparecen juntos. Utilice dimensiones y la columna Iniciador para limitar la lista. La guía para filtrar píxeles de seguimiento e imágenes pequeñas proporciona un proceso de limpieza más completo.

Método 3: escanear la página renderizada

Un extractor renderizado puede inspeccionar los estilos calculados después de que se ejecuta JavaScript de la página. Pega la URL pública en el extractor de imágenes ExtractPics, deja que la página se cargue y revisa el resultado en busca de imágenes anchas que coincidan con el héroe o el panel.

Este enfoque es más rápido cuando una página tiene muchos fondos o necesitas un inventario completo. También ayuda con las secciones cargadas de forma diferida que no existen hasta que te desplazas. Un analizador HTML estático puede ver el archivo CSS pero nunca conectar un selector generado al elemento visible final.

Ningún extractor puede cargar un fondo que la página nunca solicita. Si la imagen aparece solo después de abrir un menú, cambiar de diapositiva, pasar el cursor sobre una tarjeta o alcanzar un punto de interrupción, reproduzca ese estado primero o inspeccione la hoja de estilo relevante manualmente.

URL relativas y por qué las rutas copiadas a veces fallan

Las URL de CSS pueden ser relativas a la hoja de estilo en lugar de a la página. Considere una hoja de estilo en:

https://example.com/assets/css/site.css

Si contiene:

background-image: url("../images/banner.jpg");

La imagen resuelta está en /assets/images/, no en relación con la página abierta actualmente. Copiar el ../images/banner.jpg sin formato en la barra de direcciones puede conducir a una ubicación incorrecta.

Los estilos calculados y el panel Red normalmente muestran la URL absoluta resuelta. Si está leyendo una hoja de estilo directamente, resuelva la ruta con la dirección de la hoja de estilo.

Múltiples fondos en un elemento

CSS permite capas separadas por comas:

.card {
  background-image:
    linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)),
    url("/photos/cabin.jpg");
}

La primera capa es un degradado generado. El segundo es un archivo de imagen. Un analizador que trate toda la declaración como una URL fallará. Inspeccione cada capa por separado.

Otros elementos pueden utilizar dos archivos reales, como una textura encima de una fotografía. Guarde sólo el recurso que realmente necesita en lugar de asumir que cada capa es un duplicado.

La referencia background-image de MDN documenta el orden de las capas y los valores de imagen admitidos.

el conjunto de imágenes puede proporcionar archivos de fondo responsivos

Los fondos CSS tienen su propio mecanismo de selección responsivo:

.logo-panel {
  background-image: image-set(
    url("panel.png") 1x,
    url("panel@2x.png") 2x
  );
}

El navegador elige un candidato para la densidad de visualización. Algunas implementaciones también ofrecen diferentes formatos con sugerencias type(). Al igual que con HTML srcset, el archivo cargado actualmente no es automáticamente el candidato más grande en la regla.

Busque la declaración de estilo escrita cuando necesite el conjunto completo. La guía de imágenes responsivas explica el modelo de selección HTML relacionado.

Fondos generados por pseudoelementos.

Los diseñadores usan ::before y ::after para íconos, adornos, insignias y arte superpuesto:

.download-card::before {
  content: "";
  background: url("/icons/download.svg") center / contain no-repeat;
}

El pseudoelemento no aparece como un elemento secundario normal en el HTML. Las herramientas de desarrollo generalmente enumeran ::before o ::after debajo del elemento seleccionado, y sus estilos calculados exponen la URL.

Si el recurso es un sprite o máscara SVG en lugar de un ícono independiente, sigue la guía de sprites SVG e íconos web. Guardar el objeto completo puede ser correcto para una copia de seguridad del sitio, mientras que extraer un solo símbolo requiere un proceso diferente.

Imágenes de fondo cargadas por JavaScript

Un script puede asignar un fondo en línea después de una respuesta API o una acción del usuario:

card.style.backgroundImage = `url(${item.coverUrl})`;

Es posible que la URL no exista en el HTML o en la hoja de estilo original. Inspeccione el DOM en vivo, el estilo calculado o el panel de red después de que aparezca el contenido.

Esto es común en carruseles y aplicaciones de una sola página. También es la razón por la que "Ver código fuente de la página" puede no coincidir con lo que ves. La fuente de la página muestra la respuesta del servidor. Herramientas de desarrollo muestra el documento actual después de que los scripts lo hayan modificado.

Por qué el fondo descargado se ve diferente

background-size: cover escala una imagen hasta que llena su cuadro y luego recorta el exceso. posición-fondo elige qué parte permanece visible. Por lo tanto, el archivo fuente puede incluir más escenas de las que muestra la página web.

Con contain, toda la imagen permanece visible, pero puede aparecer un espacio vacío a su alrededor. Una textura repetida puede ser un pequeño mosaico que CSS pinta muchas veces. Un héroe oscuro puede ser en realidad una fotografía brillante bajo un degradado semitransparente.

Guarde el archivo y obtenga una vista previa de él de forma independiente antes de decidir que es incorrecto. La presentación CSS del navegador puede cambiar el recorte, el tono, la repetición, la combinación y la nitidez aparente sin alterar el recurso.

Una lista de verificación de extracción limpia

Por un lado:

• Inspeccione el contenedor visible y sus padres.
• Lea el valor de imagen de fondo calculado.
• Separe varias capas.
• Resuelva las URL con la hoja de estilo cuando sea necesario.
• Busque conjunto de imágenes, pseudoelementos y consultas de medios.
• Abra la URL final y verifique las dimensiones y el formato.

Para un inventario completo de sitios web:

• Renderice cada plantilla y estado importante.
• Desplácese lo suficiente para activar las secciones diferidas.
• Recopile solicitudes de imágenes de red y fondos calculados.
• Agrupe las URL repetidas antes de descargarlas.
• Mantenga la información de la página de origen y del selector con cada activo.
• Revise las licencias y la propiedad antes de reutilizarlas.

La guía de inventario de imágenes de sitios web explica cómo organizar esos campos para un rediseño o migración.

El permiso aún se aplica

Un archivo CSS que sea público no hace que su obra de arte sea de dominio público. Las fotografías de fondo, las ilustraciones, las texturas y los gráficos de la marca siguen estando sujetos a derechos de autor y licencias.

Extraiga archivos de sitios web de su propiedad, sitios que está autorizado a administrar o fuentes cuyos términos permitan el uso previsto. Para trabajos de terceros, verifique la fuente original en lugar de asumir que el fondo es gratuito porque carece de marca de agua. Lee cómo comprobar la fuente y la licencia de una imagen antes de volver a publicarla.

Por qué la imagen oculta normalmente se puede encontrar

La imagen del héroe que falta no suele faltar en absoluto. Se adjunta a una regla en lugar de a una etiqueta <img>. Los estilos calculados le brindan la respuesta más rápida para un elemento; El panel Red es más fácil cuando una página tiene capas de marcas generadas.

Los casos complicados son rutas relativas, pseudoelementos, opciones image-set() y estilos intercambiados por JavaScript. Trabaje hacia afuera desde el elemento que el visitante puede ver. Una vez que sepa qué regla la describe, la solicitud del navegador es mucho más fácil de rastrear y el menú contextual ya no importa.