Flujo práctico de imágenes web para pequeñas empresas

Anota qué debe comprender o decidir la persona gracias a cada imagen. Un alojamiento de Mallorca puede necesitar mostrar las vistas reales de una habitación; una clínica veterinaria, quién recibe al animal; y un taller náutico, el detalle de una reparación. “Decorar la página” no es un objetivo suficientemente claro.

Prepara una lista sencilla con página, tema, finalidad, orientación, responsable y procedencia. Guarda el original sin tocar en una carpeta separada y publica copias preparadas. Así evitas perder calidad al editar varias veces y puedes crear otro recorte cuando cambie el diseño.

Elige la foto para el espacio donde aparecerá. Una cabecera panorámica, un retrato cuadrado y una imagen de producto necesitan encuadres distintos. Recorta el fondo que no aporta información, pero conserva la entrada, el rostro, la etiqueta, el acabado u otro detalle que ayude a tomar una decisión.

Revisa el resultado en un móvil estrecho y en un portátil. Una foto horizontal de una terraza puede convertirse en una franja sin interés en pantalla pequeña. En ese caso conviene preparar un segundo recorte centrado en la mesa y las vistas. La escena no cambia; cambia la composición para que siga siendo útil.

Conserva el archivo de origen y exporta una copia cercana al mayor tamaño visible. No subas una foto enorme de cámara para mostrarla como una tarjeta pequeña. JPEG, WebP o AVIF pueden funcionar bien para fotografías; PNG resulta útil con transparencia o bordes gráficos precisos, y SVG suele encajar en logotipos e ilustraciones vectoriales sencillas. Ningún formato gana en todos los casos.

Comprueba la compresión mirando caras, letras, bordes del producto, degradados y zonas oscuras. Reduce el peso mientras no aparezcan daños visibles al tamaño real de uso. Google admite formatos habituales como JPEG, PNG, WebP, SVG y AVIF, y recomienda que la extensión del nombre coincida con el tipo verdadero de archivo.

Reducir visualmente una imagen grande no impide que el móvil descargue el archivo completo. Una web adaptable puede ofrecer varias anchuras mediante srcset y sizes para que el navegador escoja la apropiada. El elemento picture permite además usar otro recorte o un formato moderno con una alternativa compatible.

La plataforma web o el profesional que la mantiene suele resolver esta parte. Pregunta si el sistema crea tamaños automáticos, qué anchuras genera y si alguna página entrega por error el original. Conviene conservar un src de respaldo, porque Google indica que algunos navegadores y rastreadores dependen de él.

Antes de subir el archivo, usa un nombre corto y descriptivo: habitacion-doble-vistas-mar-mallorca.webp comunica más que IMG_4821.webp. Google explica que el nombre aporta pistas ligeras, mientras que el texto cercano, el pie de foto y el texto alternativo ayudan a entender el contexto. Un buen nombre ordena la biblioteca; no justifica repetir palabras clave.

El texto alternativo, o atributo alt, transmite la función de la imagen a quien no puede verla. W3C aconseja resumir la información esencial en imágenes informativas, describir la acción si funciona como enlace o botón y dejar un alt vacío si es puramente decorativa. Una misma foto puede necesitar otro texto en una galería que en una página sobre acceso adaptado.

Incluye la anchura y la altura para que el navegador reserve el espacio antes de descargar la imagen. MDN explica que así se evita que el texto cercano salte durante la carga. La imagen puede seguir adaptándose al diseño, porque esas dimensiones mantienen su proporción.

Las imágenes situadas más abajo pueden usar carga diferida para esperar hasta que la persona se acerque a ellas. No la apliques por rutina a la imagen principal: web.dev advierte que retrasar una foto visible al abrir la página puede hacer que aparezca tarde. Tampoco marques todas las imágenes como prioritarias.

En cada idioma revisa nombre de archivo, alt, pie, texto cercano y destino del enlace. Google recomienda traducir también los nombres cuando se localizan imágenes. La versión española puede usar habitacion-doble-vistas-mar.webp y la inglesa sea-view-double-room.webp. Mantén las direcciones cortas y evita caracteres que el gestor de contenidos procese mal.

No coloques precios, horarios, instrucciones o botones importantes dentro de una fotografía. Ese texto resulta más difícil de traducir, ampliar, buscar y actualizar. Si una pieza visual necesita palabras, prepara una versión controlada por idioma y repite la información esencial como texto real de la página.

Previsualiza la página real, no solo la biblioteca de medios. Comprueba móvil y ordenador, amplía la vista, bloquea temporalmente las imágenes y simula una conexión lenta si el navegador lo permite. El tema principal debe seguir visible, la página debe entenderse sin la foto y el contenido no debería moverse al cargar.

Imagina una empresa de excursiones que publica la misma ruta en seis idiomas. Conserva un original, prepara recortes horizontal y vertical, exporta varios tamaños, redacta un alt natural en cada idioma y revisa la reserva en el móvil. Documenta el proceso una vez y lo repite con la siguiente actividad.