Para una web empresarial, elige las dimensiones según el espacio que ocupará la imagen, el detalle que necesita el comprador y el recorte en el móvil. Conserva el archivo original y prepara versiones web para el diseño acordado. Una regla como «todas las imágenes a 2.000 píxeles de ancho» puede producir archivos innecesarios y encuadres poco útiles.
Esta guía ayuda al propietario a preparar fotografías de productos, instalaciones y servicios para su diseñador. El objetivo es entregar material utilizable y saber cómo revisarlo, sin tener que aprender a manejar un editor de imágenes.
Distingue píxeles, proporción y peso del archivo
Las dimensiones en píxeles describen el archivo de origen: por ejemplo, 1.600 × 900 píxeles. La relación de aspecto describe su forma; en ese caso es 16:9. El peso, en KB o MB, indica cuántos datos descarga el navegador. Cambiar uno de estos valores no resuelve los demás.
Ejemplo de cálculo: si una imagen ocupa 800 píxeles CSS de ancho, un archivo de 1.600 píxeles puede aportar dos píxeles de imagen por cada píxel CSS. Es un ejemplo para planificar, no una medida obligatoria de exportación. web.dev explica cómo influye la densidad de pantalla. El diseño y el dispositivo determinan qué resulta útil.
Antes de exportar, pide al diseñador la proporción prevista y el mayor tamaño de visualización. Un archivo más ancho no arregla un recorte que parte el producto por la mitad. Un archivo ligero tampoco sirve si sus etiquetas dejan de leerse.
Prepara originales según la función de cada imagen
Mantén una carpeta de originales intactos y otra de versiones web aprobadas. Entrega una lista breve que relacione cada archivo con su página, contenido y finalidad. Son recomendaciones de trabajo, no especificaciones universales de una plataforma.
| Uso | Qué entregar | Qué acordar antes de recortar |
|---|---|---|
| Imagen principal panorámica | Original con espacio alrededor del sujeto | Posición del sujeto y del titular en ordenador y móvil |
| Tarjeta de producto | Vistas coherentes del artículo real | Proporción, fondo y escala comparable entre productos |
| Detalle o vista técnica | Primer plano nítido del elemento relevante | Detalle que debe verse y necesidad de una vista ampliada |
| Instalaciones o servicio | Foto actual con contexto correcto | Qué representa y en qué página se necesita |
| Logotipo | Archivo original de marca, vectorial si existe | Uso sobre fondos claros y oscuros y espacio libre |
Identifica la versión aprobada. Si una foto muestra un producto retirado, una ubicación antigua o un accesorio opcional, anótalo antes de incorporarla al diseño. En un catálogo, no dejes que una imagen atractiva represente sin explicación varias especificaciones diferentes.
Registra el origen y las condiciones de permiso o licencia que tengas. Pide que el proveedor identifique las imágenes de archivo o los conceptos generados para distinguirlos de fotografías de trabajos reales. Es una recomendación de gestión de archivos; no demuestra derechos legales sobre ellos.
Acuerda las versiones web y los recortes móviles
Pide versiones que equilibren detalle visible y peso de descarga. Evita imponer un formato, un nivel de calidad o un límite de KB a todas las imágenes. Un logotipo, una fotografía y un diagrama tienen necesidades distintas. Compara las versiones dentro de la página, especialmente si contienen letras pequeñas o bordes finos.
En el encargo, distingue dos preguntas: ¿el móvil necesita una copia más pequeña de la misma composición o un recorte diferente? Las imágenes adaptables permiten elegir fuentes; la implementación debe responder al diseño acordado. Puedes revisar el resultado sin escribir ese código.
Una foto panorámica, por ejemplo, puede dejar el objeto demasiado pequeño al ajustarse a una pantalla estrecha. Pide una composición móvil más cerrada u otra ubicación y comprueba que sigue mostrando el objeto correcto. No lo soluciones deformando la imagen.
Conserva los originales aunque la web use copias comprimidas. Permiten preparar otro encuadre sin partir de una versión ya reducida. La lista de contenidos para el diseñador ayuda a organizar el resto de la entrega.
Añade el contexto adecuado a cada imagen útil
Usa nombres que el equipo reconozca, como tirador-laton-vista-lateral, en lugar de un número de cámara sin explicación. Añade la identidad del producto o servicio a la lista. La guía de imágenes de Google trata los nombres descriptivos, el contexto y el texto alternativo; ninguno garantiza una posición en los resultados.
El texto alternativo depende de la función en esa página. Una fotografía informativa de producto necesita una descripción útil; una imagen puramente decorativa puede llevar texto alternativo vacío. Si la imagen es el único contenido de un enlace, debe comunicar el destino o la acción. Consulta el árbol de decisión del W3C con el diseñador cuando haya dudas.
Publica las especificaciones e instrucciones necesarias como texto legible en la página, sin depender únicamente de una foto de la etiqueta. La persona que aprueba la información del producto debe revisar juntos la descripción y la imagen visible.
Revisa la imagen dentro de la página
Abre las páginas terminadas en ordenador y móvil. Revisa la imagen principal, una tarjeta normal y la foto con el detalle más exigente. Comprueba que el sujeto está completo, el recorte tiene sentido, las proporciones son naturales y el detalle importante se lee. Prueba cualquier control de ampliación y comprueba su destino.
Pide al responsable técnico que confirme que se reserva espacio para las imágenes mientras carga la página y que se puede aplazar la carga de las que quedan fuera de la vista inicial cuando corresponda. No debe retrasarse indiscriminadamente la imagen principal visible. web.dev explica la carga y la estabilidad visual. Si la página completa sigue lenta, consulta la guía de rendimiento en móvil para ampliar el diagnóstico.
Termina con una lista de imágenes aprobadas, los originales conservados, las versiones web y un responsable de actualización. Una entrega útil permite cambiar la foto de un producto el mes que viene sabiendo qué archivo, encuadre y descripción corresponden a esa página.
