Cómo preparar imágenes para una web

1. Empieza por la función de la imagen

Antes de abrir el programa de edición, define dónde aparecerá la imagen y qué información aporta. Una cabecera necesita espacio para convivir con el texto; una fotografía de producto debe dejar claro el objeto; un retrato de equipo tiene que mantener un encuadre coherente con los demás.

Anota también los recortes que necesitarás. Si una misma sesión debe alimentar una web, una tienda y varias redes, prever versiones horizontales, verticales y cuadradas evita depender después de recortes que eliminan la parte importante de la fotografía.

• Página y posición exacta en la que se publicará.
• Proporción horizontal, vertical o cuadrada.
• Elemento que debe seguir visible en todos los recortes.
• Espacio libre necesario para titulares o controles.

2. Exporta cerca del tamaño en el que se mostrará

Una fotografía tomada por una cámara puede medir varios miles de píxeles. Si en la página sólo ocupará una tarjeta, enviar el original obliga al navegador a descargar información que no va a mostrar. Conserva ese original fuera de la web y genera una copia ajustada al tamaño de salida.

Las páginas adaptables pueden pedir distintas versiones según la pantalla. Por eso conviene entregar al desarrollo una imagen principal y, cuando el diseño lo requiera, variantes suficientes para móvil y escritorio. Indicar la anchura y la altura permite además reservar el espacio antes de que termine la descarga.

3. Elige el formato por el contenido, no por costumbre

WebP y AVIF son formatos modernos adecuados para muchas fotografías y admiten compresión eficiente. JPEG sigue siendo una alternativa útil para fotografía cuando hace falta compatibilidad con un flujo antiguo. PNG encaja mejor cuando necesitas transparencia o conservar gráficos con bordes definidos sin pérdida.

Para logotipos, iconos e ilustraciones vectoriales, SVG puede mantener líneas nítidas a distintos tamaños. No existe un formato correcto para todo: decide según el tipo de imagen, la transparencia, el nivel de detalle y los formatos que pueda servir la plataforma.

4. Comprime mirando la imagen final

La compresión con pérdida reduce información para conseguir un archivo menor. El punto adecuado no se decide con una cifra universal: exporta una versión, mírala al tamaño real y revisa zonas delicadas como piel, cabello, degradados, sombras y texto dentro de la imagen.

Si aparecen bloques, halos o bandas, aumenta la calidad o cambia de formato. Si no percibes diferencia entre dos versiones, conserva la más ligera. La comparación debe hacerse sobre la imagen que verá la persona, no sólo sobre el porcentaje que muestra la herramienta.

5. Escribe el texto alternativo según el contexto

El atributo alt comunica la función o el contenido de una imagen cuando ésta no se ve. Describe de forma breve lo que resulta relevante para entender la página. No repitas una lista de palabras clave ni copies automáticamente el nombre del archivo.

Una imagen puramente decorativa puede llevar un texto alternativo vacío para que la tecnología de asistencia la ignore. Si la imagen funciona como enlace o control, la alternativa debe expresar la acción. El mismo archivo puede necesitar una descripción distinta cuando cambia el contexto en el que aparece.

6. Revisa esta lista antes de publicar

La última comprobación dura pocos minutos y evita volver a preparar toda la biblioteca cuando la web ya está montada.

• El recorte mantiene visible el sujeto principal.
• Las dimensiones se corresponden con el uso previsto.
• El formato conserva la calidad y la transparencia necesarias.
• La compresión no introduce defectos visibles.
• El nombre del archivo es corto y descriptivo.
• El texto alternativo explica la imagen o queda vacío si es decorativa.
• El original de alta calidad se conserva fuera de la carpeta de publicación.