Cómo crear un inventario de imágenes de un sitio web antes de rediseñarlo
Un proceso de inventario reutilizable para equipos que se preparan para rediseñar, migrar, archivar o limpiar un sitio web con muchas imágenes.
A redesign is a dangerous time for images. The new templates look clean, but an old article loses its diagrams. Product thumbnails survive while original files disappear. Decorative assets are copied without anyone knowing whether they are still used. Alt text, captions, licenses, and crop decisions get separated from the files they describe.
Un inventario de imágenes del sitio web evita ese desorden. Es una lista estructurada de las imágenes que utiliza el sitio actual, dónde aparecen, qué papel desempeñan, quién las posee y qué debería suceder durante el rediseño.
The inventory is not just a folder of downloads. A folder cannot tell you which page used a file, whether two URLs are duplicates, or whether a hero crop should be replaced. Build the records first, then collect the authorized files.
Definir el propósito del inventario.
Anote la decisión que debe sustentar el inventario. Los objetivos comunes incluyen:
- Mueva cada imagen de contenido de su propiedad a un nuevo CMS.
- Reduzca la duplicación de medios y almacenamiento.
- Encuentre recursos rotos o de baja resolución.
- revisar el texto alternativo y la accesibilidad.
- Confirme las licencias antes de volver a publicar.
- Separe los activos de marca de la fotografía editorial.
- Cree una copia de seguridad independiente de la CDN actual.
El propósito determina lo que conservas. Una migración de contenido puede excluir píxeles de seguimiento e íconos de interfaz. Un inventario de rediseño completo necesita logotipos, favicons, fondos y también el sistema de iconos.
Elige la fuente de la verdad
Ningún rastreo lo ve todo. Combina fuentes que controlas:
- Mapas de sitio XML y listas de páginas canónicas
- Registros multimedia CMS
- Exportaciones de productos o catálogos
- Páginas públicas renderizadas
- CSS y activos del sistema de diseño
- Almacenamiento de objetos o directorios de carga.
- Páginas de destino de Analytics o Search Console
El CMS puede contener cargas no utilizadas. El rastreo público puede omitir borradores privados y archivos cargados solo después de la interacción. El almacenamiento puede contener originales a los que no se hace referencia en ninguna página. Trate las diferencias como hallazgos en lugar de asumir que una fuente está equivocada.
Primero cree una fila por aparición de imagen
En la etapa de descubrimiento, registre cada suceso significativo:
| campo | Propósito de ejemplo |
|---|---|
| URL de la página | Muestra dónde se utiliza la imagen. |
| Elemento o rol | Héroe, galería de productos, figura en línea, logotipo, fondo |
| URL entregada | Archivo exacto solicitado por el navegador |
| URL candidatas | srcset, zoom o variantes de formato |
| Texto alternativo | Preserva el contexto de accesibilidad |
| Subtítulo | Preserva el significado editorial |
| Dimensiones naturales | Identifica miniaturas y archivos débiles |
| Formato | Supports conversion and compatibility decisions |
| Status | Keep, replace, merge, archive, or review |
Un archivo puede aparecer en muchas páginas con texto alternativo o significado diferente. Si colapsa a una fila por archivo demasiado pronto, perderá ese contexto.
Después del descubrimiento, cree una tabla de activos separada con un registro por maestro subyacente y vincule las ocurrencias a él.
Crawl the rendered pages
Utilice el extractor de imágenes ExtractPics renderizado localmente en cada plantilla de página importante. Para un sitio de propiedad más grande, trabaje desde el mapa del sitio y almacene los resultados en lotes.
Recolectar:
<img>fuentes y candidatos responsivos<imagen>fuentes- Imágenes cargadas de forma diferida después de desplazarse
- fondos CSS
- Open Graph e imágenes sociales
- Logotipos, íconos y activos de manifiesto cuando estén dentro del alcance
La guía de imágenes diferidas y la guía de fondo CSS cubren las dos lagunas más comunes.
No descargues todo inmediatamente. Exporta URL y metadatos para que puedas filtrar primero.
Normalice las URL con cuidado
Resuelva rutas relativas y elimine fragmentos que no afecten al recurso. Mantenga los parámetros de consulta hasta que los comprenda. Los parámetros de ancho, recorte, calidad, firma y formato pueden representar diferentes archivos o reglas de entrega.
Cree una URL sin formato y una clave de agrupación normalizada. La URL sin formato conserva la evidencia. La clave de agrupación ayuda a asociar variantes de CDN con una fuente.
Lee la guía de parámetros de CDN de imágenes antes de eliminar transformaciones.
Dimensiones de registro y tipo de archivo real
Descargue o inspeccione candidatos autorizados y capture:
- Ancho y alto de píxel
- Tamaño de byte
- tipo MIME
- Extensión
- Perfil de color cuando sea relevante
- Transparencia
- Animación
No confíes en el nombre del archivo. Una URL que termina en .jpg puede devolver WebP a través de la negociación de contenido. Un tamaño de byte grande no garantiza grandes dimensiones ni buenos detalles.
Vista previa de archivos al 100 por ciento. Marque miniaturas obvias, recortes agresivos y desenfoque mejorado. La guía de imágenes borrosas explica las señales de alerta.
Separar activos por función
Los roles útiles incluyen:
- Fotografía editorial
- Maestro de producto
- Derivado del producto
- Diagrama o infografía
- avatar del autor
- Logotipo o marca denominativa
- Favicon o icono de aplicación
- Vista previa social
- fondo css
- Icono de interfaz
- Activo de seguimiento o publicidad
- Marcador de posición
Los grupos basados en roles evitan que un filtro elimine un ícono significativo de 64 píxeles mientras mantiene un anuncio de 1200 píxeles.
Utilice la guía de filtrado para obtener resultados de extracción ruidosos.
Encuentra duplicados después de preservar el contexto
Comience con coincidencias de URL exactas y luego compare los hash de los archivos descargados. El hash perceptual puede agrupar versiones redimensionadas o recomprimidas.
No elimine los duplicados inmediatamente. Los mismos bytes pueden usarse intencionalmente en varias páginas. Diferentes cultivos pueden tener distintos diseños. Elija un maestro canónico, registre cada ocurrencia y actualice las referencias durante la implementación.
La guía de imágenes duplicadas proporciona una secuencia segura.
Agregar información de propiedad y licencia
For every asset intended to survive the redesign, record:
- Propietario o creador
- Ubicación de origen
- License or written permission
- Requisitos de atribución
- Límites de uso
- Referencia de compra o contrato
- Fecha de revisión
"Encontrado en un sitio antiguo" no es una licencia. Un rediseño vuelve a publicar el material, por lo que los derechos inciertos deben resolverse antes del lanzamiento.
Utilice la lista de verificación de fuentes y licencias para archivos de terceros.
Auditar texto alternativo en contexto
El texto alternativo pertenece a una ocurrencia, no automáticamente al archivo. La misma foto de rostro puede identificar a un orador en una página y ser decorativa en otra. Copiar una descripción en todas partes puede crear repeticiones o significados incorrectos.
Exporte los valores existentes, marque el texto faltante y sospechoso y luego haga que un humano revise cada contexto importante. Los nombres de archivos y los subtítulos generados por computadora son pistas, no decisiones finales de accesibilidad.
La guía de exportación de texto alternativo explica cómo construir esa hoja de trabajo.
Decidir qué sucede con cada activo
Utilice estados explícitos:
- Conservar: master adecuado y derechos confirmados
- Reemplazar: calidad deficiente, imagen desactualizada o discrepancia de marca
- Fusionar: el duplicado debe apuntar a un recurso canónico
- Reexportación: el maestro existe pero el derivado actual no es adecuado
- Archivo: ya no se publica pero se conserva internamente
- Eliminar: seguimiento, marcador de posición roto o desorden no utilizado
- Reseña: propiedad, propósito o fuente inciertos
Agregue un propietario y una fecha de vencimiento a cada elemento de revisión. De lo contrario, la migración se estancará en una pila de registros de "tal vez".
Planificar nuevos derivados
El rediseño debería crear derivados web a partir de originales conservados, no reutilizar cualquier miniatura que estuviera en la página anterior.
Para cada componente, defina:
- relación de aspecto
- Ancho máximo de visualización
- Anchos de candidatos responsivos
- Formatos preferidos
- Configuraciones de calidad
- Cultivos dirigidos por el arte
- punto focal
- Prioridad de carga
Mantenga el original separado de los archivos generados. Documente la transformación para que el sitio pueda reproducirla.
Asignar URL antiguas a URL nuevas
Una migración de imágenes puede interrumpir el tráfico y las incrustaciones externas incluso cuando las páginas se redireccionan correctamente. Decida si las URL importantes de medios antiguos deben redirigirse, permanecer publicadas o reemplazarse en el contenido.
Mantener una tabla de mapeo:
old URL -> asset ID -> new canonical URL -> redirect status
Pruebe caracteres codificados, rutas en mayúsculas, espacios y transformaciones basadas en consultas. No asuma que un nombre de host CDN permanecerá disponible después de que cambie la cuenta.
Validar el sitio rediseñado
Después de la migración, rastree el nuevo sitio y compárelo con el inventario aprobado.
Comprobar:
- Cada elemento de conservación aparece donde se esperaba.
- Ninguna página hace referencia al dominio o depósito de almacenamiento retirado.
- Las dimensiones naturales se adaptan a las ranuras renderizadas.
- Los candidatos responsivos se cargan correctamente.
- El texto alternativo y los subtítulos sobrevivieron.
- Las imágenes sociales y de aplicaciones utilizan el nuevo dominio.
- No existen archivos rotos y no autorizados.
- Los redireccionamientos funcionan para URL importantes de activos antiguos.
Utilice la lista de verificación de control de calidad de imágenes de migración de sitios web para la comparación final.
Hacer que el inventario sea mantenible
Una hoja de cálculo única se vuelve obsoleta rápidamente. Agregue datos de uso y propiedad de activos al CMS cuando sea posible. Requiere texto alternativo o una opción decorativa explícita. Almacene documentos de licencia con ID de activos estables. Generar derivados a través de un pipeline documentado.
Programe comprobaciones periódicas para detectar URL de imágenes rotas, cargas no utilizadas, dimensiones faltantes y fuentes externas que venzan. Una pequeña limpieza mensual es más fácil que reconstruir todo durante el próximo rediseño.
Una secuencia práctica del proyecto.
- Congele la URL y el alcance del contenido.
- Exporte CMS, catálogos, mapas de sitio y listas de almacenamiento.
- Rastrear plantillas de páginas renderizadas.
- Cree tablas de ocurrencia y activos.
- Normalizar, clasificar y agrupar variantes.
- Verifique los maestros, las dimensiones, los derechos y el contexto.
- Asigne decisiones de conservación, reemplazo, fusión, archivo o revisión.
- Cree nuevos derivados y asignaciones de URL.
- Migrar contenido y metadatos.
- Rastree el nuevo sitio y concilie todos los registros aprobados.
Haga que el inventario sea útil después del lanzamiento
Una carpeta de imágenes descargadas es fácil de crear y sorprendentemente difícil de usar. Seis meses después, nadie recuerda qué cosecha pertenecía a la página de inicio o si el retrato sin etiqueta fue autorizado para otra campaña. El inventario es lo que mantiene esas respuestas adjuntas a los archivos.
Registre las ocurrencias antes de fusionar duplicados y mantenga los maestros fuente alejados de los derivados desechables. Después del lanzamiento, concilie el nuevo rastreo con la lista aprobada en lugar de confiar en un puñado de capturas de pantalla. El inventario se mantiene cuando alguien puede rastrear una imagen rota o cuestionable sin reabrir todo el proyecto de migración.