Bases técnicas

Preparar imágenes para la web

Ajuste tamaño y recorte, escriba alternativas útiles y conserve originales y licencias. Preparar una imagen para la web no consiste solo en reducir su calidad hasta obtener un archivo pequeño. Un proyecto arquitectónico puede usar una vista previa ligera y una imagen mayor donde haga falta. Un archivo pequeño no sirve si pierde detalles importantes.

Preparar imágenes para la web

Empiece por el lugar que ocupará la imagen

Preparar una imagen para la web no consiste solo en reducir su calidad hasta obtener un archivo pequeño. Primero debe saberse dónde aparecerá, a qué tamaño y con qué finalidad. Una fotografía principal, una miniatura y una imagen de detalle necesitan decisiones diferentes.

Defina una proporción antes de exportar. Si la composición utiliza un espacio horizontal, una fotografía vertical puede recortarse de forma poco útil. Identifique el punto importante y compruebe su visibilidad tanto en escritorio como en móvil. El rostro, producto o detalle arquitectónico que explica la imagen no debería desaparecer en la versión estrecha.

No envíe dimensiones mucho mayores de las que se mostrarán sin una razón concreta. A la vez, una imagen demasiado pequeña puede perder detalle. Prepare las variantes necesarias para los usos reales y evite generar combinaciones de tamaños que nunca se utilizan.

Equilibre formato, compresión y accesibilidad

El formato debe elegirse según el contenido y la compatibilidad del proyecto. Fotografía, ilustración con transparencia y símbolo vectorial no plantean exactamente la misma necesidad. Compare el archivo exportado con el original a su tamaño de visualización, no únicamente ampliado de forma extrema.

Aumente la compresión gradualmente y revise bordes, textos integrados y zonas con textura. Un fondo decorativo admite decisiones distintas de una fotografía que permite evaluar un trabajo. Reducir bytes perdiendo la información importante no mejora la experiencia.

Reserve anchura y altura o una proporción en la página para evitar saltos. Cargue con prioridad lo que realmente pertenece a la primera pantalla y estudie la carga diferida de contenido posterior. Aplicar la misma prioridad a todas las imágenes elimina esa distinción.

El texto alternativo debe explicar la función informativa dentro del contexto. No necesita repetir cada palabra del pie ni llenarse de términos comerciales. Una imagen decorativa puede tratarse de otra manera para no añadir ruido a lectores de pantalla.

Conserve origen y derechos junto a los archivos

Registre quién proporcionó la imagen, dónde se obtuvo y qué permiso permite usarla. Una fotografía que aparece en una plantilla de demostración no es necesariamente reutilizable. Las imágenes reales de clientes o personas también necesitan una revisión adecuada del uso previsto.

Mantenga originales y versiones finales organizadas. Un nombre comprensible y un registro sencillo facilitan sustituir una imagen sin volver a buscar su procedencia. No introduzca datos personales innecesarios en nombres públicos o metadatos.

Antes de publicar, examine una muestra real en varias pantallas. Compruebe recorte, nitidez, texto alternativo y tiempo de aparición. Si un recurso no carga, la explicación del servicio debe seguir siendo comprensible. Una preparación sólida combina tamaño, significado, derechos y comportamiento; no se limita a perseguir el archivo más pequeño posible. Documente esas decisiones para que las siguientes imágenes mantengan el mismo criterio.

Lista práctica

  • Elegir proporción
  • Declarar dimensiones
  • Examinar compresión

Un ejemplo concreto: Un proyecto arquitectónico puede usar una vista previa ligera y una imagen mayor donde haga falta.

Un límite importante: Un archivo pequeño no sirve si pierde detalles importantes.

Siguiente paso

Cuéntele su proyecto a Orvunweb

Lecturas relacionadas

Fuente