Lista de verificación de control de calidad de imágenes de migración de sitios web

La migración de un sitio web puede tener éxito técnicamente y dañar sus imágenes. Las páginas devuelven 200, la navegación funciona y el nuevo diseño parece pulido en una computadora portátil. Sin embargo, los zooms de productos cargan miniaturas, las tarjetas sociales todavía usan el dominio provisional, los diagramas de artículos antiguos devuelven 404 y los recortes móviles eliminan el tema.

El control de calidad de imágenes necesita un proceso de antes y después. El sitio antiguo proporciona la línea de base, el inventario aprobado define qué se debe mover y el nuevo rastreo revela lo que realmente sucedió.

Utilice esta lista de verificación para cambios de dominio, movimientos de CMS, migraciones de plataformas de comercio electrónico, reemplazos de CDN y rediseños importantes. Se supone que usted es propietario o está autorizado a administrar los activos.

Antes de la migración: establecer la línea de base

Exporte la lista de páginas actual desde mapas del sitio, registros CMS y páginas de inicio de análisis importantes. Rastree las plantillas renderizadas para que se incluyan imágenes diferidas y fondos CSS.

Para cada suceso significativo, registre:

• URL de página antigua
• URL de la imagen y función
• Dimensiones naturales
• Dimensiones mostradas
• Texto alternativo y título
• Candidatos receptivos
• Activo maestro o ID estable
• Propiedad o licencia
• Mantener, reemplazar o eliminar la decisión

La guía de inventario de imágenes de sitios web proporciona la estructura completa.

Take screenshots of a representative set of pages at mobile and desktop widths. Screenshots are not asset backups, but they are useful visual references for crop, placement, and missing-state comparison.

Conservar archivos originales

No cree la migración a partir de miniaturas almacenadas en caché o transformaciones de CDN actuales. Exporte originales desde el CMS, almacén de objetos, catálogo de productos o archivo aprobado.

Verify that the files open and record hashes. A backup that contains corrupted zero-byte files is not a backup.

Keep transformation recipes separately: target widths, crops, quality, formats, and focal points. The new platform should generate derivatives from masters.

Crear una asignación de antiguo a nuevo

Mapee cada activo retenido:

old delivered URL -> stable asset ID -> new master -> new public URL

Si las URL de medios antiguos tienen vínculos de retroceso, tráfico de búsqueda, usos integrados o documentación del cliente, decida si necesitan redireccionamientos. No todas las URL en miniatura merecen una redirección permanente, pero las originales importantes y las imágenes compartidas sí suelen merecerla.

Audite el entorno de migración antes del lanzamiento

Respuestas de imagen rota

Verifique 404, 403, 500, bucles de redireccionamiento y respuestas HTML entregadas en las URL de imágenes. Verifique los valores reales de Content-Type.

Referencias de puesta en escena

Busque HTML, CSS, JSON-LD, manifiestos y contenido de bases de datos para dominios provisionales, URL R2 temporales, host local, hosts CDN antiguos y rutas de desarrollo.

Contenido mixto

Una página HTTPS no debe solicitar imágenes HTTP. Los navegadores pueden bloquearlos, dejando lagunas que los desarrolladores pasan por alto en una sesión cálida.

Controles de acceso

Las imágenes públicas no deben requerir cookies de administrador ni enlaces de vista previa que caduquen. Los rastreadores sociales y los motores de búsqueda no comparten su inicio de sesión.

Sensibilidad entre mayúsculas y minúsculas

Pasar de un sistema de archivos que no distingue entre mayúsculas y minúsculas a un host que sí distingue entre mayúsculas y minúsculas puede romper Photo.JPG referenciado como photo.jpg.

Comprueba la calidad y resolución de la imagen.

Compare las dimensiones naturales con las dimensiones renderizadas en cada punto de interrupción. Marcar imágenes que se muestran más anchas que su resolución de origen útil.

Inspeccionar:

• Imágenes de héroe y pintura con contenido más grande
• Archivos de zoom del producto
• Pantallas retina o de alta densidad
• Diagramas de artículos de ancho completo
• Avatares de autor
• Logotipos y tarjetas sociales.

No juzgues sólo por las dimensiones del archivo. Obtenga una vista previa de los detalles al 100 por ciento para detectar miniaturas mejoradas o compresión agresiva. Utilice por qué las imágenes extraídas se ven borrosas para realizar un diagnóstico.

Validar el marcado de imagen responsivo

Para cada componente importante:

• Confirme que existen candidatos srcset y devuelva imágenes.
• Confirma que sizes coincide con el diseño real.
• Verifique el orden de origen y el formato compatible con <picture>.
• Inspeccione currentSrc en dispositivos móviles, tabletas y computadoras de escritorio.
• Pruebe pantallas estándar y de alta densidad.
• Confirme que los cultivos artísticos mantengan visible al sujeto.
• Asegúrese de que el respaldo src sea válido.

La guía de imágenes responsivas explica las reglas de selección.

Prueba de carga diferida

Desplácese lentamente por las páginas largas y confirme que aparezcan todas las imágenes planificadas. Abra acordeones, pestañas, diapositivas y cargue más estados. Esté atento a los marcadores de posición que nunca se intercambian, las imágenes que se cargan sólo después de un gran retraso y las listas virtualizadas que pierden registros anteriores.

No cargue de forma diferida la imagen principal de la mitad superior de la página cuando sea el elemento LCP probable. Verifique la plantilla real en lugar de aplicar una regla a cada imagen.

Read the lazy image extraction guide for hard-to-detect states.

Verificar fondos CSS

Las ilustraciones destacadas y las secciones decorativas pueden desaparecer incluso cuando todos los <img> funcionan. Inspeccione la imagen de fondo calculada, los pseudoelementos, las máscaras y las variantes de consulta de medios.

Confirme que las rutas relativas se resuelvan desde la nueva ubicación de la hoja de estilo. Un archivo CSS movido de /css/ a /assets/build/ puede romper las referencias de ../images/.

Utilice la guía de antecedentes CSS para una verificación sistemática.

Verificar las relaciones entre productos y galerías.

Para migraciones de carteras y comercio electrónico, un archivo existente no es suficiente. Comprobar:

• Asociaciones de producto a imagen
• Mapeo de imágenes variantes
• Orden de la galería
• Imagen principal o destacada
• Versión ampliada
• muestras de color
• Miniaturas de colección
• Subtítulos y créditos

Muestra de productos simples y complejos. Un producto de una sola imagen no puede revelar errores en el orden de la galería.

The product image migration guide covers catalog-specific risks.

Validate alt text and accessibility

Compare el texto alternativo a nivel de ocurrencia con la línea de base. Bandera:

• Faltan atributos alternativos
• Nombres de archivos utilizados como descripciones.
• Texto genérico duplicado
• Imágenes decorativas anunciadas innecesariamente.
• Linked images with no accessible purpose
• Texto importante incrustado solo en imágenes.

Do not restore bad alt text blindly. Use the migration as a review opportunity, with human judgment and page context. The alt text export guide provides a worksheet method.

Test logos and identity images

Controlar:

• Header and footer logos
• Dark and light variants
• Favicon links
• Icono táctil de Apple
• Iconos manifiestos y propósito enmascarable.
• Open Graph images
• Imágenes de tarjetas de Twitter
• Imagen del esquema de organización

Clear caches or use versioned URLs when testing. Social platforms can retain an older preview after the page is fixed.

Utilice la guía de imágenes de identidad del sitio web para las ubicaciones de declaración.

Validar formatos y encabezados.

Asegúrese de que los archivos WebP y AVIF se entreguen con los tipos MIME correctos. Confirme los formatos alternativos donde su audiencia o sus herramientas los necesiten.

Verifique los SVG para ver si tienen marcas válidas y un manejo seguro. Los archivos GIF o WebP animados aún deberían animarse si la animación es intencional. La transparencia PNG no debe obtener un fondo blanco o negro durante la conversión.

Comparar el tamaño y el rendimiento del archivo

Una migración puede reemplazar accidentalmente derivados optimizados con originales. Revise los bytes transferidos, no solo la apariencia de la imagen.

Busque:

• Imágenes de varios megabytes en tarjetas pequeñas
• Descargas duplicadas de formatos alternativos y modernos
• Faltan encabezados de caché
• Errores de caché CDN
• Configuraciones de calidad innecesarias
• Cambio de diseño causado por dimensiones faltantes
• LCP lento causado por un descubrimiento tardío o una carga diferida

Utilice los datos de campo de PageSpeed ​​Insights y Search Console después de la implementación. Las pruebas de laboratorio no pueden reemplazar las métricas de los usuarios reales.

Arrastrarse después del lanzamiento

Ejecute un rastreo público completo desde fuera de la sesión del administrador. Comparar:

• Recuento de páginas esperado
• Apariciones de imágenes
• Activos únicos
• Respuestas rotas
• Referencias de dominio antiguo
• Metadatos faltantes
• Nuevos duplicados

Utilice el servicio Firecrawl alojado localmente u otro rastreador con reconocimiento de renderizado para páginas donde JavaScript proporciona contenido. Almacene la fecha de rastreo y la configuración para que se pueda reproducir el resultado.

Muestra visualmente

Las comprobaciones automatizadas no pueden decidir si un recorte corta una cara o si un diagrama es demasiado pequeño para leerlo. Revisar un conjunto representativo:

• Página de inicio
• Índice de blog y artículo.
• Lista de productos y producto detallado.
• Galería larga
• Estado de búsqueda o resultados
• Acerca de y páginas de contacto
• Navegación móvil y pie de página

Pruebe los anchos comunes de dispositivos móviles y de escritorio. Compare con capturas de pantalla de referencia aprobadas.

Monitorear después del lanzamiento

Conserve el mapeo antiguo y el informe de control de calidad. Observe los registros del servidor y el monitoreo de errores para detectar rutas de medios faltantes. Revise Search Console para detectar problemas de rastreo y vistas previas sociales de páginas importantes.

No elimine el antiguo almacén de medios inmediatamente. Mantenga un período de reversión, controles de acceso y propiedad definidos. Cuando finalice el período de retención, elimínelo mediante un proceso documentado.

Criterios de aprobación

La migración estará lista cuando:

• Se contabilizan todos los activos de mantenimiento aprobados.
• Ninguna página pública hace referencia a URL provisionales o de entrega privada.
• Las URL de medios antiguos críticos se comportan de acuerdo con el plan de mapeo.
• Las imágenes responsivas y diferidas funcionan en puntos de interrupción probados.
• Las relaciones entre productos y galerías coinciden con la fuente.
• El texto alternativo, los subtítulos, los créditos y las licencias se conservan o mejoran deliberadamente.
• La identidad y los activos sociales utilizan el ámbito de la producción.
• Se resuelven las respuestas de imágenes rotas.
• El desempeño no retrocede más allá de los umbrales acordados.
• Pases de muestreo visual humano.

Conciliar primero y luego retirar el sistema anterior.

Una página de inicio pulida puede ocultar una migración complicada. La verdadera prueba es si el nuevo sitio tiene en cuenta las imágenes, las URL, los significados y el comportamiento de respuesta aprobados del sitio anterior.

Deje que el rastreo detecte archivos inactivos, dominios obsoletos y dimensiones sospechosas. Dejemos que la gente capte el retrato recortado a la altura del mentón o el diagrama cuyas etiquetas se volvieron ilegibles. Mantenga disponible el antiguo sistema de medios hasta que se aprueben ambas revisiones y se hayan observado las redirecciones en producción. Retirarlo anticipadamente convierte un desajuste reparable en un trabajo de recuperación.