Que un banner se vea bien en la vista previa del ordenador no garantiza que funcione correctamente en el móvil. La adaptación de imágenes para móvil implica una serie de comprobaciones concretas: si el elemento principal queda recortado, si el texto sigue siendo legible en pantallas pequeñas, si el peso de la imagen ralentiza la carga y si, tras reemplazarla en el panel de administración, lo que se ve en el frontend coincide con lo que se subió. Todo esto tiene poco que ver con la estética y más con una serie de pasos que deben repasarse antes de publicar.
Por qué el criterio de "se ve bien" no es suficiente
La proporción entre la pantalla del ordenador y la del móvil es muy diferente. Una misma imagen horizontal que se muestra completa en una pantalla ancha suele recortarse por los lados o deformarse al comprimirse en una pantalla estrecha. La versión que el diseñador aprueba en el ordenador y la que el usuario ve realmente en su móvil pueden no ser la misma imagen.
Más complicado aún: los banners suelen incluir texto y botones. Un tamaño de letra que parece adecuado en el ordenador puede resultar ilegible en el móvil, o partir una frase de forma incómoda al saltar de línea. Si solo se juzga por "qué tal se ve la vista previa", estos problemas no se detectan antes de publicar.
Por eso, el criterio para adaptar imágenes al móvil debería pasar de "se ve bien o no" a "la información clave sigue estando completa, clara y visible en una pantalla estrecha, y la imagen carga correctamente".
Comprobaciones de visualización antes de publicar
Primero, la posición del elemento principal. Previsualiza el banner con el ancho de un móvil y confirma que las personas, productos o logotipos no quedan fuera del encuadre. Si el elemento principal está desplazado hacia los lados, habrá que considerar recortar una nueva versión o centrarlo.
Segundo, el texto sobre la imagen. Si el banner incluye mensajes promocionales, fechas de campaña o texto en botones, verifica uno por uno que se muestren completos en el ancho del móvil, sin cortes ni saltos de línea que dificulten la lectura. El texto forma parte de la imagen y modificarlo no es tan sencillo como cambiar texto HTML, así que es mejor incluir menos y evitar acumular demasiada información.
Tercero, la posición de botones y enlaces. Algunos banners incluyen zonas clicables dentro de la propia imagen; tras el recorte en móvil, el botón puede quedar cortado por la mitad y el usuario no puede pulsarlo. Antes de publicar, conviene probar en un móvil real que la zona de clic sigue estando disponible.
Cuarto, la transición entre la imagen y el fondo. Si el borde de la imagen no coincide con el color de fondo de la página, en el móvil pueden aparecer bloques de color o bordes blancos visibles, problemas que no siempre se aprecian en el ordenador.
El peso de la imagen y la carga también cuentan
La conexión móvil es mucho más variable que la banda ancha de una oficina. El banner suele ser la imagen más grande de la página; si no se controla su peso, el usuario puede ver primero un espacio en blanco mientras la imagen se carga poco a poco.
El criterio es: exportar la imagen según el tamaño real de visualización, no usar una imagen enorme y reducirla a la fuerza. Si el ancho de visualización es X, exporta cerca de ese ancho para evitar que el móvil descargue una imagen mucho mayor que la pantalla. En cuanto al formato, las fotografías suelen funcionar mejor con formatos que reducen el peso tras la compresión, mientras que las imágenes con fondo transparente o gráficos simples pueden usar formatos que admitan transparencia. La elección concreta dependerá de las herramientas del equipo y del soporte del panel de administración.
Después de exportar, revisa el tamaño del archivo. Si es claramente grande, vuelve a comprimirlo. Al comprimir, evita que el texto se vuelva borroso, sobre todo si hay letras pequeñas, ya que una compresión excesiva afecta directamente a la legibilidad.
Pasos que se suelen pasar por alto al reemplazar el banner en el panel
Muchos problemas no surgen en la fase de diseño, sino al reemplazar la imagen en el panel de administración. El responsable recibe la nueva imagen, la sube y guarda sin volver a comprobarla en el móvil; como resultado, el frontend sigue mostrando la imagen antigua o la nueva aparece estirada.
Al reemplazar, se recomienda seguir este orden: confirmar que las dimensiones de la nueva imagen coinciden con las que exige el panel; tras subirla, no conformarse con la vista previa del panel, sino abrir la página pública en el móvil y verla realmente; una vez confirmado que se muestra bien, comprobar que los enlaces de la imagen siguen siendo clicables y que la dirección de destino es correcta; por último, limpiar la caché del navegador o probar en otro dispositivo para evitar ver una versión antigua en caché.
Si el panel permite configurar banners distintos para diferentes dispositivos, habrá que confirmar por separado qué imagen se muestra en la versión de ordenador y cuál en la de móvil, evitando que el móvil siga usando la imagen grande de escritorio.
Convertir la revisión en un paso fijo
La adaptación de imágenes para móvil es algo que, si se deja a la improvisación, se pasa por alto con facilidad. Lo más fiable es convertirla en un paso fijo del proceso de publicación: tras subir el banner, abrir la página pública en el móvil y revisar el elemento principal, el texto, los botones, el peso y los enlaces. Solo cuando todo esté correcto se considera la publicación terminada.
Si en el equipo hay varias personas encargadas de la operación, estos puntos de control pueden incluirse en una lista de verificación: quien reemplaza, comprueba. Así, aunque cambie la persona, no se publicará algo solo porque "se ve bien".
La próxima vez que reemplaces un banner, antes de opinar sobre si se ve bonito, abre la página en el móvil, repasa estos puntos y después decide si hace falta ajustar algo.
