Por qué las imágenes extraídas se ven borrosas y cómo encontrar el original

Encuentra la foto correcta en una página web, la guarda y abre el archivo esperando la misma imagen nítida que vio en el navegador. En cambio, parece suave, en bloques o extrañamente pequeño. Por lo general, esto no significa que el sitio web tenga un mal original. Más a menudo, descargaste una de las versiones livianas que el sitio creó para una vista previa en miniatura, tarjeta, pantalla móvil o zoom.

Los sitios web modernos rara vez envían un archivo de imagen a todos. Mantienen varios tamaños y dejan que el navegador elija uno. Un teléfono puede recibir una copia de 480 píxeles, mientras que una pantalla de escritorio recibe una copia de 1.600 píxeles. Una cuadrícula de productos puede utilizar una miniatura de 300 píxeles aunque la galería de productos tenga un original de 2400 píxeles. Si su método de descarga toma la versión que se muestra actualmente, puede guardar el archivo más pequeño.

La solución es identificar qué tipo de vista previa descargó y luego rastrearla hasta el archivo más grande que realmente proporciona la página. No es necesario ampliar la miniatura ni afilarla artificialmente. En muchos casos, el mejor archivo ya está vinculado en la página.

Seis razones por las que una foto nítida se vuelve suave

Una imagen descargada normalmente se ve borrosa por una de seis razones:

1. Guardaste una miniatura en lugar del original.
2. El navegador seleccionó una imagen responsiva más pequeña de srcset.
3. Una CDN de imagen cambió el tamaño o comprimió el archivo a través de parámetros de URL.
4. Guardaste una captura de pantalla en lugar del archivo de imagen.
5. El sitio amplió una pequeña fuente con CSS.
6. El archivo se convirtió o comprimió nuevamente después de la descarga.

Comience verificando las dimensiones en píxeles del archivo descargado. Un archivo que mide 320 por 240 píxeles no permanecerá nítido cuando se muestre con 1200 píxeles de ancho. El tamaño del archivo por sí solo no es suficiente: un WebP detallado de 1.600 píxeles puede ser más pequeño que un PNG de 800 píxeles mal comprimido.

El tamaño mostrado y el tamaño real son diferentes

Cada imagen rasterizada tiene un ancho y un alto intrínsecos. Estas son las dimensiones almacenadas en el archivo. El navegador puede mostrar ese archivo en casi cualquier tamaño CSS, que es donde comienza la confusión.

Supongamos que una página carga una miniatura de 400 por 300 píxeles pero la extiende a lo largo de una tarjeta de 800 píxeles. Puede parecer aceptable a primera vista porque el navegador suaviza los píxeles ampliados. Una vez que lo guardas y lo inspeccionas de cerca, los detalles que faltan se vuelven obvios.

The reverse also happens. A page can load a 2,000-pixel image and display it in a 500-pixel card. Saving that source gives you far more resolution than its on-screen size suggests.

En un navegador de escritorio, abra Herramientas de desarrollo, seleccione la imagen y compare sus dimensiones renderizadas con naturalWidth y naturalHeight. Los valores naturales describen el archivo que cargó el navegador. Si el elemento se muestra más ancho que su ancho natural, se espera que esté borroso.

You probably downloaded a thumbnail

Las miniaturas hacen que las galerías y las páginas de la tienda sean más rápidas. Una página puede mostrar veinte pequeñas vistas previas de productos sin obligar al visitante a descargar veinte fotografías de resolución completa. Cuando alguien abre la galería o hace zoom, el sitio solicita un archivo más grande.

Look for these clues in the image URL:

• Dimensiones como 300x300, 640w o width=480
• Palabras como pulgar, miniatura, pequeño, vista previa o medio
• Un sufijo estilo WordPress como photo-768x512.jpg
• Parámetros de CDN como w=600, h=400, q=70 o fit=crop
• Un nombre de archivo que difiere del enlace que aparece alrededor de la miniatura.

A menudo resulta útil hacer clic en la imagen antes de guardarla. La miniatura de un producto puede abrir un visor de zoom, un elemento de la galería puede vincularse a un archivo más grande y una cuadrícula de cartera puede vincularse directamente al activo original. Si la página proporciona esa ruta, úsela en lugar de editar la URL mediante conjeturas.

Para obtener un tutorial más detallado, consulta cómo encontrar una imagen a tamaño completo en lugar de una miniatura.

Las imágenes responsivas pueden cambiar con su pantalla

El marcado de imágenes responsivo le ofrece al navegador varios candidatos. Un elemento simplificado podría verse así:

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 640w, photo-1280.jpg 1280w, photo-2400.jpg 2400w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Mountain lake at sunrise"
>

El navegador considera el ancho del diseño, la densidad de la pantalla y la instrucción sizes y luego elige un candidato. Al hacer clic derecho y guardar, es posible que obtenga el candidato seleccionado, no necesariamente el más grande en srcset.

Este comportamiento es útil para el rendimiento. Enviar una fotografía de 2.400 píxeles a un teléfono pequeño desperdicia datos. Es menos útil cuando su objetivo es recuperar el activo original para una migración o copia de seguridad permitida.

Inspeccione el elemento y lea su srcset completo, o utilice un extractor que recopile cada candidato receptivo. La guía de srcset y el elemento picture explica detalladamente las reglas de selección. La documentación de imágenes responsivas de MDN también es una referencia técnica confiable.

Las CDN de imágenes transforman archivos a través de la URL

Muchos sitios envían imágenes a través de una red de entrega de contenido. El archivo original permanece almacenado mientras la CDN crea versiones redimensionadas, recortadas, comprimidas o reformateadas según demanda.

Considere una URL genérica como esta:

https://images.example.com/catalog/shoe.jpg?w=480&h=480&fit=crop&q=70

La ruta puede apuntar a una foto de producto grande, pero la consulta solicita un recorte cuadrado de 480 píxeles con una configuración de calidad reducida. Una página diferente podría solicitar la misma fuente a 1.600 píxeles.

No elimine automáticamente parámetros de URL desconocidas. Algunos servicios requieren una transformación firmada y cambiarla puede producir un error 403 o un enlace roto. En su lugar, compruebe si la propia página proporciona un candidato más grande. Puedes conocer los patrones comunes en la guía de parámetros de URL de CDN de imágenes.

Las capturas de pantalla no pueden recuperar los detalles faltantes

Una captura de pantalla registra los píxeles que se muestran en su pantalla. No copia el archivo fuente. El zoom del navegador, la escala de visualización y el tamaño de la imagen visible afectan el resultado.

Las capturas de pantalla están bien cuando necesitas documentar un diseño o capturar un estado que no tiene un archivo de imagen separado. Son una mala elección para fotografías de productos, obras de arte, logotipos o activos de migración. Una captura de pantalla también puede aplanar la transparencia, recortar los bordes, agregar píxeles de la interfaz circundante y convertir todo a un nuevo formato.

Si una imagen existe como un archivo separado, descárguelo. Utilice una captura de pantalla sólo cuando la pantalla en sí sea lo que necesite conservar.

Una forma práctica de encontrar la imagen más grande disponible

Utilice esta secuencia en lugar de intentar realizar ediciones de URL aleatorias:

1. Verifique las dimensiones descargadas.

Abra las propiedades del archivo o el panel de información y observe el ancho y alto en píxeles. Compara esas dimensiones con el espacio donde pretendes utilizarlo. Una imagen de 500 píxeles no es adecuada para un banner de 1500 píxeles de ancho.

2. Abra la imagen o el elemento de la galería.

Haga clic en la miniatura y espere a que se cargue cualquier vista de zoom, caja de luz o página de elemento completa. Guarde desde esa vista si expone una fuente más grande.

3. Inspeccione a los candidatos receptivos

Busque los elementos srcset, <picture> y <source>. Registre el candidato con el descriptor de ancho más grande, pero confirme que realmente se carga y que puede usarlo.

4. Mira los enlaces alrededor de la imagen.

Una miniatura suele estar envuelta en un ancla que apunta al original. Inspeccione el enlace principal antes de cambiar la URL de la imagen.

5. Revisar las transformaciones de CDN

Compare las URL de imágenes utilizadas por la miniatura, la galería, la vista ampliada y la vista previa social. Una versión más grande proporcionada en otra parte de la misma página es más segura que inventar una transformación no documentada.

6. Escanee la página renderizada.

Pegue la URL de la página pública en el descargador de imágenes HD de ExtractPics. Un escaneo renderizado puede recopilar fuentes de imágenes normales, candidatos responsivos, archivos cargados de forma diferida y fondos CSS en un solo lugar. Ordene o filtre el resultado por dimensiones y luego obtenga una vista previa del candidato probable más grande antes de descargarlo.

Cómo saber si el archivo más grande es realmente mejor

Más píxeles no siempre significan más detalles reales. Un sitio puede mejorar una fuente pequeña y guardarla como un archivo más grande. Verifique la imagen con un zoom del 100 por ciento y observe los bordes finos, el cabello, las etiquetas de los productos o la textura.

La conversión repetida puede causar daños visibles, especialmente con JPG. Mantenga el original limpio más grande como maestro y haga copias separadas para cambiar el tamaño o comprimirlo. La guía existente para guardar imágenes sin perder calidad cubre esa parte del flujo de trabajo.

No confundas resolución con permiso

Encontrar un archivo más grande no otorga el derecho a publicarlo. La capacidad técnica para descargar una imagen y el permiso legal para reutilizarla son cuestiones distintas.

Aplique estos pasos a las imágenes que posee o que puede administrar, incluidas las imágenes con licencia y las copias de seguridad legítimas. Si la imagen pertenece a otra persona, revisa su licencia o pregunta al propietario antes de volver a publicarla. La guía de derechos de autor de imágenes del sitio explica la diferencia entre descarga personal y reutilización pública.

Lista de verificación final

Cuando una imagen extraída se vea borrosa, no la enfoque primero. Comprueba la fuente.

• Confirme las dimensiones reales en píxeles del archivo.
• Compare su tamaño natural con su tamaño mostrado.
• Abra la galería o la vista de zoom.
• Inspeccione srcset, <picture>, enlaces principales y parámetros CDN.
• Prefiere un archivo más grande que la página ya expone.
• Evite capturas de pantalla cuando exista un archivo fuente.
• Mantenga el original limpio y edite una copia.
• Verifique el permiso antes de reutilizar el activo.

La mayoría de las descargas borrosas resultan ser vistas previas que hacen su trabajo: cargarse rápidamente en un espacio pequeño. Comience con las dimensiones en píxeles. Si la lima es pequeña, afilarla es una distracción. Siga el enlace de la galería, inspeccione los candidatos receptivos y verifique si la CDN está entregando una copia transformada. A menudo ya hay un archivo más grande, una capa detrás de la miniatura que guardó primero.