Una imagen web está lista cuando tiene un propósito claro, permiso de uso, un recorte adecuado, un archivo eficiente y una alternativa textual acorde con su función. El archivo más pequeño no siempre es la mejor opción: quien visita la web debe poder reconocer un producto, leer un diagrama o entender una ilustración. Revisa la imagen dentro de su página antes de aprobarla.
Usa esta lista al preparar una web nueva, sustituir un banner demasiado pesado o entregar una carpeta de recursos a quien desarrolla el sitio. Trabaja primero con una imagen representativa, acuerda las decisiones y aplícalas después al resto. Guarda el original por separado para que un futuro rediseño no dependa de una exportación ya comprimida.
1. Decide qué debe comunicar la imagen
Describe en una frase la función de cada imagen. La fotografía de un producto puede mostrar un acabado; un diagrama de proceso puede explicar una secuencia; una textura decorativa puede simplemente acompañar el ambiente de la página. Si nadie puede describir su función, reconsidera si merece esa descarga. Para aligerar una página también puedes eliminar una imagen innecesaria, además de comprimir las existentes.
Guarda junto al archivo maestro la fuente, el autor o proveedor, el uso permitido y cualquier atribución obligatoria. Comprueba si el permiso cubre el uso previsto en la web y las posibles modificaciones o recortes. Recibir un archivo por correo electrónico no resuelve por sí solo esas cuestiones. Consulta los permisos dudosos con el titular de los derechos o un asesor cualificado; esto es una comprobación de gestión de recursos, no asesoramiento jurídico.
Si utilizas imágenes conceptuales generadas, conserva el prompt y el registro de generación, y explica su función con honestidad. No presentes un espacio de trabajo, equipo o producto imaginario como una fotografía del negocio. Elimina los datos personales innecesarios de las capturas y revisa la exportación final, incluido lo que aparece en las pestañas del navegador o los paneles de cuenta.
2. Elige el formato según el contenido
Elige un formato inicial, exporta una versión y compárala con el original al tamaño en que se verá. Cada imagen responde de forma distinta a los mismos ajustes de codificación. No existe un único valor de calidad ni una extensión de archivo que deje todos los recursos listos para publicar.
- Fotografías e ilustraciones detalladas: compara WebP o AVIF con un JPEG bien codificado. Conserva la opción que mantenga los detalles importantes con un tamaño de transferencia aceptable.
- Logotipos y diagramas sencillos: considera SVG si dispones de un original vectorial de confianza. Revisa el SVG recibido antes de incorporarlo al sitio y mantén el texto esencial disponible en la página.
- Gráficos de mapa de bits que necesitan bordes exactos o transparencia: compara PNG con una exportación WebP adecuada, sin pérdida o con transparencia. Inspecciona las líneas finas, las letras y los bordes translúcidos sobre el fondo real.
- Recursos animados: pregunta primero si el movimiento aporta información. Una imagen fija puede transmitir lo mismo con menos distracciones y una implementación más sencilla.
Son puntos de partida para probar, no una obligación de crear todos los formatos. Cada variante adicional necesita una razón y una configuración que permita servirla correctamente. Un AVIF sin utilizar junto al JPEG publicado no mejora nada. Conserva los ajustes de exportación en el registro del recurso para que otra persona pueda reproducir una corrección sin adivinar.
3. Ajusta las dimensiones al diseño
Distingue entre las dimensiones del archivo original, las dimensiones de visualización y el recorte. Una fotografía puede contener miles de píxeles y aparecer en una tarjeta pequeña. Exportar el original completo de la cámara para cada tarjeta desperdicia transferencia sin hacerla necesariamente más útil. A la inversa, ampliar una exportación diminuta en una pantalla grande deja al descubierto su falta de nitidez.
El marcado de imágenes adaptables puede ofrecer varios anchos mediante srcset, mientras que sizes describe el ancho previsto en el diseño. El navegador elige un recurso a partir de esa información y de su entorno. Usa picture cuando deba cambiar la composición, por ejemplo, con un recorte más cerrado en móvil. MDN explica la diferencia entre cambiar la resolución y dirigir la composición en su guía de imágenes adaptables.
Para la revisión, enumera los espacios reales: banner a todo el ancho, imagen de contenido en dos columnas, tarjeta y vista previa para redes sociales. Comprueba un teléfono estrecho y una pantalla ancha. Mantén el motivo principal alejado de los bordes que desaparecen al recortar. Si quedan fuera una cara, una etiqueta o un detalle importante, cambiar la compresión no lo resolverá; cambia el recorte o el diseño.
Define atributos width y height adecuados para que el navegador pueda reservar espacio según la proporción de la imagen. Asegúrate de que el CSS adaptable y los recortes alternativos encajen en ese espacio reservado. Prueba la carga inicial, además de la página completamente cargada: una captura estable puede ocultar un salto ocurrido antes.
4. Comprime sin perder el motivo de la imagen
Compara las exportaciones una junto a otra al tamaño de visualización previsto. Busca bandas en los degradados, halos en los bordes finos, detalles emborronados y contornos inesperados en las zonas transparentes. En las imágenes de productos, confirma que no haya desaparecido una textura o una diferencia de color. El compromiso aceptable depende de lo que la persona necesite conocer.
Acuerda un presupuesto de tamaño orientativo para cada espacio y estudia las excepciones. Una imagen de instrucciones detallada puede justificar más bytes que una tarjeta decorativa. El presupuesto debe abrir una conversación útil sobre formato, recorte y dimensiones; no debe obligar a publicar algo ilegible ni convertirse en una regla universal inventada como «todas las imágenes deben pesar menos de 100 KB».
Mide el archivo que recibe realmente el navegador. Un gestor de contenidos puede volver a comprimir una carga, servir una variante inesperada o conservar una imagen anterior en caché. Inspecciona la página renderizada y la respuesta de red después de publicar. Mantén un archivo maestro aprobado y exportaciones con nombres claros, en lugar de volver a guardar una imagen ya comprimida mediante otra operación con pérdida.
5. Escribe el texto alternativo según la función de la imagen
Empieza por el contenido que la rodea. Las imágenes informativas necesitan una alternativa textual que transmita su significado relevante; las decorativas suelen usar alt="" vacío. Si una imagen aporta el nombre accesible de un enlace o botón, describe su acción o destino. Los diagramas complejos necesitan una explicación más completa disponible cerca. El árbol de decisión de W3C para el texto alternativo ayuda a distinguir estos casos.
Por ejemplo, un primer plano en una página de materiales podría describirse como «Tirador de latón cepillado con borde redondeado». Un icono enlazado a una descarga necesita explicar el propósito de la descarga, no describir la flecha. Un resplandor decorativo detrás de un título no debería anunciar «fondo azul luminoso» a cada persona que utilice un lector de pantalla. La misma imagen puede necesitar otra alternativa en una página diferente porque su función ha cambiado.
Escribe con lenguaje natural y conciso e incluye detalles solo cuando ayuden a sustituir la información visual relevante. No llenes el atributo de palabras clave sobre servicios. Comprueba si un pie de imagen o un párrafo cercano ya dice lo mismo y evita repeticiones innecesarias durante la lectura. Traduce las alternativas junto con la página, incluido cualquier significado que cambie con las etiquetas o capturas localizadas.
Revisa la página sin imágenes disponibles e inspecciona los nombres accesibles de los enlaces de imagen. Así detectarás información ausente y anuncios duplicados que una revisión visual puede pasar por alto. Las comprobaciones automáticas pueden señalar un atributo que falta, pero no juzgan con fiabilidad si una frase describe lo correcto.
6. Carga la imagen importante en el momento adecuado
La imagen principal visible al entrar no debería retrasarse mediante carga diferida. Las imágenes situadas más abajo son candidatas a loading="lazy". Reserva también su espacio. La guía de carga diferida de web.dev explica por qué las imágenes visibles inicialmente necesitan un tratamiento distinto de las que quedan fuera de la ventana inicial.
Comprueba qué imagen se convierte realmente en el elemento visible más grande de la página. Un banner decorativo grande puede competir con el título y el contenido útil. Si la imagen principal probablemente determina Largest Contentful Paint, facilita que el navegador la descubra pronto y valora si conviene asignarle una prioridad de descarga alta. Dar prioridad alta a todas las imágenes elimina esa distinción útil.
Prueba una carga nueva con una conexión limitada y recorre después toda la página. Busca espacios que siguen vacíos, desplazamientos visibles del contenido y descargas mucho mayores de lo necesario para el espacio de visualización. Trata una auditoría local de rendimiento como evidencia sobre la página y la configuración probadas, no como una promesa para la conexión o el dispositivo de cada visitante.
7. Usa una ficha de decisiones antes de exportar
Guarda esta pequeña ficha con la carpeta de recursos. Vincula una decisión visual con una comprobación de implementación y ofrece a la siguiente persona que edite algo más útil que un nombre de archivo terminado en «final». Completa una fila por función cuando el mismo archivo maestro se utilice en varios lugares.
| Decisión | Qué registrar y comprobar |
|---|---|
| Propósito y fuente | Qué explica la imagen; archivo maestro; registro del permiso o la aprobación. |
| Ubicación y recorte | Página y espacio; anchos de visualización; punto focal; recorte para móvil. |
| Exportación | Formato elegido; dimensiones en píxeles; tamaño del archivo; ajustes; revisión visual. |
| Alternativa | Función informativa, decorativa o funcional; texto localizado; explicación cercana. |
| Entrega | Variantes adaptables; dimensiones reservadas; comportamiento de carga; URL publicada. |
Imagina una tienda de cerámica que prepara la fotografía de un cuenco para una página de producto. El archivo maestro es una fotografía aprobada de 4000 píxeles de ancho. El equipo comprueba el espacio real del producto, exporta dos anchos útiles, compara JPEG y WebP, y elige la versión que conserva el detalle del esmalte. El recorte para teléfono mantiene visible el borde. La alternativa describe el acabado relevante; el texto contiguo del producto incluye las dimensiones y las instrucciones de cuidado.
Este ejemplo es un proceso de decisión, no una receta de exportación obligatoria ni el resultado de un cliente. Un primer plano de una textura, un diagrama de medidas y una imagen decorativa de campaña conducirían a decisiones distintas. Registra el motivo de cada excepción para que la siguiente actualización no la deshaga.
8. Comprueba la detección de imágenes y la página final
Usa elementos de imagen estándar para el contenido significativo, proporciona un src alternativo que funcione y mantén las URL de las imágenes accesibles para los rastreadores cuando quieras facilitar su descubrimiento. Usa nombres de archivo descriptivos y coloca las imágenes junto a texto relevante. La guía de SEO de imágenes de Google explica estas prácticas; también señala que Google no indexa las imágenes de fondo de CSS. Estas comprobaciones favorecen el descubrimiento, pero no garantizan la indexación ni las posiciones en los resultados.
- Confirma la imagen, el recorte y la alternativa aprobados en todos los idiomas publicados.
- Comprueba el archivo adaptable seleccionado, las dimensiones intrínsecas y el comportamiento de carga.
- Sigue los enlaces de imagen con el teclado y verifica que sus nombres tengan sentido.
- Inspecciona por separado la vista previa para redes sociales; puede utilizar otro recorte y archivo.
- Conserva el archivo maestro, los ajustes de exportación y el registro del permiso para la próxima actualización.
Si preparar las imágenes forma parte de un proyecto web más amplio, consulta el servicio de sitios web de Digital Studio e incluye los recursos existentes y las imágenes que faltan en tu brief del sitio web. Una lista clara de recursos ayuda a empezar el proyecto con decisiones concretas sobre qué conservar, sustituir o crear.
